.ladd

@@ -1 +0,0 @@
-Hi :P

Layout.md

@@ -1,23 +0,0 @@
-Overlay > Info Box
-
-Each toolbar gives itself a header tool which expands/collapses the toolbar.
-
-- Toolbar Group: Left Side
-  - Toolbar: Tools
-    - Tool: Zoom
-  - Toolbar: Modes
-    - Tool: Mode Switch
-  - Toolbar: Utils
-    - Tool: Utility Tool
-- Toolbar Group: Right Side
-  - Toolbar: Options
-    - Tool: Options Tool
-      - Section: Pause During
-      - Section: Display
-      - Section: Collision
-  - Toolbar: Params
-    - Tool: Options Tool
-      - Section: Param
-  - Toolbar: Debug
-    - Tool: Options Tool
-      - Section: Debug

Readme.md

@@ -8,23 +8,21 @@ Uses `npm` for `eslint`.
 Screenshots
 -----------
 
-![A binary pair orbiting a larger partner](./gravity-simulator-4.png "Gravity Simulator Screenshot 4")
-
-![A greater mass attracts others which had been on escape trajectories](./gravity-simulator-5.png "Gravity Simulator Screenshot 5")
+![A small body orbiting a pair of larger ones](./gravity-simulator-2.png "Gravity Simulator Screenshot 2")
+![A body orbiting a pair, all three of similar size](./gravity-simulator-3.png "Gravity Simulator Screenshot 3")
 
 TODO
 ----
 
+- [ ] Parameter Slider (Invisible, mouse/touch drag)
 - [ ] Selection Box
 - [ ] Object List
 - [ ] Object Detail
 - [ ] Left Button Panning
 - [ ] Middle Button Pause
-- [ ] Parameter Slider (Invisible, mouse/touch drag)
 - [ ] Grid
 - [ ] Zoom Easing
 - [ ] 2-touch Pan & Zoom
-  - Either continuous zoom, or discrete with animation of bounding box proposed changes
 - [ ] Multi-touch Mass Create
 - [ ] Camera Rotation
   - [ ] 2-touch Rotation
@@ -33,9 +31,10 @@ TODO
   - [ ] Undo "Clear Traces" Action
   - [ ] Undo "Reset
 - [ ] Time Control: Reverse Time
+- [x] Save to LocalStorage
 - [ ] Lossy Rescaling To Widen Zoom (Handling overflow/underflow)
 - [ ] Track farthest reaches, min/max in each dimension (x, y)
+- [x] Compute Net Angular Momentum
+- [ ] Display Net Angular Momentum
 - [ ] Calculate Work as FxD as measure of energy flux
   - [ ] Option to automatically slow time when energy flux is greater
-- [ ] Handle pointerleave or other mechanism when window loses focus
-- [ ] Verify stationary pointer leads to zero pointer velocity

config.js

@@ -1,9 +1,11 @@
 // 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;
@@ -16,7 +18,6 @@ export const PATH_TRACES_DASHED_OPACITY = 1.0;
 
 // SIZES
 export const POINTER_HISTORY_SIZE = 20;
-export const OBJECT_HISTORY_SIZE = 1e5;
 export const FRAMERATE_SAMPLE_DURATION = 2.0; // Seconds
 export const POINTER_DOWN_HISTORY_SIZE = 5;
 export const ARROWHEAD_LENGTH = 7;
@@ -24,6 +25,7 @@ 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;
@@ -37,8 +39,6 @@ export const TOOLBAR_HEADER_CLASSNAME = 'lhg-toolbar-header';
 export const WIDE_CLASSNAME = 'lhg-wide';
 export const TALL_CLASSNAME = 'lhg-tall';
 export const OVERLAY_INFO_BOX_CLASSNAME = 'lhg-overlay-info-box';
-export const OPTION_GROUP_CLASSNAME = 'lhg-option-group';
-export const TOOLBAR_GROUP_CLASSNAME = 'lhg-toolbar-group';
 
 // EVENT NAMES
 export const EVENT_MODE_LEAVE = 'lhg-mode-leave';
@@ -51,8 +51,5 @@ export const MODE_MASS_GENERATION = 'mass-gen';
 export const MODE_PAN_VIEW = 'pan-view';
 export const MODE_OBJECT_SELECT = 'select';
 
-// LOCAL STORAGE NAMESPACES
+// LOCAL STORAGE PREFIXES/SUFFIXES
 export const TOOLBAR_EXPANDED_SUFFIX = 'lhg-toolbar-expanded';
-export const OBJECT_MAGIC_PROP_PREFIX = '_lhg_';
-
-

display.js

@@ -67,6 +67,10 @@ 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;
@@ -135,47 +139,28 @@ export class Display {
     ctx.resetTransform();
   }
 
