fix zoom and pan

config.js

@@ -1,11 +1,9 @@
 // VELOCITY
-export const VELOCITY_VECTOR_SCALE = 8E0;
 export const VELOCITY_VECTOR_COLOR = 'rgba(150, 150, 150, 0.8)'; // optionally set to 'object color'
 export const VELOCITY_VECTOR_WIDTH = 1.5;
 export const VELOCITY_VECTOR_ARROWHEAD = true;
 
 // ACCELERATION
-export const ACCELERATION_VECTOR_SCALE = 8E0;
 export const ACCELERATION_VECTOR_COLOR = 'rgba(0, 128, 0, 0.8)'; // optionally set to 'object color'
 export const ACCELERATION_VECTOR_WIDTH = 1.5;
 export const ACCELERATION_VECTOR_ARROWHEAD = true;
@@ -25,7 +23,6 @@ export const ARROWHEAD_WIDTH = 5;
 export const OFFSCREEN_OBJECT_LINE_SCALE = 7;
 export const OFFSCREEN_OBJECT_LINE_WIDTH = 2;
 export const OFFSCREEN_OBJECT_ARROWHEAD_LENGTH = 15;
-export const ZOOM_TO_FIT_PADDING = 50;
 export const ZOOM_IN_FACTOR = 1;
 export const ZOOM_OUT_FACTOR = -1;
 export const SCALE_POWER_MAX = 8;
@@ -52,5 +49,8 @@ export const MODE_MASS_GENERATION = 'mass-gen';
 export const MODE_PAN_VIEW = 'pan-view';
 export const MODE_OBJECT_SELECT = 'select';
 
-// LOCAL STORAGE PREFIXES/SUFFIXES
+// LOCAL STORAGE NAMESPACES
 export const TOOLBAR_EXPANDED_SUFFIX = 'lhg-toolbar-expanded';
+export const OBJECT_MAGIC_PROP_PREFIX = '_lhg_';
+
+

display.js

@@ -67,10 +67,6 @@ export class Display {
     ctx.fillRect(this.viewOrigin.x, this.viewOrigin.y, this.width, this.height);
   }
 
-  drawObjects() {
-    this.sim.objects.forEachObject(obj => obj.drawObject(this.sim), {alive: null});
-  }
-
   drawArrow(startX, startY, endX, endY, {style, width, arrowhead, arrowheadLength, fill, ifShort}) {
     const ctx = this.ctx;
     ctx.strokeStyle = style;
@@ -139,28 +135,46 @@ export class Display {
     ctx.resetTransform();
   }
 
-  computePanning(elapsedTime) {
-    // Add another entry for the current pointer position
+  frame(elapsedTime) {
     const { 
-      pointerHistory, 
-      panTouchStart: start, 
-      panTouchLatest: latest,
+      touchStart: start, 
+      touchLatest: latest,
     } = this.sim.pointer ?? {};
-    if (pointerHistory?.length) {
-      const currentPointer = pointerHistory[pointerHistory.length - 1];
-      this.sim.pointer.updatePointer(currentPointer);
-    }
+
     if (start && latest) {
       // Direct translate
       this.viewOrigin.x = start.viewOrigin.x - (latest.x - start.x) / this.scale;
       this.viewOrigin.y = start.viewOrigin.y - (latest.y - start.y) / this.scale;
-    } else if (this.sim.panning && !this.sim.panning.paused) {
-      // Apply update to viewOrigin based on panning
-      const { velocity } = this.sim.panning;
-      // TODO: something with time scale? Panning is too fast.
-      this.viewOrigin.x -= velocity.x * elapsedTime / 1000; // millisecond conversion?
-      this.viewOrigin.y -= velocity.y * elapsedTime / 1000;
-    }
-  }
+    } 
 
+    let pdx = 0;
+    let pdy = 0;
+
+    if (this.sim.panning && !this.sim.panning.paused) {
+      // Apply update to viewOrigin based on panning
+      pdx = this.sim.panning.velocity.x * elapsedTime;
+      pdy = this.sim.panning.velocity.y * elapsedTime;
+    }
+    
+    this.viewOrigin.x += pdx;
+    this.viewOrigin.y += pdy;
+
+    if (start && latest) {
+      // Update what's considered start
+      start.viewOrigin = {...this.viewOrigin};
+      start.x = latest.x;
+      start.y = latest.y;
+    } 
+
+    if (this.sim.getOption('debug.panningInfo')) {
+      const {x, y} = this.sim.panning?.velocity ?? {};
+      this.sim.info['Panning Velocity'] = [`${x?.toPrecision(6)}, `, y?.toPrecision(6)];
+      const { centerOfMass } = this.sim.system.computeSystemCenter();
+      this.sim.info['Center of Mass'] = [`${centerOfMass.x.toPrecision(6)}, `, centerOfMass.y.toPrecision(6)];
+      this.sim.info['Net Angular Momentum'] = this.sim.system.computeSystemAngularMomentum().toPrecision(6);
+    }
+
+    // Clear canvas in preparation for other modules to render this frame
+    this.fillCanvas();
+  }
 }

helper.js

@@ -0,0 +1,2 @@
+export function makeUtilityButton() {
+}

object.js

