possible wide toolbar groups

Readme.md

@@ -10,6 +10,8 @@ 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")
+
 TODO
 ----
 
@@ -35,3 +37,5 @@ TODO
 - [ ] Track farthest reaches, min/max in each dimension (x, y)
 - [ ] 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

@@ -16,6 +16,7 @@ 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;
@@ -37,6 +38,7 @@ 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';

object.js

@@ -183,8 +183,10 @@ export class MassObject {
         // 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;
-        velocity.x = vx + pointerV.x / this.sim.timeScale;
+        if (this.sim.getOption('compensate.timeScale')) {
-        velocity.y = vy + pointerV.y / this.sim.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);

options.js

@@ -69,7 +69,14 @@ export class Options {
   }
 
   getOption(path) {
-    return this.values[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;
+    }
   }
 
   setOption(path, value) {

pointer.js

@@ -205,10 +205,10 @@ export class Pointer {
 
   frame() {
     // Add another entry for the current pointer position
-    const {pointerHistory} = this.sim.pointer ?? {};
+    const { pointerHistory } = this;
-    if (pointerHistory?.length) {
+    if (pointerHistory.length) {
       const currentPointer = pointerHistory[pointerHistory.length - 1];
-      this.sim.pointer.updatePointer(currentPointer);
+      this.updatePointer(currentPointer);
     }
   }
 }

sim-options.js

@@ -10,10 +10,10 @@ export const simOptions = {
     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: ['Target Frame Rate', 'number', 60],
+    targetFrameRate: ['Frame Rate', 'number', 60],
   },
   collision: {
-    merge: ['Merge Masses<br>on Collision', 'boolean', true, {wide: true}],
+    merge: ['Merge Masses on Collision', 'boolean', true, {wide: true}],
   },
   compensate: {
     timeScale: ['Time Scale Compensator', 'boolean', false, {wide: true}],

simulator.js

@@ -52,7 +52,38 @@ export class Sim {
     // Initiate main loop
     this.rawTime = document.timeline.currentTime;
     this.time = 0;
-    requestAnimationFrame(t => this.loop(t));
+    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) {
@@ -110,39 +141,4 @@ export class Sim {
     });
   }
 
-  // Main loop
-  loop(currentTime) {
-    const early = this.markFrame(currentTime);
-    if (early) {
-      // Slow down :)
-      requestAnimationFrame(t => this.loop(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.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));
-  }
 }

style.css

@@ -27,6 +27,31 @@ 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;
@@ -42,7 +67,6 @@ div.lhg-tool {
   position: relative;
   top: 0;
   left: 0;
-  width: 12em;
   /* padding: 0.5em; */
   /* margin: 0.5em; */
   text-align: middle;
@@ -56,7 +80,6 @@ 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;
@@ -73,10 +96,6 @@ 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;
 }
@@ -103,10 +122,6 @@ div.lhg-tool .lhg-tool-info {
   border-width: 2px;
 }
 
-div.lhg-tool .lhg-wide {
-  width: 12em;
-}
-
 div.lhg-tool .lhg-tall {
   height: 3.666em;
 }
@@ -119,7 +134,14 @@ div.lhg-overlay-info-box {
   z-index: 1;
 }
 
+div.lhg-option-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/*
 div.lhg-option-group > * {
   display: inline-block;
   vertical-align: top;
 }
+*/

system.js

@@ -1,4 +1,5 @@
-import { MassObject } from './object.js';
+import {OBJECT_HISTORY_SIZE} from './config.js';
+import {MassObject} from './object.js';
 
 export class System {
   objects = [];
@@ -88,10 +89,10 @@ export class System {
 
   get boundingBox() {
     const box = this.reduce(({start, end}, obj) => {
-      const lx = obj.position.x - obj.radius; 
+      const lx = obj.position.x - obj.radius;
       const gx = obj.position.x + obj.radius;
-      const ly = obj.position.y - obj.radius; 
+      const ly = obj.position.y - obj.radius;
-      const gy = obj.position.y + obj.radius; 
+      const gy = obj.position.y + obj.radius;
       let ret;
       if (start.x === undefined) {
         ret = {
@@ -112,7 +113,7 @@ export class System {
       };
       return ret;
     }, {
-      start: {x: undefined, y: undefined}, 
+      start: {x: undefined, y: undefined},
       end: {x: undefined, y: undefined},
     });
 
@@ -128,7 +129,7 @@ export class System {
     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);
+      const dist = Math.pow((obj.position.x - x) ** 2 + (obj.position.y - y) ** 2, 1 / 2);
       if (dist <= obj.radius) {
         idx = i;
         return null;
@@ -140,7 +141,7 @@ export class System {
   handlePointerDown({x, y}) {
     // If pointer is touching an object, select the object
     const touchingObject = this.objectAtLocation(x, y);
-   
+
     if (touchingObject !== undefined) {
       this.selectObject(touchingObject, {x, y});
     } else {
@@ -226,8 +227,8 @@ export class System {
         const F = gravity * A.mass * B.mass / dSquared;
         const Fx = F * dx / d;
         const Fy = F * dy / d;
-        A.forces.push({ x: Fx, y: Fy });
+        A.forces.push({x: Fx, y: Fy});
-        B.forces.push({ x: -Fx, y: -Fy });
+        B.forces.push({x: -Fx, y: -Fy});
       }, {alive: true, startWith: i + 1});
     });
     // Also compute acceleration
@@ -245,9 +246,13 @@ export class System {
 
     if (this.creatingObject !== undefined) {
       const obj = this.objects[this.creatingObject];
-      let massCreationRate = this.sim.getOption('param.massCreationRate') / this.sim.display.scale;
+      let massCreationRate = this.sim.getOption('param.massCreationRate');
+      massCreationRate /= this.sim.display.scale;
       // Keep consistent time scale
-      obj.mass += massCreationRate * elapsedTime / this.sim.timeScale;
+      if (this.sim.getOption('compensate.timeScale')) {
+        massCreationRate /= this.sim.timeScale;
+      }
+      obj.mass += massCreationRate * elapsedTime;
     }
 
     // Calculate forces due to gravity. 
@@ -259,9 +264,9 @@ export class System {
         obj.currentAcceleration = {...obj.acceleration};
 
         obj.position.x += elapsedTime *
-            (obj.velocity.x + 1/2 * obj.currentAcceleration.x * elapsedTime);
+          (obj.velocity.x + 1 / 2 * obj.currentAcceleration.x * elapsedTime);
         obj.position.y += elapsedTime *
-            (obj.velocity.y + 1/2 * obj.currentAcceleration.y * elapsedTime);
+          (obj.velocity.y + 1 / 2 * obj.currentAcceleration.y * elapsedTime);
       });
 
       // Collisions
@@ -313,7 +318,7 @@ export class System {
           }, {alive: true, startWith: i + 1});
         });
       }
-      
+
       // Recompute forces
       this.computeForces();
 
@@ -328,36 +333,41 @@ export class System {
         obj.velocity.y += obj.acceleration.y * elapsedTime;
 
         // Append to object history
-        // TODO: enforce object history length
-        // TODO: store object color changes in history
         obj.history.push({position: {...obj.position}});
+
+        // TODO: store object color changes in history
+
+        // Enforce object history length
+        while (obj.history.length > OBJECT_HISTORY_SIZE) {
+          obj.history.shift();
+        }
       });
     }
 
     // Display objects info
     // First clear info from previous frame
     this.forEachObject((_obj, i) => {
-        delete this.sim.info[`Object ${i}`];
+      delete this.sim.info[`Object ${i}`];
-    }, { alive: null });
+    }, {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 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);
+        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.x.toPrecision(4)}, `,
-          `${obj.position.y.toPrecision(4)}, `, 
+          `${obj.position.y.toPrecision(4)}, `,
           `${obj.mass.toPrecision(4)} kg, `,
-          `${speed.toPrecision(2)} m/s, ${direction.toPrecision(2)}°`, 
+          `${speed.toPrecision(2)} m/s, ${direction.toPrecision(2)}°`,
-          `${accel.toPrecision(2)} m/s<sup>2</sup>, ${accelDir.toPrecision(2)}°`, 
+          `${accel.toPrecision(2)} m/s<sup>2</sup>, ${accelDir.toPrecision(2)}°`,
-          `Alive: ${obj.alive}`, 
+          `Alive: ${obj.alive}`,
         ];
-      }, { alive: aliveOnly || null });
+      }, {alive: aliveOnly || null});
     }
 
     // Render the objects
@@ -366,7 +376,7 @@ export class System {
 
   computeSystemCenter() {
     // Determine center of mass
-    const { totalMass, count, totalMassLocation } = 
+    const {totalMass, count, totalMassLocation} =
       this.reduce((acc, obj) => ({
         count: acc.count + 1,
         totalMass: acc.totalMass + obj.mass,
@@ -387,11 +397,11 @@ export class System {
 
     // Determine average momentum
     const netMomentum = this.reduce((acc, obj) => ({
-        x: acc.x + obj.mass * obj.velocity.x,
+      x: acc.x + obj.mass * obj.velocity.x,
-        y: acc.y + obj.mass * obj.velocity.y,
+      y: acc.y + obj.mass * obj.velocity.y,
-      }), { x: 0, y: 0 });
+    }), {x: 0, y: 0});
 
-    return { totalMass, count, totalMassLocation, centerOfMass, netMomentum };
+    return {totalMass, count, totalMassLocation, centerOfMass, netMomentum};
   }
 
   computeSystemAngularMomentum(centerOfMass) {

toolbar-group.js

@@ -1,12 +1,13 @@
+import {TOOLBAR_GROUP_CLASSNAME, WIDE_CLASSNAME} from './config.js';
 export class ToolbarGroup {
   sim = undefined;
   toolbars = [];
 
   constructor(sim) {
     this.sim = sim;
-    const div = document.createElement('div');
+    this.div = document.createElement('div');
-    this.div = div;
+    this.sim.div.appendChild(this.div);
-    this.sim.div.appendChild(div);
+    this.div.classList.add(TOOLBAR_GROUP_CLASSNAME);
   }
 
   topRight() {
@@ -16,6 +17,11 @@ 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);

zoom.js

@@ -45,7 +45,8 @@ export class Zoom {
     // this.pointer.clearPointerHistory();
 
     // TODO: If paused, set panning velocity on resume
-    if (this.sim.playing && velocity) {
+    // if (this.sim.playing && velocity) {
+    if (velocity) {
       this.sim.panning = {
         velocity: { ...velocity }
       };