-  frame(elapsedTime) {
+  computePanning(elapsedTime) {
+    // Add another entry for the current pointer position
     const { 
-      touchStart: start, 
-      touchLatest: latest,
+      pointerHistory, 
+      panTouchStart: start, 
+      panTouchLatest: 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;
-    } 
-
-    let pdx = 0;
-    let pdy = 0;
-
-    if (this.sim.panning && !this.sim.panning.paused) {
+    } else if (this.sim.panning && !this.sim.panning.paused) {
       // Apply update to viewOrigin based on panning
-      // TODO: elapsedTime is scaled by time scale, is that what we want?
-      pdx = this.sim.panning.velocity.x * elapsedTime;
-      pdy = this.sim.panning.velocity.y * elapsedTime;
+      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;
+    }
   }
 
-    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

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

object.js

@@ -1,6 +1,7 @@
 import {
   ACCELERATION_VECTOR_ARROWHEAD,
   ACCELERATION_VECTOR_COLOR,
+  ACCELERATION_VECTOR_SCALE,
   ACCELERATION_VECTOR_WIDTH,
   OFFSCREEN_OBJECT_ARROWHEAD_LENGTH,
   OFFSCREEN_OBJECT_LINE_SCALE,
@@ -11,12 +12,11 @@ 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,24 +28,17 @@ export class MassObject {
   history = [];
   alive = true;
 
-  constructor(sim, x, y) {
-    this.sim = sim;
-    this.id = crypto.randomUUID();
+  constructor(x, y) {
     this.position.x = x;
     this.position.y = y;
     this.color.r = Math.random() * 256;
     this.color.g = Math.random() * 256;
     this.color.b = Math.random() * 256;
-    this.timeCreated = this.sim.time;
-    this.rawTimeCreated = this.sim.rawTime;
+    this.created = document.timeline.currentTime;
   }
 
   get age() {
-    return this.sim.time - this.timeCreated;
-  }
-
-  get rawAge() {
-    return this.sim.rawTime - this.rawTimeCreated;
+    return document.timeline.currentTime - this.created;
   }
 
   get radius() {
@@ -93,7 +86,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.sim.display.scale;
+      ctx.lineWidth = PATH_TRACES_WIDTH / this.scale;
       ctx.beginPath();
       let dash = false;
       for (let i = 0; i < this.history.length; i++) {
@@ -149,8 +142,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);
-      const arrowLength = Math.log(distance + 1) * OFFSCREEN_OBJECT_LINE_SCALE / this.sim.display.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 startAx = px - arrowLength * Math.cos(arrowDirection);
       const startAy = py - arrowLength * Math.sin(arrowDirection);
       sim.display.drawArrow(startAx, startAy, px, py, {
@@ -172,29 +165,9 @@ export class MassObject {
 
     // Draw arrow for the velocity
     if (sim.getOption('display.velocity')) {
-      // If this object is being dragged by the user,
-      // show the pointer velocity instead of object velocity
-      const vecScale = this.sim.getOption('display.velocityScale');
-      const selected = this.sim.system.getSelectedOrCreating();
-      const isSelected = selected?.id === this.id;
-      let velocity = {x: vx, y: vy};
-      if (isSelected) {
-        const pointerV = this.sim.pointer.latestVelocity;
-        // const panning = this.sim.panning?.velocity ?? {x: 0, y: 0};
-        // velocity.x = vx + (pointerV.x + panning.x) * scale;
-        // velocity.y = vy + (pointerV.y + panning.y) * scale;
-        if (this.sim.getOption('compensate.timeScale')) {
-          velocity.x = vx + pointerV.x / this.sim.timeScale;
-          velocity.y = vy + pointerV.y / this.sim.timeScale;
-        }
-      }
-      const speed = Math.sqrt(velocity.x ** 2, velocity.y ** 2) / this.sim.display.scale;
-      const arrowDirection = Math.atan2(velocity.y, velocity.x);
-      // Prevent negative numbers by adding 1
-      // TODO: Make logarithmic vector length scale optional
-      const arrowLength = Math.log10(speed + 1) * vecScale + radius;
-      const endVx = x + arrowLength * Math.cos(arrowDirection);
-      const endVy = y + arrowLength * Math.sin(arrowDirection);
+      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);
       const style = VELOCITY_VECTOR_COLOR === 'object color' ?
         `rgb(${r}, ${g}, ${b})` : VELOCITY_VECTOR_COLOR;
       sim.display.drawArrow(x, y, endVx, endVy, {
@@ -208,15 +181,11 @@ export class MassObject {
 
     // Draw arrow for acceleration
     if (sim.getOption('display.acceleration')) {
-      const vecScale = this.sim.getOption('display.accelerationScale');
-      const accelerationMagnitude = Math.sqrt(acceleration.x ** 2 + acceleration.y ** 2) /
-        this.sim.display.scale;
-      const arrowDirection = Math.atan2(acceleration.y, acceleration.x);
-      // Prevent negative numbers by adding 1
-      const arrowLength = Math.log10(accelerationMagnitude + 1) * vecScale + radius;
-      //const arrowLength = accelerationMagnitude * vecScale;
-      const endAx = x + arrowLength * Math.cos(arrowDirection);
-      const endAy = y + arrowLength * Math.sin(arrowDirection);
+      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 style = ACCELERATION_VECTOR_COLOR === 'object color' ?
         `rgb(${r}, ${g}, ${b})` : ACCELERATION_VECTOR_COLOR;
       sim.display.drawArrow(x, y, endAx, endAy, {

objects.js

@@ -1,11 +1,10 @@
-import {OBJECT_HISTORY_SIZE} from './config.js';
 import { MassObject } from './object.js';
+import { ZOOM_TO_FIT_PADDING } from './config.js';
 
-export class System {
+export class Objects {
   objects = [];
   creatingObject = undefined;
   selectedObject = undefined;
-  selectObjectStart = undefined;
   paused = false;
   panVelocityPaused = undefined;
 
@@ -36,9 +35,8 @@ export class System {
   // Create an object with mass that grows as pointer is held down
   createObject(x, y) {
     const idx = this.objects.length;
-    const obj = new MassObject(this.sim, x, y);
+    const obj = new MassObject(x, y, idx);
     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')) {
@@ -61,10 +59,8 @@ export class System {
     return this.objects[i];
   }
 
-  selectObject(i, pointer) {
+  selectObject(i) {
     this.selectedObject = i;
-    const {x, y} = this.object(i).position;
-    this.selectedObjectStart = {x, y, pointer};
     if (this.sim.getOption('pauseDuring.selection')) {
       this.pause();
     }
@@ -72,7 +68,6 @@ export class System {
 
   deselect() {
     this.selectedObject = undefined;
-    this.selectedObjectStart = undefined;
     this.resume();
   }
 
@@ -88,45 +83,30 @@ export class System {
   }
 
   get boundingBox() {
-    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;
+    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;
       }
-      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);
-    box.start.y = (box.start.y ?? 0);
-    box.end.x = (box.end.x ?? 0);
-    box.end.y = (box.end.y ?? 0);
+    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;
     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);
@@ -143,7 +123,7 @@ export class System {
     const touchingObject = this.objectAtLocation(x, y);
    
     if (touchingObject !== undefined) {
-      this.selectObject(touchingObject, {x, y});
+      this.selectObject(touchingObject);
     } else {
       // Otherwise, create a new object
       this.createObject(x, y);
@@ -151,37 +131,24 @@ export class System {
   }
 
   handlePointerUp() {
-    const obj = this.getSelectedOrCreating();
-    if (obj === undefined) return;
     this.doneCreatingObject();
     this.deselect();
-    // Convert pointer velocity to simulation scale
-    const pointer = {...this.sim.pointer.latestVelocity};
-    obj.velocity.x = pointer.x / this.sim.display.scale;
-    obj.velocity.y = pointer.y / this.sim.display.scale;
-
-    // Including time scale - if time is slow, our motion is relatively faster
-    if (this.sim.getOption('compensate.timeScale')) {
-      obj.velocity.x /= this.sim.timeScale;
-      obj.velocity.y /= 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}) {
+  handlePointerMove({x, y, vx, vy}) {
     // 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;
-    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;
+    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;
   }
 
   // cb: (obj, idx) => {}
@@ -196,10 +163,6 @@ export class System {
     }
   }
 
-  drawObjects() {
-    this.forEachObject(obj => obj.drawObject(this.sim), {alive: null});
-  }
-
   // cb: (acc, obj, idx) => {}
   reduce(cb, initial, opts) {
     let acc = initial;
@@ -238,27 +201,29 @@ export class System {
   }
 
   // elapsedTime is given in milliseconds
-  frame(elapsedTime) {
+  computeFrame(elapsedTime) {
+    // convert elapsed time to seconds
+    elapsedTime /= 1000;
     // If we're creating an object, increment its mass
     // with the mass creation rate accelerating over time
 
     // Scaling this parameter because of millisecond conversion
+    const massCreationRate = this.sim.getOption('param.massCreationRate') / 1000;
 
     if (this.creatingObject !== undefined) {
       const obj = this.objects[this.creatingObject];
-      let massCreationRate = this.sim.getOption('param.massCreationRate');
-      massCreationRate /= this.sim.display.scale;
-      // Keep consistent time scale
-      if (this.sim.getOption('compensate.timeScale')) {
-        massCreationRate /= this.sim.timeScale;
-      }
-      obj.mass += massCreationRate * elapsedTime;
+      const rate = massCreationRate * obj.age;
+      console.log('obj.age', obj.age, 'mass creation rate', rate, 'elapsedTime', elapsedTime);
+      // TODO: After objects merge during creation, mass creation rate can accelerate
+      obj.mass += rate * elapsedTime;
     }
 
     // Calculate forces due to gravity. 
     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};
@@ -333,51 +298,33 @@ export class System {
         obj.velocity.y += obj.acceleration.y * elapsedTime;
 
         // Append to object history
-        obj.history.push({position: {...obj.position}});
-
+        // TODO: enforce object history length
         // TODO: store object color changes in history
-
-        // Enforce object history length
-        while (obj.history.length > OBJECT_HISTORY_SIZE) {
-          obj.history.shift();
-        }
+        obj.history.push({position: {...obj.position}});
       });
     }
 
     // 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}`] = [
-          `<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, `,
+          `${obj.position.x.toPrecision(6)}, `, 
+          `${obj.position.y.toPrecision(6)}, `, 
+          `${obj.mass.toPrecision(6)} kg, `,
           `${speed.toPrecision(2)} m/s, ${direction.toPrecision(2)}°`, 
-          `${accel.toPrecision(2)} m/s<sup>2</sup>, ${accelDir.toPrecision(2)}°`,
           `Alive: ${obj.alive}`, 
         ];
-      }, {alive: aliveOnly || null});
+      }, { alive: null });
     }
-
-    // Render the objects
-    this.drawObjects();
   }
 
   computeSystemCenter() {
     // Determine center of mass
     const { totalMass, count, totalMassLocation } = 
-      this.reduce((acc, obj) => ({
+      this.sim.objects.reduce((acc, obj) => ({
         count: acc.count + 1,
         totalMass: acc.totalMass + obj.mass,
         totalMassLocation: {
@@ -396,7 +343,7 @@ export class System {
     } : {x: 0, y: 0};
 
     // Determine average momentum
-    const netMomentum = this.reduce((acc, obj) => ({
+    const netMomentum = this.sim.objects.reduce((acc, obj) => ({
         x: acc.x + obj.mass * obj.velocity.x,
         y: acc.y + obj.mass * obj.velocity.y,
       }), { x: 0, y: 0 });

options.js

@@ -1,14 +1,11 @@
 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`;
@@ -27,62 +24,29 @@ export class Options {
     for (const groupName of Object.keys(options)) {
       for (const [name, [, , defaultValue]] of Object.entries(this.options[groupName])) {
         const path = [groupName, name].join('.');
-        let value = this.getFromLocalStorage(path);
+        let value = this.getOption(path)
         if (value === undefined) {
           value = defaultValue;
-        }
-        this.values[path] = value;
+          this.setOption(path, value);
         }
       }
     }
-
-  toStored(value) {
-    if (value === undefined) {
-      // 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);
-  }
-
-  getFromLocalStorage(path) {
-    const storageKey = this.getStorageKey(path);
-    const value = this.fromStored(window.localStorage.getItem(storageKey));
-    this.values[path] = value;
-    return value;
   }
 
   getOption(path) {
-    const [group, name] = path.split('.');
-    const {type} = this.options[group][name];
-    const value = this.values[path];
-    switch (type) {
-      case 'number': return Number(value);
-      case 'boolean': return value === true || value === 'true';
-      default: return value;
+    let value = this.values[path];
+    if (value === undefined) {
+      value = localStorage.getItem(this.getStorageKey(path));
+      if (value === 'false') value = false;
+      else if (value === 'true') value = true;
+      this.values[path] = value;
     }
+    return value;
   }
 
   setOption(path, value) {
     this.values[path] = value;
-    const storageKey = this.getStorageKey(path);
-    window.localStorage.setItem(storageKey, this.toStored(value));
+    window.localStorage.setItem(this.getStorageKey(path), value);
     const e = new CustomEvent(EVENT_OPTION_SET, {detail: {path, value}});
     this.sim.div.dispatchEvent(e);
   }

overlay.js

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

pointer.js

@@ -3,6 +3,7 @@ import {
   MODE_OBJECT_SELECT,
   MODE_PAN_VIEW,
   POINTER_HISTORY_SIZE,
+  POINTER_DOWN_HISTORY_SIZE,
   TOOLBAR_CLASSNAME,
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
@@ -12,8 +13,8 @@ export class Pointer {
   sim = undefined;
 
   pointerHistory = [];
-  touchStart = undefined; // {x: undefined, y: undefined, t: undefined};
-  touchLatest = undefined; // {x: undefined, y: undefined, t: undefined};
+  panTouchStart = undefined; // {x: undefined, y: undefined, t: undefined};
+  panTouchLatest = undefined; // {x: undefined, y: undefined, t: undefined};
   suppressClick = false;
 
   constructor(sim) {
@@ -60,7 +61,7 @@ export class Pointer {
   getPointerVelocity(points = POINTER_HISTORY_SIZE) {
     // Average over pointer history
     if (this.pointerHistory.length < 2) {
-      return this.latestVelocity;
+      return this.latestPointerVelocity ?? {x: 0, y: 0, dt: 1};
     }
     points = Math.min(points, POINTER_HISTORY_SIZE, this.pointerHistory.length);
     const start = this.pointerHistory[this.pointerHistory.length - points];
@@ -73,13 +74,12 @@ export class Pointer {
     };
   }
 
-  // Keep the specified number of entries at the end of the array (most recent)
   clearPointerHistory(keep = 0) {
-    this.pointerHistory.splice(keep, this.pointerHistory.length - keep)
+    this.pointerHistory.splice(0, this.pointerHistory.length - keep)
   }
 
   updatePointer({x, y}) {
-    const t = this.sim.rawTime;
+    const t = document.timeline.currentTime;
     while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) {
       this.pointerHistory.shift();
     }
@@ -87,128 +87,83 @@ export class Pointer {
     this.pointerHistory.push({t, x, y, v});
   }
 
-  get latestVelocity() {
+  get latestPointerVelocity() {
     const latestPointer = this.pointerHistory[this.pointerHistory.length - 1];
-    return {
-      x: 0,
-      y: 0,
-      ...latestPointer?.v
-    }
+    return latestPointer?.v;
   }
 
   handlePointerDown({x: clientX, y: clientY}) {
-    // this.clearPointerHistory(POINTER_DOWN_HISTORY_SIZE);
+    this.clearPointerHistory(POINTER_DOWN_HISTORY_SIZE);
     this.updatePointer({x: clientX, y: clientY});
 
-    switch (this.sim.getCurrentMode()) {
-      case MODE_MASS_GENERATION: {
+    if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
       const {x, y} = this.sim.screenToSim(clientX, clientY)
-        this.sim.system.handlePointerDown({x, y});
-        break;
-      }
-      case MODE_PAN_VIEW: {
-        this.touchStart = {
+      this.sim.objects.handlePointerDown({x, y});
+
+    } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
+      this.panTouchStart = {
         x: clientX,
         y: clientY,
-          t: this.sim.rawTime,
+        t: document.timeline.currentTime,
         viewOrigin: {...this.sim.display.viewOrigin},
       };
-        // Since we've processed this increment, reset 
-        this.touchLatest = {
-          ...this.touchStart,
-          dx: 0,
-          dy: 0,
-          dt: 0,
-        };
-        break;
-      }
-      case MODE_OBJECT_SELECT: {
+      this.panTouchLatest = {...this.panTouchStart};
+
+    } else if (this.sim.isCurrentMode(MODE_OBJECT_SELECT)) {
       // TODO: Start a selection box
-        break;
+    }
+  }
+
+  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});
+
+    } 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) {
+          this.sim.panning = undefined;
+        } else {
+          const v = {...this.latestPointerVelocity};
+          // Convert pointer velocity to simulation scale
+          v.x /= this.sim.display.scale;
+          v.y /= this.sim.display.scale;
+
+          this.sim.panning = {
+            velocity: v
+          };
+        }
+
+        this.panTouchStart = undefined;
       }
     }
   }
 
   // Handle cursor (mouse or touch) movement
-  handlePointerMove({x: clientX, y: clientY}) {
   // TODO: If e.touches.length > 1, user may be engaging pinch to zoom
+  handlePointerMove({x: clientX, y: clientY}) {
     this.updatePointer({x: clientX, y: clientY});
 
-    switch (this.sim.getCurrentMode()) {
-      case MODE_MASS_GENERATION: {
+    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.system.handlePointerMove({x, y});
-        break;
-      }
-      case MODE_PAN_VIEW: {
-        if (this.touchStart) {
+      this.sim.objects.handlePointerMove({x, y, vx, vy});
+
+    } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
+      if (this.panTouchStart) {
         // Event loop should be able to read
-          this.touchLatest = {
+        this.panTouchLatest = {
           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,
         };
       }
-        break;
-      }
-      case MODE_OBJECT_SELECT: {
-        break;
-      }
     }
   }
 
-  handlePointerUp({x: clientX, y: clientY}) {
-    switch (this.sim.getCurrentMode()) {
-      case MODE_MASS_GENERATION: {
-        const {x, y} = this.sim.screenToSim(clientX, clientY);
-        this.sim.system.handlePointerUp({x, y});
-        break;
-      }
-      case MODE_PAN_VIEW: {
-        // Set panning velocity
-        if (this.touchStart && this.touchLatest) {
-          if (!this.touchLatest.dt) {
-            this.sim.panning = undefined;
-          } else {
-            const panning = {...this.latestVelocity};
-            // Convert pointer velocity to simulation scale.
-            // Also multiply by -1 because the camera is
-            // panning opposite to the pointer velocity.
-            panning.x /= -this.sim.display.scale;
-            panning.y /= -this.sim.display.scale;
 
-            if (this.sim.getOption('compensate.timeScale')) {
-              panning.x /= this.sim.timeScale;
-              panning.y /= this.sim.timeScale;
-            }
-
-            // Also add current panning
-            panning.x += this.sim.panning?.velocity.x ?? 0;
-            panning.y += this.sim.panning?.velocity.y ?? 0;
-
-            this.sim.panning = {
-              velocity: panning
-            };
-          }
-          this.touchStart = undefined;
-        }
-        break;
-      }
-      case MODE_OBJECT_SELECT: {
-        break;
-      }
-    }
-  }
-
-  frame() {
-    // Add another entry for the current pointer position
-    const { pointerHistory } = this;
-    if (pointerHistory.length) {
-      const currentPointer = pointerHistory[pointerHistory.length - 1];
-      this.updatePointer(currentPointer);
-    }
-  }
 }

sim-options.js

@@ -1,35 +0,0 @@
-export const simOptions = {
-  pauseDuring: {
-    creation: ['Pause While Creating', 'boolean', true],
-    selection: ['Pause While Selecting', 'boolean', true],
-  }, 
-  display: {
-    traces: ['Path Traces', 'boolean', true],
-    dashedTraces: ['Dashed', 'boolean', false, {tall: true}],
-    velocity: ['Velocity Vectors', 'boolean', true],
-    acceleration: ['Accel Vectors', 'boolean', true],
-    velocityScale: ['Velocity<br>Vec Scale', 'number', 80, {hideUnless: 'display.velocity'}],
-    accelerationScale: ['Accel<br>Vec Scale', 'number', 800, {hideUnless: 'display.acceleration'}],
-    targetFrameRate: ['Frame Rate', 'number', 60],
-  },
-  collision: {
-    merge: ['Merge Masses on Collision', 'boolean', true, {wide: true}],
-  },
-  compensate: {
-    timeScale: ['Time Scale Compensator', 'boolean', false, {wide: true}],
-  },
-  param: {
-    gravity: ['Gravity', 'number', 1],
-    timeScale: ['Time Scale', 'number', 0.1],
-    massCreationRate: ['Mass Creation Rate', 'number', 1],
-  },
-  debug: {
-    objectsInfo: ['Objects Info', 'boolean', false],
-    aliveObjects: ['Alive Only', 'boolean', false],
-    cursorInfo: ['Cursor Info', 'boolean', false],
-    frameRate: ['Frame Rate', 'boolean', false],
-    currentMode: ['Current Mode', 'boolean', false],
-    panningInfo: ['Panning Info', 'boolean', false],
-  },
-};
-

sim-tools.js

@@ -1,54 +0,0 @@
-import {Overlay} from './overlay.js';
-import {Pointer} from './pointer.js';
-import {ModeSwitch} from './tool/modes.js';
-import {OptionsTool} from './tool/options.js';
-import {PlayPause} from './tool/play-pause.js';
-import {UtilityTool} from './tool/utility.js';
-import {Zoom} from './tool/zoom.js';
-import {ToolbarGroup} from './toolbar-group.js';
-import {Toolbar} from './toolbar.js';
-
-export function initializeTools(sim) {
-  sim.toolbars = {
-    tools: new Toolbar(sim, 'Tools')
-      .addTool(new Zoom())
-      .addTool(new PlayPause()),
-    modes: new Toolbar(sim, 'Modes')
-      .addTool(new ModeSwitch()),
-    utils: new Toolbar(sim, 'Utils', {expanded: false})
-      .addTool(new UtilityTool()),
-    options: new Toolbar(sim, 'Options')
-      .addTool(new OptionsTool([
-        'pauseDuring',
-        'display',
-        'collision',
-        'compensate',
-      ])),
-    params: new Toolbar(sim, 'Params')
-      .addTool(new OptionsTool([
-        'param'
-      ])),
-    debug: new Toolbar(sim, 'Debug', {expanded: false})
-      .addTool(new OptionsTool([
-        'debug'
-      ])),
-  };
-  const {tools, modes, options, params, debug, utils} = sim.toolbars;
-  sim.toolbarGroups = {
-    left: new ToolbarGroup(sim)
-      .addToolbar(tools)
-      .addToolbar(modes)
-      .addToolbar(utils),
-    right: new ToolbarGroup(sim).topRight()
-      .addToolbar(options)
-      .addToolbar(params)
-      .addToolbar(debug),
-  };
-  sim.overlay = new Overlay(sim);
-  sim.pointer = new Pointer(sim);
-
-  for (const id in sim.toolbars) {
-    const toolbar = sim.toolbars[id];
-    toolbar.applyExpanded();
-  }
-}

simulator.js

@@ -1,31 +1,64 @@
 import {
   EVENT_ZOOM,
   FRAMERATE_SAMPLE_DURATION,
+  SCALE_POWER_MAX,
+  SCALE_POWER_MIN,
 } from './config.js';
 import { Display } from './display.js';
-import { System } from './system.js';
+import { Objects } from './objects.js';
+import { Overlay } from './overlay.js';
+import { Pointer } from './pointer.js';
 import { Options } from './options.js';
-import { Zoom } from './zoom.js';
-import { simOptions } from './sim-options.js';
-import { initializeTools } from './sim-tools.js';
+import { ModeSwitch } from './tool/modes.js';
+import { OptionsTool } from './tool/options.js';
+import { PlayPause } from './tool/play-pause.js';
+import { Zoom } from './tool/zoom.js';
+import { UtilityTool } from './tool/utility.js';
+import { Toolbar } from './toolbar.js';
+import { ToolbarGroup } from './toolbar-group.js';
+
+const simOptions = {
+  pauseDuring: {
+    creation: ['Pause While Creating', 'boolean', true],
+    selection: ['Pause While Selecting', 'boolean', true],
+  }, 
+  display: {
+    velocity: ['Velocity Vectors', 'boolean', true],
+    acceleration: ['Accel. Vectors', 'boolean', true],
+    traces: ['Path Traces', 'boolean', true],
+    dashedTraces: ['Dashed Traces', 'boolean', false],
+  },
+  collision: {
+    merge: ['Merge Masses<br>on Collision', 'boolean', true, {wide: true}],
+  },
+  param: {
+    gravity: ['Gravity', 'number', 4E4],
+    timeScale: ['Time Scale', 'number', 0.2],
+    massCreationRate: ['Mass Creation Rate', 'number', 10],
+  },
+  debug: {
+    objectsInfo: ['Objects Info', 'boolean', false],
+    cursorInfo: ['Cursor Info', 'boolean', false],
+    frameRate: ['Frame Rate', 'boolean', false, {wide: true}],
+    currentMode: ['Current Mode', 'boolean', false],
+    panningInfo: ['Panning Info', 'boolean', false],
+  },
+};
 
 export class Sim {
   info = {};
   rawTime = undefined;
   time = undefined;
-  timeScale = undefined;
   nextZoom = undefined;
   playing = true;
   recentFrames = [];
-  panning = undefined;
   frameRate = 0;
 
-  system = undefined;
+  objects = undefined;
   display = undefined;
   overlay = undefined;
   pointer = undefined;
-  zoom = undefined;
-  
+  panning = undefined;
   toolbarGroups = {};
   toolbars = {};
 
@@ -33,10 +66,23 @@ 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);
@@ -44,75 +90,95 @@ export class Sim {
 
     this.options = new Options(this, simOptions);
     this.display = new Display(this);
-    this.system = new System(this);
-    this.zoom = new Zoom(this);
+    this.objects = new Objects(this);
+    this.toolbars = {
+      tools: new Toolbar(this, 'Tools'),
+      modes: new Toolbar(this, 'Modes'),
+      utils: new Toolbar(this, 'Utility', { expanded: false }),
+      options: new Toolbar(this, 'Options'),
+      params: new Toolbar(this, 'Parameters'),
+      debug: new Toolbar(this, 'Debug', { expanded: false }),
+    };
+    const { tools, modes, options, params, debug, utils } = this.toolbars;
+    this.toolbarGroups = {
+      left: new ToolbarGroup(this)
+        .addToolbar(tools)
+        .addToolbar(modes)
+        .addToolbar(utils),
+      right: new ToolbarGroup(this).topRight()
+        .addToolbar(options)
+        .addToolbar(params)
+        .addToolbar(debug),
+    };
+    this.overlay = new Overlay(this);
+    this.pointer = new Pointer(this);
 
-    initializeTools(this);
+    // Configure toolbars
+
+    // Primary
+    tools.addTool(new Zoom(tools));
+    tools.addTool(new PlayPause(tools));
+
+    // Secondary
+    modes.addTool(new ModeSwitch(modes));
+
+    // Utility
+    utils.addTool(new UtilityTool(utils));
+
+    // Options
+    options.addTool(new OptionsTool(options, ['pauseDuring', 'display', 'collision']));
+
+    // Parameters
+    params.addTool(new OptionsTool(params, ['param']));
+
+    // Debug
+    debug.addTool(new OptionsTool(debug, ['debug']));
+
+    for (const id in this.toolbars) {
+      const toolbar = this.toolbars[id];
+      toolbar.applyExpanded();
+    }
 
     // Initiate main loop
     this.rawTime = document.timeline.currentTime;
     this.time = 0;
-    requestAnimationFrame(t => this.frame(t));
-  }
-
-  // Main loop
-  frame(currentTime) {
-    const early = this.markFrame(currentTime);
-    if (early) {
-      // Slow down :)
-      requestAnimationFrame(t => this.frame(t));
-      return;
-    }
-    this.timeScale = this.getOption('param.timeScale');
-    const elapsedTime = (currentTime - this.rawTime) * this.timeScale;
-    this.rawTime = currentTime;
-    if (this.playing) {
-      this.time += elapsedTime;
-    }
-    if (this.getOption('debug.currentMode')) {
-      this.info['Mode'] = this.getCurrentMode();
-    }
-    if (this.getOption('debug.frameRate')) {
-      this.info['Frame Rate'] = this.frameRate.toPrecision(3);
-    }
-    this.zoom.frame();
-    this.pointer.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.frame(t));
-  }
-
-  markFrame(t) {
-    const { recentFrames: rfs } = this;
-    if (!rfs.length) {
-      rfs.push(t);
-      return;
-    }
-    let oldest = rfs[0];
-    let duration = t - oldest;
-    const count = rfs.length + 1;
-    const frameRate = 1000 * count / duration;
-    const targetFrameRate = parseInt(this.getOption('display.targetFrameRate'));
-    if (frameRate > targetFrameRate + 1) {
-      return true;
-    }
-    this.frameRate = frameRate;
-    rfs.push(t);
-    while (duration >= FRAMERATE_SAMPLE_DURATION) {
-      rfs.shift();
-      oldest = rfs[0];
-      duration = t - oldest;
-    }
-    return false;
+    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.zoom.scheduleZoom({x, y}, factor, velocity);
+    this.nextZoom = {x, y, factor, velocity};
+  }
+
+  // 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);
   }
 
   // Transform display coordinates to simulator coordinates using scale and viewOrigin
@@ -130,8 +196,7 @@ export class Sim {
 
   getScaleDisplay() {
     const scale = 2 ** Math.abs(this.display.scalePower);
-    const scaleText = this.display.scalePower >= 0 ? `${scale}` : `1/${scale}`;
-    return `${scaleText} (${this.display.scalePower})`;
+    return this.display.scalePower >= 0 ? `${scale}` : `1/${scale}`;
   }
 
   // cb: () => undefined
@@ -141,4 +206,49 @@ export class Sim {
     });
   }
 
+  // Main loop
+  loop(currentTime) {
+    this.markFrame(currentTime);
+    const timeScale = this.getOption('param.timeScale');
+
+    // elapsedTime in milliseconds
+    // rawTime in milliseconds
+    const elapsedTime = (currentTime - this.rawTime) / timeScale;
+    this.rawTime = currentTime;
+
+    if (this.playing) {
+      this.time += elapsedTime;
+    }
+
+    if (this.getOption('debug.currentMode')) {
+      this.info['Mode'] = this.getCurrentMode();
+    }
+
+    if (this.getOption('debug.frameRate')) {
+      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();
+    for (const group in this.toolbarGroups) {
+      this.toolbarGroups[group].frame();
+    }
+    requestAnimationFrame(t => this.loop(t));
+  }
 }

style.css

@@ -27,31 +27,6 @@ div[id=simulator] {
   width: 100%;
 }
 
-/* normal toolbar group */
-div.lhg-toolbar-group div.lhg-tool {
-  width: 12em;
-}
-div.lhg-toolbar-group div.lhg-tool button, div.lhg-toolbar-group div.lhg-tool input {
-  width: 6em;
-}
-div.lhg-toolbar-group div.lhg-tool .lhg-wide {
-  width: 12em;
-}
-
-
-/* wide toolbar group */
-div.lhg-toolbar-group.lhg-wide div.lhg-tool {
-  width: 16em;
-}
-div.lhg-toolbar-group.lhg-wide div.lhg-tool button, div.lhg-toolbar-group.lhg-wide div.lhg-tool input {
-  width: 8em;
-}
-div.lhg-toolbar-group.lhg-wide div.lhg-tool .lhg-wide {
-  width: 16em;
-}
-
-/* end of toolbar group section */
-
 div.lhg-toolbar {
   position: relative;
   z-index: 2;
@@ -67,6 +42,7 @@ div.lhg-tool {
   position: relative;
   top: 0;
   left: 0;
+  width: 12em;
   /* padding: 0.5em; */
   /* margin: 0.5em; */
   text-align: middle;
@@ -80,6 +56,7 @@ div.lhg-tool div.lhg-wide {
 div.lhg-tool button, div.lhg-tool input {
   font-family: monospace;
   font-size: 10pt;
+  width: 6em;
   background-color: #333;
   color: #5f5;
   border-radius: 0.5em;
@@ -96,6 +73,10 @@ div.lhg-tool button, div.lhg-tool input {
   box-sizing: border-box;
 }
 
+div.lhg-tool input {
+  width: 6em;
+}
+
 div.lhg-tool button:hover {
   background-color: #444;
 }
@@ -122,8 +103,13 @@ div.lhg-tool .lhg-tool-info {
   border-width: 2px;
 }
 
+div.lhg-tool .lhg-wide {
+  width: 12em;
+}
+
 div.lhg-tool .lhg-tall {
-  height: 3.666em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
 div.lhg-overlay-info-box {
@@ -133,15 +119,3 @@ div.lhg-overlay-info-box {
   width: fit-content;
   z-index: 1;
 }
-
-div.lhg-option-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/*
-div.lhg-option-group > * {
-  display: inline-block;
-  vertical-align: top;
-}
-*/

tool.js

@@ -10,16 +10,13 @@ export class Tool {
   container = undefined;
   sim = undefined;
 
-  constructor() {
+  constructor(container) {
+    this.container = container;
+    this.sim = this.container.sim;
     const div = document.createElement('div');
     this.div = div;
     div.classList.add(TOOL_CLASSNAME)
   }
 
-  setContainer(container) {
-    this.container = container;
-    this.sim = this.container.sim;
-  }
-
   frame() {}
 }

tool/header.js

@@ -2,6 +2,7 @@ import {TOOLBAR_HEADER_CLASSNAME} from '../config.js';
 import { Tool } from '../tool.js';
 
 export class Header extends Tool {
+
   constructor(container, title = 'Tools') {
     super(container);
     this.title = document.createElement('h1');
@@ -9,6 +10,7 @@ export class Header extends Tool {
 
     this.toggleButton = document.createElement('button');
     this.div.addEventListener('click', () => this.toggle());
+    this.updateButton();
 
     this.div.appendChild(this.title);
     this.div.appendChild(this.toggleButton);
@@ -20,11 +22,6 @@ export class Header extends Tool {
     this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
   }
 
-  setContainer(container) {
-    super.setContainer(container);
-    this.updateButton();
-  }
-
   updateButton() {
     this.toggleButton.innerHTML = this.container.expanded ? '˅' : '˄';
   }

tool/modes.js

@@ -18,21 +18,6 @@ export class ModeSwitch extends Tool {
   ];
   buttons = [];
 
-  setContainer(container) {
-    super.setContainer(container);
-
-    // First listed mode is the default
-    const [[currentModeID, ]] = this.modes;
-    this.setCurrentMode(currentModeID);
-
-    // Add global method to set/get current mode
-    this.sim.setCurrentMode = (modeID) => this.setCurrentMode(modeID);
-    this.sim.getCurrentMode = () => this.currentMode;
-    this.sim.isCurrentMode = (modeID) => modeID === this.currentMode;
-    this.sim.onModeLeave = (modeID, cb) => this.onModeLeave(modeID, cb);
-    this.sim.onModeEnter = (modeID, cb) => this.onModeEnter(modeID, cb);
-  }
-
   constructor(container) {
     super(container);
 
@@ -57,6 +42,17 @@ export class ModeSwitch extends Tool {
 
       button.addEventListener('click', () => this.setCurrentMode(modeID));
     }
+
+    // First listed mode is the default
+    const [[currentModeID, ]] = this.modes;
+    this.setCurrentMode(currentModeID);
+
+    // Add global method to set/get current mode
+    this.sim.setCurrentMode = (modeID) => this.setCurrentMode(modeID);
+    this.sim.getCurrentMode = () => this.currentMode;
+    this.sim.isCurrentMode = (modeID) => modeID === this.currentMode;
+    this.sim.onModeLeave = (modeID, cb) => this.onModeLeave(modeID, cb);
+    this.sim.onModeEnter = (modeID, cb) => this.onModeEnter(modeID, cb);
   }
 
   setModesOpacity() {

tool/options.js

@@ -1,35 +1,16 @@
 // Options picker
 import {
   TOOL_INFO_CLASSNAME,
-  OPTION_GROUP_CLASSNAME,
   WIDE_CLASSNAME,
-  TALL_CLASSNAME,
 } from '../config.js';
 import { Tool } from '../tool.js';
 
 export class OptionsTool extends Tool {
-  sections = undefined;
-
-  constructor(sections) {
-    super();
-    this.sections = sections;
-  }
-
-  setContainer(container) {
-    super.setContainer(container);
-    for (const sectionName of this.sections) {
-      const option = this.sim.options.getSection(sectionName);
-      const child = this.visitItem(option);
-      this.div.appendChild(child);
-    }
-  }
-
   visitItem(item, path) {
     path = [path, item.name].filter(x => !!x).join('.');
     switch (item.type) {
       case 'group': {
         const group = document.createElement('div');
-        group.classList.add(OPTION_GROUP_CLASSNAME);
         if (item.title) {
           const heading = document.createElement('h3');
           heading.innerHTML = item.title;
@@ -44,15 +25,22 @@ export class OptionsTool extends Tool {
       case 'boolean': {
         const button = document.createElement('button');
         button.innerHTML = item.title;
-        if (item.wide === true) button.classList.add(WIDE_CLASSNAME);
-        if (item.tall === true) button.classList.add(TALL_CLASSNAME);
+        if (item.wide === true) {
+          button.classList.add(WIDE_CLASSNAME);
+        }
         const value = this.sim.getOption(path);
+        if (value === undefined) {
+          this.sim.setOption(path, item.default);
+        }
         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.getOption(path);
+          const value = this.sim.options.getOption(path, true);
+          console.log('click, option value', value);
           this.sim.setOption(path, !value);
         });
         return button;
@@ -71,7 +59,8 @@ export class OptionsTool extends Tool {
           input.classList.add(WIDE_CLASSNAME);
         }
         title.innerHTML = item.title;
-        input.value = this.sim.getOption(path);
+        input.value = item.default;
+        this.sim.setOption(path, item.default);
 
         input.addEventListener('input', () => {
           input.value = input.value.slice(0, maxLength);
@@ -88,7 +77,18 @@ export class OptionsTool extends Tool {
         return div;
       }
       default:
+        console.error('Unknown option type', item);
         throw new Error('Unknown option type');
     }
   }
+
+  constructor(container, sections) {
+    super(container);
+
+    for (const sectionName of sections) {
+      const option = this.sim.options.getSection(sectionName);
+      const child = this.visitItem(option);
+      this.div.appendChild(child);
+    }
+  }
 }

tool/play-pause.js

@@ -14,11 +14,6 @@ export class PlayPause extends Tool {
     this.playButton.style.opacity = this.sim.playing ? '50%' : '100%';
   }
 
-  setContainer(container) {
-    super.setContainer(container);
-    this.updateButtons();
-  }
-
   constructor(container) {
     super(container);
 
@@ -37,6 +32,8 @@ export class PlayPause extends Tool {
     playButton.classList.add(TALL_CLASSNAME);
     pauseButton.classList.add(TALL_CLASSNAME);
 
+    this.updateButtons();
+
     pauseButton.addEventListener('click', () => {
       this.sim.panning = undefined;
       if (this.sim.playing) {

tool/utility.js

@@ -7,6 +7,10 @@ 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
@@ -36,39 +40,100 @@ export class UtilityTool extends Tool {
     }
   }
 
-  setContainer(container) {
-    super.setContainer(container);
-    this.currentTimeEl.innerHTML = this.timeText;
-  }
-
   constructor(container) {
     super(container);
 
+    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 netVelocity = {
+        x: netMomentum.x / totalMass,
+        y: netMomentum.y / totalMass,
+      };
+
+      // Apply offset to all object velocities
+      this.sim.objects.forEachObject(obj => {
+        obj.velocity.x -= netVelocity.x;
+        obj.velocity.y -= netVelocity.y;
+      });
+
+      // Cancel panning
+      this.sim.panning = undefined;
+    });
+
     clearTraces.addEventListener('click', () => {
       // Obliterate object histories
-      this.sim.system.forEachObject(obj => {
+      this.sim.objects.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,51 +2,20 @@ import { Tool } from '../tool.js';
 import { 
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
-  WIDE_CLASSNAME,
-  TOOL_INFO_CLASSNAME,
 } from '../config.js';
 
 export class Zoom extends Tool {
-  currentScaleEl = undefined;
-
-  get displayScaleText() {
-    return `Scale: ${this.sim.getScaleDisplay()}`;
-  }
-
-  setContainer(container) {
-    super.setContainer(container);
-
-    this.currentScaleEl.innerHTML = this.displayScaleText;
-
-    this.sim.onZoom(() => {
-      this.currentScaleEl.innerHTML = this.displayScaleText;
-    });
-  }
-
   constructor(container) {
     super(container);
 
-    const currentScale = document.createElement('button')
     const zoomOut = document.createElement('button');
     const zoomIn = document.createElement('button');
-    const zoomAll = document.createElement('button');
-    const zeroVelocity = document.createElement('button');
 
-    this.currentScaleEl = currentScale;
-
-    this.div.appendChild(currentScale);
     this.div.appendChild(zoomOut);
     this.div.appendChild(zoomIn);
-    this.div.appendChild(zoomAll);
-    this.div.appendChild(zeroVelocity);
-
-    currentScale.classList.add(WIDE_CLASSNAME);
-    currentScale.classList.add(TOOL_INFO_CLASSNAME);
 
     zoomOut.innerHTML = 'Zoom<br>Out';
     zoomIn.innerHTML = 'Zoom<br>In';
-    zoomAll.innerHTML = 'Zoom to Fit';
-    zeroVelocity.innerHTML = 'Zero Momentum';
 
     zoomOut.addEventListener('click', () => {
       // Aim at center of view
@@ -61,43 +30,5 @@ 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 ratio = Math.max(widthRatio, heightRatio) * 4;
-      const factor = Math.ceil(Math.log2(1 / ratio));
-
-      // 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)
-    });
-
-    zeroVelocity.addEventListener('click', () => {
-      // Determine center of mass and average momentum
-      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.system.forEachObject(obj => {
-        obj.velocity.x -= netVelocity.x;
-        obj.velocity.y -= netVelocity.y;
-      });
-
-      // Cancel panning
-      this.sim.panning = undefined;
-    });
-
   }
 }

toolbar-group.js

@@ -1,13 +1,12 @@
-import {TOOLBAR_GROUP_CLASSNAME, WIDE_CLASSNAME} from './config.js';
 export class ToolbarGroup {
   sim = undefined;
   toolbars = [];
 
   constructor(sim) {
     this.sim = sim;
-    this.div = document.createElement('div');
-    this.sim.div.appendChild(this.div);
-    this.div.classList.add(TOOLBAR_GROUP_CLASSNAME);
+    const div = document.createElement('div');
+    this.div = div;
+    this.sim.div.appendChild(div);
   }
 
   topRight() {
@@ -17,11 +16,6 @@ export class ToolbarGroup {
     return this;
   }
 
-  wide() {
-    this.div.classList.add(WIDE_CLASSNAME);
-    return this;
-  }
-
   addToolbar(toolbar) {
     this.div.appendChild(toolbar.div);
     this.toolbars.push(toolbar);

toolbar.js

@@ -38,7 +38,6 @@ export class Toolbar {
   // tool: instance of Tool
   addTool(tool) {
     this.div.appendChild(tool.div);
-    tool.setContainer(this);
     this.tools.push(tool);
     return this;
   }

zoom.js

@@ -1,59 +0,0 @@
-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) {
-    if (velocity) {
-      this.sim.panning = {
-        velocity: { ...velocity }
-      };
-    }
-
-    const e = new CustomEvent(EVENT_ZOOM);
-    this.sim.div.dispatchEvent(e);
-  }
-
-}