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,9 +183,11 @@ 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;
+        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

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 ?? {};
-    if (pointerHistory?.length) {
+    const { pointerHistory } = this;
+    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,3 +1,4 @@
+import {OBJECT_HISTORY_SIZE} from './config.js';
 import {MassObject} from './object.js';
 
 export class System {
@@ -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. 
@@ -328,9 +333,14 @@ 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();
+        }
       });
     }
 

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 = div;
-    this.sim.div.appendChild(div);
+    this.div = document.createElement('div');
+    this.sim.div.appendChild(this.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 }
       };