@@ -1,7 +1,6 @@
 import {
   ACCELERATION_VECTOR_ARROWHEAD,
   ACCELERATION_VECTOR_COLOR,
-  ACCELERATION_VECTOR_SCALE,
   ACCELERATION_VECTOR_WIDTH,
   OFFSCREEN_OBJECT_ARROWHEAD_LENGTH,
   OFFSCREEN_OBJECT_LINE_SCALE,
@@ -12,11 +11,12 @@ import {
   PATH_TRACES_WIDTH,
   VELOCITY_VECTOR_ARROWHEAD,
   VELOCITY_VECTOR_COLOR,
-  VELOCITY_VECTOR_SCALE,
   VELOCITY_VECTOR_WIDTH,
 } from './config.js';
 
 export class MassObject {
+  sim = undefined;
+  id = undefined;
   mass = 0;
   density = 1;
   position = {x: undefined, y: undefined};
@@ -28,7 +28,9 @@ export class MassObject {
   history = [];
   alive = true;
 
-  constructor(x, y) {
+  constructor(sim, x, y) {
+    this.sim = sim;
+    this.id = crypto.randomUUID();
     this.position.x = x;
     this.position.y = y;
     this.color.r = Math.random() * 256;
@@ -86,7 +88,7 @@ export class MassObject {
       const opacity = dashedTraces ? PATH_TRACES_DASHED_OPACITY : PATH_TRACES_OPACITY;
       ctx.strokeStyle = PATH_TRACES_COLOR === 'object color' ?
         `rgba(${r}, ${g}, ${b}, ${opacity})` : PATH_TRACES_COLOR;
-      ctx.lineWidth = PATH_TRACES_WIDTH / this.scale;
+      ctx.lineWidth = PATH_TRACES_WIDTH / this.sim.display.scale;
       ctx.beginPath();
       let dash = false;
       for (let i = 0; i < this.history.length; i++) {
@@ -142,8 +144,8 @@ export class MassObject {
 
       const arrowDirection = Math.atan2(py - cy, px - cx);
       // Length of arrow based on distance (logarithmic scale)
-      const distance = Math.sqrt((x - px) ** 2, (y - py) ** 2) * this.scale;
-      const arrowLength = Math.log(distance) * OFFSCREEN_OBJECT_LINE_SCALE / this.scale;
+      const distance = Math.sqrt((x - px) ** 2, (y - py) ** 2);
+      const arrowLength = Math.log(distance + 1) * OFFSCREEN_OBJECT_LINE_SCALE / this.sim.display.scale;
       const startAx = px - arrowLength * Math.cos(arrowDirection);
       const startAy = py - arrowLength * Math.sin(arrowDirection);
       sim.display.drawArrow(startAx, startAy, px, py, {
@@ -165,9 +167,19 @@ export class MassObject {
 
     // Draw arrow for the velocity
     if (sim.getOption('display.velocity')) {
-      const speed = Math.sqrt(vx ** 2 + vy ** 2);
-      const endVx = x + VELOCITY_VECTOR_SCALE * vx / speed * Math.log(speed);
-      const endVy = y + VELOCITY_VECTOR_SCALE * vy / speed * Math.log(speed);
+      // If this object is being dragged by the user,
+      // show the pointer velocity instead of object velocity
+      const vecScale = this.sim.getOption('param.velocityScale');
+      const selected = this.sim.system.getSelectedOrCreating();
+      const velocity = selected?.id === this.id ? 
+        this.sim.pointer.latestVelocity ?? {x: 0, y: 0} : 
+        {x: vx, y: vy};
+      const speed = Math.sqrt(velocity.x ** 2, velocity.y ** 2);
+      const arrowDirection = Math.atan2(velocity.y, velocity.x);
+      // Prevent negative numbers by adding 1
+      const arrowLength = Math.log(speed + 1) * vecScale / this.sim.display.scale;
+      const endVx = x + arrowLength * Math.cos(arrowDirection);
+      const endVy = y + arrowLength * Math.sin(arrowDirection);
       const style = VELOCITY_VECTOR_COLOR === 'object color' ?
         `rgb(${r}, ${g}, ${b})` : VELOCITY_VECTOR_COLOR;
       sim.display.drawArrow(x, y, endVx, endVy, {
@@ -181,11 +193,13 @@ export class MassObject {
 
     // Draw arrow for acceleration
     if (sim.getOption('display.acceleration')) {
+      const vecScale = this.sim.getOption('param.accelerationScale');
       const accelerationMagnitude = Math.sqrt(acceleration.x ** 2 + acceleration.y ** 2);
-      const endAx = x + ACCELERATION_VECTOR_SCALE * acceleration.x /
-        accelerationMagnitude * Math.log(accelerationMagnitude);
-      const endAy = y + ACCELERATION_VECTOR_SCALE * acceleration.y /
-        accelerationMagnitude * Math.log(accelerationMagnitude);
+      const arrowDirection = Math.atan2(acceleration.y, acceleration.x);
+      // Prevent negative numbers by adding e
+      const arrowLength = Math.log(accelerationMagnitude + 1) * vecScale / this.sim.display.scale;
+      const endAx = x + arrowLength * Math.cos(arrowDirection);
+      const endAy = y + arrowLength * Math.sin(arrowDirection);
       const style = ACCELERATION_VECTOR_COLOR === 'object color' ?
         `rgb(${r}, ${g}, ${b})` : ACCELERATION_VECTOR_COLOR;
       sim.display.drawArrow(x, y, endAx, endAy, {

options.js

@@ -1,11 +1,14 @@
 import {
   EVENT_OPTION_SET,
+  OBJECT_MAGIC_PROP_PREFIX,
 } from './config.js';
 
 export class Options {
   sim = undefined;
   options = undefined;
   values = {};
+  undefinedObj = { [OBJECT_MAGIC_PROP_PREFIX + 'undefined']: true};
+  nullObj = { [OBJECT_MAGIC_PROP_PREFIX + 'null']: true};
 
   getStorageKey(path) {
     return `${path}:options`;
@@ -34,10 +37,27 @@ export class Options {
   }
 
   toStored(value) {
+    if (value === undefined) {
+      // TODO: Do we want to interpret this as removing from storage?
+      // Let's just treat it as a value for now;
+      // Semantically it works because when retrieved, it will return undefined,
+      // which is the same result you get if the key is not set
+      return JSON.stringify(this.undefinedObj);
+    } else if (value === null) {
+      return JSON.stringify(this.nullObj);
+    }
     return JSON.stringify(value);
   }
 
+  // value: string
   fromStored(value) {
+    if (value === null) {
+      return undefined;
+    } else if (value === JSON.stringify(this.undefinedObj)) {
+      return undefined;
+    } else if (value === JSON.stringify(this.nullObj)) {
+      return null;
+    }
     return JSON.parse(value);
   }
 

overlay.js

@@ -12,7 +12,7 @@ export class Overlay {
     infoBox.classList.add(OVERLAY_INFO_BOX_CLASSNAME);
   }
 
-  renderInfo() {
+  frame() {
     this.infoBox.innerHTML = '';
     const table = document.createElement('table');
     for (let [k, v] of Object.entries(this.sim.info)) {

pointer.js

@@ -13,8 +13,8 @@ export class Pointer {
   sim = undefined;
 
   pointerHistory = [];
-  panTouchStart = undefined; // {x: undefined, y: undefined, t: undefined};
-  panTouchLatest = undefined; // {x: undefined, y: undefined, t: undefined};
+  touchStart = undefined; // {x: undefined, y: undefined, t: undefined};
+  touchLatest = undefined; // {x: undefined, y: undefined, t: undefined};
   suppressClick = false;
 
   constructor(sim) {
@@ -61,7 +61,7 @@ export class Pointer {
   getPointerVelocity(points = POINTER_HISTORY_SIZE) {
     // Average over pointer history
     if (this.pointerHistory.length < 2) {
-      return this.latestPointerVelocity ?? {x: 0, y: 0, dt: 1};
+      return this.latestVelocity ?? {x: 0, y: 0, dt: 1};
     }
     points = Math.min(points, POINTER_HISTORY_SIZE, this.pointerHistory.length);
     const start = this.pointerHistory[this.pointerHistory.length - points];
@@ -79,7 +79,7 @@ export class Pointer {
   }
 
   updatePointer({x, y}) {
-    const t = document.timeline.currentTime;
+    const t = this.sim.rawTime;
     while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) {
       this.pointerHistory.shift();
     }
@@ -87,7 +87,7 @@ export class Pointer {
     this.pointerHistory.push({t, x, y, v});
   }
 
-  get latestPointerVelocity() {
+  get latestVelocity() {
     const latestPointer = this.pointerHistory[this.pointerHistory.length - 1];
     return latestPointer?.v;
   }
@@ -98,16 +98,21 @@ export class Pointer {
 
     if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
       const {x, y} = this.sim.screenToSim(clientX, clientY)
-      this.sim.objects.handlePointerDown({x, y});
+      this.sim.system.handlePointerDown({x, y});
 
     } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
-      this.panTouchStart = {
+      this.touchStart = {
         x: clientX,
         y: clientY,
-        t: document.timeline.currentTime,
+        t: this.sim.rawTime,
         viewOrigin: {...this.sim.display.viewOrigin},
       };
-      this.panTouchLatest = {...this.panTouchStart};
+      this.touchLatest = {
+        ...this.touchStart, 
+        dx: 0,
+        dy: 0,
+        dt: 0,
+      };
 
     } else if (this.sim.isCurrentMode(MODE_OBJECT_SELECT)) {
       // TODO: Start a selection box
@@ -117,26 +122,27 @@ export class Pointer {
   handlePointerUp({x: clientX, y: clientY}) {
     if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
       const {x, y} = this.sim.screenToSim(clientX, clientY);
-      this.sim.objects.handlePointerUp({x, y});
+      this.sim.system.handlePointerUp({x, y});
 
     } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
       // Set panning velocity
-      if (this.panTouchStart && this.panTouchLatest) {
-        const dt = (this.panTouchLatest.t - this.panTouchStart.t) / 1000;
-        if (!dt) {
+      if (this.touchStart && this.touchLatest) {
+        if (!this.touchLatest.dt) {
           this.sim.panning = undefined;
         } else {
-          const v = {...this.latestPointerVelocity};
+          const v = {...this.latestVelocity};
           // Convert pointer velocity to simulation scale
-          v.x /= this.sim.display.scale;
-          v.y /= this.sim.display.scale;
+          // Also multiply by -1 because the camera is panning opposite to
+          // the pointer velocity
+          v.x /= -this.sim.display.scale;
+          v.y /= -this.sim.display.scale;
 
           this.sim.panning = {
             velocity: v
           };
         }
 
-        this.panTouchStart = undefined;
+        this.touchStart = undefined;
       }
     }
   }
@@ -147,23 +153,30 @@ export class Pointer {
     this.updatePointer({x: clientX, y: clientY});
 
     if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
-      // Convert pointer velocity to simulation scale
-      const vx = this.latestPointerVelocity.x / this.sim.display.scale;
-      const vy = this.latestPointerVelocity.y / this.sim.display.scale;
       const {x, y} = this.sim.screenToSim(clientX, clientY);
-      this.sim.objects.handlePointerMove({x, y, vx, vy});
+      this.sim.system.handlePointerMove({x, y});
 
     } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
-      if (this.panTouchStart) {
+      if (this.touchStart) {
         // Event loop should be able to read
-        this.panTouchLatest = {
+        this.touchLatest = {
           x: clientX,
           y: clientY,
           t: this.sim.rawTime,
+          dx: clientX - this.touchStart.x,
+          dy: clientY - this.touchStart.y,
+          dt: this.sim.rawTime - this.touchStart.t,
         };
       }
     }
   }
 
-
+  frame() {
+    // Add another entry for the current pointer position
+    const { pointerHistory } = this.sim.pointer ?? {};
+    if (pointerHistory?.length) {
+      const currentPointer = pointerHistory[pointerHistory.length - 1];
+      this.sim.pointer.updatePointer(currentPointer);
+    }
+  }
 }

sim-options.js

@@ -4,10 +4,12 @@ export const simOptions = {
     selection: ['Pause While Selecting', 'boolean', true],
   }, 
   display: {
-    velocity: ['Velocity Vector', 'boolean', true],
-    acceleration: ['Accel Vector', 'boolean', true],
     traces: ['Path Trace', 'boolean', true],
     dashedTraces: ['Dashed', 'boolean', false, {tall: true}],
+    velocity: ['Velocity Vector', 'boolean', true],
+    acceleration: ['Accel Vector', 'boolean', true],
+    velocityScale: ['Velocity<br>Vec Scale', 'number', 20],
+    accelerationScale: ['Accel<br>Vec Scale', 'number', 20],
   },
   collision: {
     merge: ['Merge Masses<br>on Collision', 'boolean', true, {wide: true}],
@@ -20,8 +22,9 @@ export const simOptions = {
   },
   debug: {
     objectsInfo: ['Objects Info', 'boolean', false],
+    aliveObjects: ['Alive Only', 'boolean', false],
     cursorInfo: ['Cursor Info', 'boolean', false],
-    frameRate: ['Frame Rate', 'boolean', false, {wide: true}],
+    frameRate: ['Frame Rate', 'boolean', false],
     currentMode: ['Current Mode', 'boolean', false],
     panningInfo: ['Panning Info', 'boolean', false],
   },

sim-tools.js

@@ -12,9 +12,9 @@ export function initializeTools(sim) {
   sim.toolbars = {
     tools: new Toolbar(sim, 'Tools'),
     modes: new Toolbar(sim, 'Modes'),
-    utils: new Toolbar(sim, 'Utility', { expanded: false }),
+    utils: new Toolbar(sim, 'Utils', { expanded: false }),
     options: new Toolbar(sim, 'Options'),
-    params: new Toolbar(sim, 'Parameters'),
+    params: new Toolbar(sim, 'Params'),
     debug: new Toolbar(sim, 'Debug', { expanded: false }),
   };
   const { tools, modes, options, params, debug, utils } = sim.toolbars;

simulator.js

@@ -1,12 +1,11 @@
 import {
   EVENT_ZOOM,
   FRAMERATE_SAMPLE_DURATION,
-  SCALE_POWER_MAX,
-  SCALE_POWER_MIN,
 } from './config.js';
 import { Display } from './display.js';
-import { Objects } from './objects.js';
+import { System } from './system.js';
 import { Options } from './options.js';
+import { Zoom } from './zoom.js';
 import { simOptions } from './sim-options.js';
 import { initializeTools } from './sim-tools.js';
 
@@ -14,16 +13,19 @@ export class Sim {
   info = {};
   rawTime = undefined;
   time = undefined;
+  timeScale = undefined;
   nextZoom = undefined;
   playing = true;
   recentFrames = [];
   frameRate = 0;
+  panning = undefined;
 
-  objects = undefined;
+  system = undefined;
   display = undefined;
   overlay = undefined;
   pointer = undefined;
-  panning = undefined;
+  zoom = undefined;
+  
   toolbarGroups = {};
   toolbars = {};
 
@@ -31,23 +33,10 @@ export class Sim {
   getCurrentMode = () => undefined;
   setCurrentMode = () => undefined;
   getOption = () => undefined;
+  setOption = () => undefined;
   onModeEnter = () => undefined;
   onModeLeave = () => undefined;
 
-  markFrame(t) {
-    const { recentFrames: rfs } = this;
-    rfs.push(t);
-    if (rfs.length < 2) return;
-    const oldest = rfs[0];
-    const newest = rfs[rfs.length - 1];
-    const count = rfs.length;
-    const duration = (newest - oldest) / 1000; // ms to s
-    this.frameRate = count / duration;
-    if (duration >= FRAMERATE_SAMPLE_DURATION) {
-      rfs.shift();
-    }
-  }
-
   constructor(divId) {
     this.divId = divId;
     const div = document.getElementById(this.divId);
@@ -55,7 +44,8 @@ export class Sim {
 
     this.options = new Options(this, simOptions);
     this.display = new Display(this);
-    this.objects = new Objects(this);
+    this.system = new System(this);
+    this.zoom = new Zoom(this);
 
     initializeTools(this);
 
@@ -65,40 +55,23 @@ export class Sim {
     requestAnimationFrame(t => this.loop(t));
   }
 
-  // It's better not to change the scale in the middle of possible frame calculations,
-  // so use this to schedule it and let the event loop pick it up.
-  // velocity should be in Sim coordinate scale
-  scheduleZoom({x, y}, factor, velocity) {
-    this.nextZoom = {x, y, factor, velocity};
+  markFrame(t) {
+    const { recentFrames: rfs } = this;
+    rfs.push(t);
+    if (rfs.length < 2) return;
+    const oldest = rfs[0];
+    const newest = rfs[rfs.length - 1];
+    const count = rfs.length;
+    const duration = (newest - oldest);
+    this.frameRate = 1000 * count / duration; // Converting from ms to s
+    if (duration >= FRAMERATE_SAMPLE_DURATION) {
+      rfs.shift();
+    }
   }
 
-  // x, y should be in Sim coordinates
   // velocity should be in Sim coordinate scale
-  zoom({x, y, factor, velocity}) {
-    // x, y are the mouse coordinates, which should be the center of the new view frame
-    // the new view origin should be x, y minus half the new view width and height
-    // compute new scale
-    this.display.scalePower += factor;
-    // TODO: Lossy rescaling to expand zoom range
-    if (this.display.scalePower > SCALE_POWER_MAX) this.display.scalePower = SCALE_POWER_MAX;
-    if (this.display.scalePower < SCALE_POWER_MIN) this.display.scalePower = SCALE_POWER_MIN;
-    // compute coordinates of new view frame
-    this.display.viewOrigin.x = x - this.display.width / 2;
-    this.display.viewOrigin.y = y - this.display.height / 2;
-
-    this.pointer.clearPointerHistory();
-
-    if (this.playing && velocity) {
-      this.panning = {
-        velocity: {
-          x: -velocity.x,
-          y: -velocity.y,
-        }
-      };
-    }
-
-    const e = new CustomEvent(EVENT_ZOOM);
-    this.div.dispatchEvent(e);
+  scheduleZoom({x, y}, factor, velocity) {
+    this.zoom.scheduleZoom({x, y}, factor, velocity);
   }
 
   // Transform display coordinates to simulator coordinates using scale and viewOrigin
@@ -116,7 +89,8 @@ export class Sim {
 
   getScaleDisplay() {
     const scale = 2 ** Math.abs(this.display.scalePower);
-    return this.display.scalePower >= 0 ? `${scale}` : `1/${scale}`;
+    const scaleText = this.display.scalePower >= 0 ? `${scale}` : `1/${scale}`;
+    return `${scaleText} (${this.display.scalePower})`;
   }
 
   // cb: () => undefined
@@ -129,11 +103,9 @@ export class Sim {
   // Main loop
   loop(currentTime) {
     this.markFrame(currentTime);
-    const timeScale = this.getOption('param.timeScale');
+    this.timeScale = this.getOption('param.timeScale');
 
-    // elapsedTime in milliseconds
-    // rawTime in milliseconds
-    const elapsedTime = (currentTime - this.rawTime) / timeScale;
+    const elapsedTime = (currentTime - this.rawTime) * this.timeScale;
     this.rawTime = currentTime;
 
     if (this.playing) {
@@ -148,27 +120,14 @@ export class Sim {
       this.info['Frame Rate'] = this.frameRate?.toPrecision(3);
     }
 
-    if (this.nextZoom) {
-      this.zoom(this.nextZoom);
-      this.nextZoom = undefined;
-    }
-
-    if (this.getOption('debug.panningInfo')) {
-      const {x, y} = this.panning?.velocity ?? {};
-      this.info['Panning Velocity'] = [`${x?.toPrecision(6)}, `, y?.toPrecision(6)];
-      const { centerOfMass } = this.objects.computeSystemCenter();
-      this.info['Center of Mass'] = [`${centerOfMass.x.toPrecision(6)}, `, centerOfMass.y.toPrecision(6)];
-      this.info['Net Angular Momentum'] = this.objects.computeSystemAngularMomentum().toPrecision(6);
-    }
-
-    this.objects.computeFrame(elapsedTime);
-    this.overlay.renderInfo();
-    // this.display.computePanning(elapsedTime);
-    this.display.fillCanvas();
-    this.display.drawObjects();
+    this.zoom.frame();
+    this.display.frame(elapsedTime);
+    this.system.frame(elapsedTime);
+    this.overlay.frame();
     for (const group in this.toolbarGroups) {
       this.toolbarGroups[group].frame();
     }
+
     requestAnimationFrame(t => this.loop(t));
   }
 }

system.js

@@ -1,10 +1,10 @@
 import { MassObject } from './object.js';
-import { ZOOM_TO_FIT_PADDING } from './config.js';
 
-export class Objects {
+export class System {
   objects = [];
   creatingObject = undefined;
   selectedObject = undefined;
+  selectObjectStart = undefined;
   paused = false;
   panVelocityPaused = undefined;
 
@@ -35,8 +35,9 @@ export class Objects {
   // Create an object with mass that grows as pointer is held down
   createObject(x, y) {
     const idx = this.objects.length;
-    const obj = new MassObject(x, y, idx);
+    const obj = new MassObject(this.sim, x, y);
     this.creatingObject = idx;
+    this.selectedObjectStart = {x, y, pointer: {x, y}};
     this.objects.push(obj);
     // Pause the simulation during mass creation; this avoids some complex local dynamics
     if (this.sim.getOption('pauseDuring.creation')) {
@@ -59,8 +60,10 @@ export class Objects {
     return this.objects[i];
   }
 
-  selectObject(i) {
+  selectObject(i, pointer) {
     this.selectedObject = i;
+    const {x, y} = this.object(i).position;
+    this.selectedObjectStart = {x, y, pointer};
     if (this.sim.getOption('pauseDuring.selection')) {
       this.pause();
     }
@@ -68,6 +71,7 @@ export class Objects {
 
   deselect() {
     this.selectedObject = undefined;
+    this.selectedObjectStart = undefined;
     this.resume();
   }
 
@@ -83,30 +87,45 @@ export class Objects {
   }
 
   get boundingBox() {
-    const box = this.reduce((acc, obj) => {
-      if (acc.start.x === undefined) {
-        acc.start = {...obj.position};
-        acc.end = {...obj.position};
-      } else {
-        if (obj.position.x < acc.start.x) acc.start.x = obj.position.x;
-        if (obj.position.x > acc.end.x) acc.end.x = obj.position.x;
-        if (obj.position.y < acc.start.y) acc.start.y = obj.position.y;
-        if (obj.position.y > acc.end.y) acc.end.y = obj.position.y;
+    const box = this.reduce(({start, end}, obj) => {
+      const lx = obj.position.x - obj.radius; 
+      const gx = obj.position.x + obj.radius;
+      const ly = obj.position.y - obj.radius; 
+      const gy = obj.position.y + obj.radius; 
+      let ret;
+      if (start.x === undefined) {
+        ret = {
+          start: {x: lx, y: ly},
+          end: {x: gx, y: gy},
+        };
+        return ret;
       }
+      ret = {
+        start: {
+          x: Math.min(start.x, lx),
+          y: Math.min(start.y, ly),
+        },
+        end: {
+          x: Math.max(end.x, gx),
+          y: Math.max(end.y, gy),
+        }
+      };
+      return ret;
     }, {
       start: {x: undefined, y: undefined}, 
       end: {x: undefined, y: undefined},
     });
 
-    box.start.x = (box.start.x ?? 0) - ZOOM_TO_FIT_PADDING;
-    box.start.y = (box.start.y ?? 0) - ZOOM_TO_FIT_PADDING;
-    box.end.x = (box.end.x ?? 0) + ZOOM_TO_FIT_PADDING;
-    box.end.y = (box.end.y ?? 0) + ZOOM_TO_FIT_PADDING;
+    box.start.x = (box.start.x ?? 0);
+    box.start.y = (box.start.y ?? 0);
+    box.end.x = (box.end.x ?? 0);
+    box.end.y = (box.end.y ?? 0);
     return box;
   }
 
   objectAtLocation(x, y) {
     let idx = undefined;
+    this.selectedObjectStart = undefined;
     this.forEachObject((obj, i) => {
       // If distance to object is less than object's radius, we are touching the object
       const dist = Math.pow((obj.position.x - x)**2 + (obj.position.y - y)**2, 1/2);
@@ -123,7 +142,7 @@ export class Objects {
     const touchingObject = this.objectAtLocation(x, y);
    
     if (touchingObject !== undefined) {
-      this.selectObject(touchingObject);
+      this.selectObject(touchingObject, {x, y});
     } else {
       // Otherwise, create a new object
       this.createObject(x, y);
@@ -131,24 +150,31 @@ export class Objects {
   }
 
   handlePointerUp() {
+    const obj = this.getSelectedOrCreating();
+    if (obj === undefined) return;
     this.doneCreatingObject();
     this.deselect();
+    // Convert pointer velocity to simulation scale
+    // Including time scale - if time is slow, our motion is relatively faster
+    const pointer = {...this.sim.pointer.latestVelocity};
+    obj.velocity.x = pointer.x / this.sim.display.scale * this.sim.timeScale;
+    obj.velocity.y = pointer.y / this.sim.display.scale * this.sim.timeScale;
+    if (this.sim.panning?.velocity) {
+      obj.velocity.x += this.sim.panning.velocity.x;
+      obj.velocity.y += this.sim.panning.velocity.y;
+    }
   }
 
-  handlePointerMove({x, y, vx, vy}) {
+  handlePointerMove({x, y}) {
     // If the cursor moves while creating an object, or while an object is selected,
-    // update the position and velocity of the object
     // update the position using the pointer motion but the velocity using the pointer velocity
     const obj = this.getSelectedOrCreating();
     if (obj === undefined) return;
-    if (this.sim.panning?.velocity) {
-      vx += this.sim.panning.velocity.x;
-      vy += this.sim.panning.velocity.y;
-    }
-    obj.position.x = x;
-    obj.position.y = y;
-    obj.velocity.x = vx;
-    obj.velocity.y = vy;
+    const start = this.selectedObjectStart;
+    obj.position.x = start.x + (x - start.pointer.x);
+    obj.position.y = start.y + (y - start.pointer.y);
+    obj.velocity.x = 0;
+    obj.velocity.y = 0;
   }
 
   // cb: (obj, idx) => {}
@@ -163,6 +189,10 @@ export class Objects {
     }
   }
 
+  drawObjects() {
+    this.forEachObject(obj => obj.drawObject(this.sim), {alive: null});
+  }
+
   // cb: (acc, obj, idx) => {}
   reduce(cb, initial, opts) {
     let acc = initial;
@@ -201,9 +231,7 @@ export class Objects {
   }
 
   // elapsedTime is given in milliseconds
-  computeFrame(elapsedTime) {
-    // convert elapsed time to seconds
-    elapsedTime /= 1000;
+  frame(elapsedTime) {
     // If we're creating an object, increment its mass
     // with the mass creation rate accelerating over time
 
@@ -211,8 +239,7 @@ export class Objects {
 
     if (this.creatingObject !== undefined) {
       const obj = this.objects[this.creatingObject];
-      // Putting in a somewhat arbitrary scaling factor here
-      let massCreationRate = this.sim.getOption('param.massCreationRate') / 1000;
+      let massCreationRate = this.sim.getOption('param.massCreationRate');
       // Mass creation rate acceleration
       if (this.sim.getOption('param.massAcceleration')) {
         massCreationRate *= obj.age;
@@ -224,8 +251,6 @@ export class Objects {
     this.computeForces();
 
     if (this.sim.playing) {
-      // TODO: If creating/selected object, clamp its position to the cursor
-
       // Predict positions (Velocity verlet method)
       this.forEachObject(obj => {
         obj.currentAcceleration = {...obj.acceleration};
@@ -307,26 +332,39 @@ export class Objects {
     }
 
     // Display objects info
+    // First clear info from previous frame
+    this.forEachObject((_obj, i) => {
+        delete this.sim.info[`Object ${i}`];
+    }, { alive: null });
     if (this.sim.getOption('debug.objectsInfo')) {
+      const aliveOnly = this.sim.getOption('debug.aliveObjects');
       this.forEachObject((obj, i) => {
         const speed = Math.pow(obj.velocity.x ** 2 + obj.velocity.y ** 2, 1/2);
+        const accel = Math.pow(obj.acceleration.x ** 2 + obj.acceleration.y ** 2, 1/2);
         // Invert y so that the angle is counterclockwise from x-axis
         const direction = Math.atan2(-obj.velocity.y, obj.velocity.x) * 180 / Math.PI;
+        const accelDir = Math.atan2(-obj.acceleration.y, obj.acceleration.x) * 180 / Math.PI;
+        const {r, g, b} = obj.color;
         this.sim.info[`Object ${i}`] = [
-          `${obj.position.x.toPrecision(6)}, `, 
-          `${obj.position.y.toPrecision(6)}, `, 
-          `${obj.mass.toPrecision(6)} kg, `,
+          `<span style="background-color: rgb(${r},${g},${b});">&nbsp;&nbsp;</span>`,
+          `${obj.position.x.toPrecision(4)}, `, 
+          `${obj.position.y.toPrecision(4)}, `, 
+          `${obj.mass.toPrecision(4)} kg, `,
           `${speed.toPrecision(2)} m/s, ${direction.toPrecision(2)}°`, 
+          `${accel.toPrecision(2)} m/s<sup>2</sup>, ${accelDir.toPrecision(2)}°`, 
           `Alive: ${obj.alive}`, 
         ];
-      }, { alive: null });
+      }, { alive: aliveOnly || null });
     }
+
+    // Render the objects
+    this.drawObjects();
   }
 
   computeSystemCenter() {
     // Determine center of mass
     const { totalMass, count, totalMassLocation } = 
-      this.sim.objects.reduce((acc, obj) => ({
+      this.reduce((acc, obj) => ({
         count: acc.count + 1,
         totalMass: acc.totalMass + obj.mass,
         totalMassLocation: {
@@ -345,7 +383,7 @@ export class Objects {
     } : {x: 0, y: 0};
 
     // Determine average momentum
-    const netMomentum = this.sim.objects.reduce((acc, obj) => ({
+    const netMomentum = this.reduce((acc, obj) => ({
         x: acc.x + obj.mass * obj.velocity.x,
         y: acc.y + obj.mass * obj.velocity.y,
       }), { x: 0, y: 0 });

tool/options.js

@@ -43,18 +43,11 @@ export class OptionsTool extends Tool {
         const value = this.sim.getOption(path);
         button.style.opacity = value ? '100%' : '50%';
         this.sim.onOptionSet(path, value => {
-          console.log('option set cb', path, value);
           button.style.opacity = value ? '100%' : '50%';
-          console.log('button opacity', button.style.opacity);
-        });
-        button.addEventListener('click', () => {
-          const value = this.sim.options.getOption(path, true);
-          console.log('click, option value', value);
-          this.sim.setOption(path, !value);
         });
         button.addEventListener('click', () => {
           const value = this.sim.getOption(path);
-          this.setOption(path, !value);
+          this.sim.setOption(path, !value);
         });
         return button;
       }

tool/utility.js

@@ -7,10 +7,6 @@ import {
 export class UtilityTool extends Tool {
   currentTimeEl = undefined;
 
-  get displayScaleText() {
-    return `Scale: ${this.sim.getScaleDisplay()}`;
-  }
-
   get timeText() {
     let time = this.sim.time;
     // Time in milliseconds
@@ -45,50 +41,37 @@ export class UtilityTool extends Tool {
 
     const zeroVelocity = document.createElement('button');
     const clearTraces = document.createElement('button');
-    const zoomAll = document.createElement('button');
-    const currentScale = document.createElement('button')
     const currentTime = document.createElement('button');
     const clearDebug = document.createElement('button');
 
     this.currentTimeEl = currentTime;
 
     this.div.appendChild(currentTime);
-    this.div.appendChild(currentScale);
-    this.div.appendChild(zoomAll);
     this.div.appendChild(zeroVelocity);
     this.div.appendChild(clearTraces);
     this.div.appendChild(clearDebug);
 
     zeroVelocity.classList.add(WIDE_CLASSNAME);
     clearTraces.classList.add(WIDE_CLASSNAME);
-    zoomAll.classList.add(WIDE_CLASSNAME);
-    currentScale.classList.add(WIDE_CLASSNAME);
-    currentScale.classList.add(TOOL_INFO_CLASSNAME);
     currentTime.classList.add(TOOL_INFO_CLASSNAME);
     currentTime.classList.add(WIDE_CLASSNAME);
     clearDebug.classList.add(WIDE_CLASSNAME);
 
     zeroVelocity.innerHTML = 'Zero Momentum';
     clearTraces.innerHTML = 'Clear Traces';
-    zoomAll.innerHTML = 'Zoom to Fit';
-    currentScale.innerHTML = this.displayScaleText;
     currentTime.innerHTML = this.timeText;
     clearDebug.innerHTML = 'Clear Debug';
 
-    this.sim.onZoom(() => {
-      currentScale.innerHTML = this.displayScaleText;
-    });
-
     zeroVelocity.addEventListener('click', () => {
       // Determine center of mass and average momentum
-      const { totalMass, netMomentum } = this.sim.objects.computeSystemCenter();
+      const { totalMass, netMomentum } = this.sim.system.computeSystemCenter();
       const netVelocity = {
         x: netMomentum.x / totalMass,
         y: netMomentum.y / totalMass,
       };
 
       // Apply offset to all object velocities
-      this.sim.objects.forEachObject(obj => {
+      this.sim.system.forEachObject(obj => {
         obj.velocity.x -= netVelocity.x;
         obj.velocity.y -= netVelocity.y;
       });
@@ -99,41 +82,11 @@ export class UtilityTool extends Tool {
 
     clearTraces.addEventListener('click', () => {
       // Obliterate object histories
-      this.sim.objects.forEachObject(obj => {
+      this.sim.system.forEachObject(obj => {
         obj.history = [];
       }, {alive: null});
     });
 
-    zoomAll.addEventListener('click', () => {
-      // Determine bounding box
-      const box = this.sim.objects.boundingBox;
-      const x = (box.start.x + box.end.x) / 2;
-      const y = (box.start.y + box.end.y) / 2;
-      const widthRatio = Math.abs(box.start.x - box.end.x) / this.sim.display.width;
-      const heightRatio = Math.abs(box.start.y - box.end.y) / this.sim.display.height;
-      const biggerRatio = Math.max(widthRatio, heightRatio);
-      const base2factor = Math.log(1/biggerRatio) / Math.log(2) - 0.5;
-      const factor = Math.floor(base2factor);
-      // Determine average momentum and set panning velocity to match
-      const netMomentum = {x: 0, y: 0};
-      let totalMass = 0;
-      let count = 0;
-      this.sim.objects.forEachObject(obj => {
-        count++;
-        netMomentum.x += obj.mass * obj.velocity.x;
-        netMomentum.y += obj.mass * obj.velocity.y;
-        totalMass += obj.mass;
-      });
-      if (!count) {
-        return;
-      }
-      const netVelocity = {
-        x: netMomentum.x / totalMass,
-        y: netMomentum.y / totalMass,
-      };
-      this.sim.scheduleZoom({x, y}, factor, netVelocity)
-    });
-
     clearDebug.addEventListener('click', () => {
       this.sim.info = {};
     });

tool/zoom.js

@@ -2,20 +2,42 @@ import { Tool } from '../tool.js';
 import { 
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
+  WIDE_CLASSNAME,
+  TALL_CLASSNAME,
+  TOOL_INFO_CLASSNAME,
 } from '../config.js';
 
 export class Zoom extends Tool {
+  get displayScaleText() {
+    return `Scale: ${this.sim.getScaleDisplay()}`;
+  }
+
   constructor(container) {
     super(container);
 
+    const currentScale = document.createElement('button')
     const zoomOut = document.createElement('button');
     const zoomIn = document.createElement('button');
+    const zoomAll = document.createElement('button');
 
+    this.div.appendChild(currentScale);
     this.div.appendChild(zoomOut);
     this.div.appendChild(zoomIn);
+    this.div.appendChild(zoomAll);
 
+    currentScale.classList.add(WIDE_CLASSNAME);
+    currentScale.classList.add(TOOL_INFO_CLASSNAME);
+    zoomAll.classList.add(WIDE_CLASSNAME);
+    zoomAll.classList.add(TALL_CLASSNAME);
+
+    currentScale.innerHTML = this.displayScaleText;
     zoomOut.innerHTML = 'Zoom<br>Out';
     zoomIn.innerHTML = 'Zoom<br>In';
+    zoomAll.innerHTML = 'Zoom to Fit';
+
+    this.sim.onZoom(() => {
+      currentScale.innerHTML = this.displayScaleText;
+    });
 
     zoomOut.addEventListener('click', () => {
       // Aim at center of view
@@ -30,5 +52,25 @@ export class Zoom extends Tool {
       const y = this.sim.display.height * this.sim.display.scale / 2;
       this.sim.scheduleZoom(this.sim.screenToSim(x, y), ZOOM_IN_FACTOR);
     });
+
+    zoomAll.addEventListener('click', () => {
+      // Determine bounding box
+      const box = this.sim.system.boundingBox;
+      const x = (box.start.x + box.end.x) / 2;
+      const y = (box.start.y + box.end.y) / 2;
+      const widthRatio = Math.abs(box.start.x - box.end.x) / this.sim.display.width;
+      const heightRatio = Math.abs(box.start.y - box.end.y) / this.sim.display.height;
+      const biggerRatio = Math.max(widthRatio, heightRatio);
+      const base2factor = Math.log2(1 / biggerRatio) - 1;
+      const factor = Math.ceil(base2factor);
+
+      // Determine average momentum and set panning velocity to match
+      const { netMomentum, totalMass } = this.sim.system.computeSystemCenter();
+      const netVelocity = {
+        x: netMomentum.x / totalMass,
+        y: netMomentum.y / totalMass,
+      };
+      this.sim.scheduleZoom({x, y}, factor, netVelocity)
+    });
   }
 }

zoom.js

@@ -0,0 +1,58 @@
+import {
+  EVENT_ZOOM,
+  SCALE_POWER_MAX,
+  SCALE_POWER_MIN,
+} from './config.js';
+
+export class Zoom {
+  sim = undefined;
+  nextZoom = undefined;
+
+  constructor(sim) {
+    this.sim = sim;
+  }
+
+  // velocity should be in Sim coordinate scale
+  scheduleZoom({x, y}, factor, velocity) {
+    this.nextZoom = {x, y, factor, velocity};
+  }
+
+  frame() {
+    if (this.nextZoom) {
+      this.zoom(this.nextZoom);
+      this.nextZoom = undefined;
+    }
+  }
+
+  // x, y should be in Sim coordinates
+  // velocity should be in Sim coordinate scale
+  zoom({x, y, factor, velocity}) {
+    const { display } = this.sim;
+    // x, y are the mouse coordinates, which should be the center of the new view frame
+    // the new view origin should be x, y minus half the new view width and height
+    // compute new scale
+    // TODO: Lossy rescaling to expand zoom range
+    let scalePower = display.scalePower + factor;
+    scalePower = Math.max(scalePower, SCALE_POWER_MIN);
+    scalePower = Math.min(scalePower, SCALE_POWER_MAX);
+    this.sim.display.scalePower = scalePower;
+
+    // compute coordinates of new view frame
+    display.viewOrigin.x = x - display.width / 2;
+    display.viewOrigin.y = y - display.height / 2;
+
+    // Pointer history is stored in client coordinates, so we shouldn't need to clear it?
+    // this.pointer.clearPointerHistory();
+
+    // TODO: If paused, set panning velocity on resume
+    if (this.sim.playing && velocity) {
+      this.sim.panning = {
+        velocity: { ...velocity }
+      };
+    }
+
+    const e = new CustomEvent(EVENT_ZOOM);
+    this.sim.div.dispatchEvent(e);
+  }
+
+}