lentil/gravity
lentil/gravity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored panning to its own class

Browse Source
This commit is contained in:
Ladd 2026-01-03 13:10:38 -06:00
parent 0483a8ab52
commit eac659822b
15 changed files with 227 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config.js
View File

@ -45,6 +45,7 @@ export const EVENT_MODE_LEAVE = 'lhg-mode-leave';
export const EVENT_MODE_ENTER = 'lhg-mode-enter';
export const EVENT_ZOOM = 'lhg-zoom-event';
export const EVENT_OPTION_SET = 'lhg-option-set';
export const EVENT_PLAY_PAUSE = 'lhg-play-pause';
// MODES
export const MODE_MASS_GENERATION = 'mass-gen';

36
display.js
View File

@ -22,41 +22,7 @@ export class Display {
window.addEventListener('resize', () => this.fullscreen());
}
frame(elapsedTime) {
const {
touchStart: start,
touchLatest: latest,
} = this.sim.pointer ?? {};
// Direct translate, unless using fast panning
if (start && latest && !this.sim.getOption('compensate.fastPanning')) {
this.viewOrigin.x = start.viewOrigin.x - (latest.x - start.x) / this.scale;
this.viewOrigin.y = start.viewOrigin.y - (latest.y - start.y) / this.scale;
}
// Apply update to viewOrigin based on panning
if (this.sim.panning && !this.sim.panning.paused) {
// elapsedTime is scaled by time scale, is that what we want?
// Yes because if panning.velocity == obj.velocity, object should stay in view
this.viewOrigin.x += this.sim.panning.velocity.x * elapsedTime;
this.viewOrigin.y += this.sim.panning.velocity.y * elapsedTime;
}
// Update what's considered start
if (start && latest) {
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);
}
frame() {
// Clear canvas in preparation for other modules to render this frame
this.fillCanvas();
}

60
object.js
View File

@ -13,6 +13,7 @@ import {
VELOCITY_VECTOR_COLOR,
VELOCITY_VECTOR_WIDTH,
} from './config.js';
import {add, components, direction, div, magnitude} from './vector.js';
export class MassObject {
sim = undefined;
@ -175,36 +176,35 @@ 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 object is being dragged by the user,
// show the pointer velocity instead of object velocity
let pointerV = this.sim.pointer.latestVelocity;
if (this.sim.getOption('compensate.timeScale')) {
velocity.x = vx + pointerV.x / this.sim.timeScale;
velocity.y = vy + pointerV.y / this.sim.timeScale;
pointerV = div(pointerV, this.sim.timeScale);
}
velocity = add(velocity, pointerV);
}
const speed = Math.sqrt(velocity.x ** 2, velocity.y ** 2) / this.sim.display.scale;
const arrowDirection = Math.atan2(velocity.y, velocity.x);
const speed = magnitude(velocity);
const arrowDirection = direction(velocity);
// Prevent negative numbers by adding 1
// TODO: Make logarithmic vector length scale optional
const arrowLength = Math.log10(speed + 1) * vecScale;
const offsetX = radius * Math.cos(arrowDirection);
const offsetY = radius * Math.sin(arrowDirection);
const startVx = x + offsetX;
const startVy = y + offsetY;
const endVx = startVx + arrowLength * Math.cos(arrowDirection);
const endVy = startVy + arrowLength * Math.sin(arrowDirection);
// Make arrow lengths appear consistent regardless of display scale
let arrowLength = Math.log10(speed + 1) * vecScale;
if (!this.sim.getOption('display.zoomVectors')) {
arrowLength /= this.sim.display.scale;
}
// const offset = mult({x: Math.cos(
const offset = components(radius, arrowDirection)
const start = add({x, y}, offset);
const end = add(start, components(arrowLength, arrowDirection));
const style = VELOCITY_VECTOR_COLOR === 'object color' ?
`rgb(${r}, ${g}, ${b})` : VELOCITY_VECTOR_COLOR;
sim.display.drawArrow(startVx, startVy, endVx, endVy, {
sim.display.drawArrow(start.x, start.y, end.x, end.y, {
style,
width: VELOCITY_VECTOR_WIDTH,
arrowhead: VELOCITY_VECTOR_ARROWHEAD,
@ -216,21 +216,21 @@ 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);
const accel = magnitude(acceleration);
const arrowDirection = direction(acceleration);
// Prevent negative numbers by adding 1
const arrowLength = Math.log10(accelerationMagnitude + 1) * vecScale;
//const arrowLength = accelerationMagnitude * vecScale;
const offsetX = radius * Math.cos(arrowDirection);
const offsetY = radius * Math.sin(arrowDirection);
const startAx = x + offsetX;
const startAy = y + offsetY;
const endAx = startAx + arrowLength * Math.cos(arrowDirection);
const endAy = startAy + arrowLength * Math.sin(arrowDirection);
// TODO: Make logarithmic vector length scale optional
// Make arrow lengths appear consistent regardless of display scale
let arrowLength = Math.log10(accel + 1) * vecScale;
if (!this.sim.getOption('display.zoomVectors')) {
arrowLength /= this.sim.display.scale;
}
const offset = components(radius, arrowDirection)
const start = add({x, y}, offset);
const end = add(start, components(arrowLength, arrowDirection));
const style = ACCELERATION_VECTOR_COLOR === 'object color' ?
`rgb(${r}, ${g}, ${b})` : ACCELERATION_VECTOR_COLOR;
sim.display.drawArrow(startAx, startAy, endAx, endAy, {
sim.display.drawArrow(start.x, start.y, end.x, end.y, {
style,
width: ACCELERATION_VECTOR_WIDTH,
arrowhead: ACCELERATION_VECTOR_ARROWHEAD,

129
options-1.js
View File

@ -1,129 +0,0 @@
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`;
}
constructor(sim, options) {
this.sim = sim;
this.options = options;
// Global methods to get/set current option values
this.sim.getOption = (path) => this.getOption(path);
this.sim.setOption = (path, value) => this.setOption(path, value);
this.sim.onOptionSet = (path, cb) => this.onOptionSet(path, cb);
// Initialize values from localStorage
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);
if (value === undefined) {
value = defaultValue;
}
this.values[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 [groupName, name] = path.split('.');
const group = this.options[groupName];
const item = group[name];
const {type} = item;
const value = this.values[path];
switch (type) {
case 'number': return Number(value);
case 'boolean': return value === true || value === 'true';
default: {
console.log({
path, groupName, name,
group, item,
type, value
});
throw new Error('unknown option type');
}
}
}
setOption(path, value) {
this.values[path] = value;
const storageKey = this.getStorageKey(path);
window.localStorage.setItem(storageKey, this.toStored(value));
const e = new CustomEvent(EVENT_OPTION_SET, {detail: {path, value}});
this.sim.div.dispatchEvent(e);
}
// cb: (value) => undefined
onOptionSet(path, cb) {
this.sim.div.addEventListener(EVENT_OPTION_SET, (e) => {
if (path === e.detail.path) {
cb(e.detail.value);
}
});
}
getSection(sectionName) {
const section = this.options[sectionName];
const group = {
type: 'group',
name: sectionName,
title: section._title,
items: [],
};
for (const name in section) {
if (name.startsWith('_')) continue;
const [title, type, defaultValue, opts] = section[name];
group.items.push({
name,
type,
title,
default: defaultValue,
...opts
})
}
return group;
}
}

6
options.js
View File

@ -96,11 +96,11 @@ export class Options {
this.sim.div.dispatchEvent(e);
}
// cb: (value) => undefined
// cb: ({path, value}) => undefined
onOptionSet(path, cb) {
this.sim.div.addEventListener(EVENT_OPTION_SET, (e) => {
if (path === e.detail.path) {
cb(e.detail.value);
if (!path || path === e.detail.path) {
cb({ path, value: e.detail.value });
}
});
}

117
panning.js Normal file
View File

@ -0,0 +1,117 @@
import {add, copy, div, mult, sub, zero} from "./vector.js";
export class Panning {
sim = undefined;
touchStart = undefined;
touchLatest = undefined;
paused = false;
velocity = zero;
constructor(sim) {
this.sim = sim;
}
handlePointerDown({x, y}) {
this.initializeTouch({x, y});
}
initializeTouch({x, y}) {
this.touchStart = {
x,
y,
t: this.sim.rawTime,
viewOrigin: copy(this.sim.display.viewOrigin),
};
this.touchLatest = {
...this.touchStart,
dx: 0,
dy: 0,
dt: 0,
};
}
// With fast panning, panning velocity calculation happens every move;
// With normal panning, calculation only happens at pointer up.
handlePointerMove({x, y}) {
if (this.touchStart) {
this.touchLatest = {
x,
y,
t: this.sim.rawTime,
dx: x - this.touchStart.x,
dy: x - this.touchStart.y,
dt: this.sim.rawTime - this.touchStart.t,
};
if (this.sim.getOption('compensate.fastPanning')) {
this.updateVelocity();
}
}
}
handlePointerUp() {
if (this.touchStart && this.touchLatest) {
if (this.touchLatest.dt === 0) {
this.velocity = zero;
}
this.touchStart = undefined;
if (this.sim.getOption('compensate.fastPanning')) {
this.velocity = zero;
} else {
this.updateVelocity();
}
}
}
frame(elapsedTime) {
const {touchStart: start, touchLatest: latest} = this;
const {display} = this.sim;
// Direct translate, unless using fast panning
if (start && latest && !this.sim.getOption('compensate.fastPanning')) {
// start and latest are in screen coordinates, need to convert to sim scale
const delta = div(sub(latest, start), display.scale);
display.viewOrigin = sub(start.viewOrigin, delta);
}
// Apply update to viewOrigin based on panning
if (!this.paused) {
// elapsedTime is scaled by time scale, is that what we want?
// Yes because if panning.velocity == obj.velocity, object should stay in view
const delta = mult(this.velocity, elapsedTime);
display.viewOrigin = add(display.viewOrigin, delta);
}
// Update what's considered start
if (start && latest) {
this.initializeTouch(this.touchLatest);
}
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);
}
}
updateVelocity() {
// Convert pointer velocity to simulation scale, and multiply by -1
// because the camera is panning opposite to the pointer velocity.
let velocity = div(this.sim.pointer.latestVelocity, -this.sim.display.scale);
if (this.sim.getOption('compensate.timeScale')) {
velocity = div(velocity, this.sim.timeScale);
}
// Also add current panning
velocity = add(velocity, this.velocity);
this.velocity = velocity;
}
setVelocity(velocity) {
this.velocity = velocity;
if (!this.sim.playing) {
this.paused = true;
}
}
}

89
pointer.js
View File

@ -46,7 +46,6 @@ export class Pointer {
});
el.addEventListener('pointerleave', e => {
console.log('pointerleave', {x: e.clientX, y: e.clientY});
this.handlePointerUp({x: e.clientX, y: e.clientY});
});
@ -66,7 +65,6 @@ export class Pointer {
}
handlePointerDown({x: clientX, y: clientY}) {
// this.clearPointerHistory(POINTER_DOWN_HISTORY_SIZE);
this.updatePointer({x: clientX, y: clientY});
switch (this.sim.getCurrentMode()) {
@ -76,19 +74,7 @@ export class Pointer {
break;
}
case MODE_PAN_VIEW: {
this.touchStart = {
x: clientX,
y: clientY,
t: this.sim.rawTime,
viewOrigin: {...this.sim.display.viewOrigin},
};
// Since we've processed this increment, reset
this.touchLatest = {
...this.touchStart,
dx: 0,
dy: 0,
dt: 0,
};
this.sim.panning.handlePointerDown({x: clientX, y: clientY});
break;
}
case MODE_OBJECT_SELECT: {
@ -110,41 +96,7 @@ export class Pointer {
break;
}
case MODE_PAN_VIEW: {
if (this.touchStart) {
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,
};
// With fast panning, this calculation happens every move
// With normal panning, this calculation only happens at pointer up
if (this.sim.getOption('compensate.fastPanning')) {
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.sim.panning.handlePointerMove({x: clientX, y: clientY});
break;
}
case MODE_OBJECT_SELECT: {
@ -162,37 +114,7 @@ export class Pointer {
break;
}
case MODE_PAN_VIEW: {
// Set panning velocity
if (this.touchStart && this.touchLatest) {
if (this.touchLatest.dt === 0) {
this.sim.panning = undefined;
}
this.touchStart = undefined;
if (this.sim.getOption('compensate.fastPanning')) {
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.sim.panning.handlePointerUp({x: clientX, y: clientY});
break;
}
case MODE_OBJECT_SELECT: {
@ -227,11 +149,6 @@ 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)
}
updatePointer({x, y}) {
const t = this.sim.rawTime;
while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) {

7
sim-options.js
View File

@ -4,13 +4,14 @@ export const simOptions = {
selection: ['Pause While Selecting', 'boolean', true],
},
display: {
traces: ['Path Traces', 'boolean', true],
dashedTraces: ['Dashed', 'boolean', false, {tall: true}],
targetFrameRate: ['Frame Rate', 'number', 60],
velocity: ['Velocity Vectors', 'boolean', true],
acceleration: ['Accel Vectors', 'boolean', true],
traces: ['Path Traces', 'boolean', true],
dashedTraces: ['Dashed', 'boolean', false, {tall: true, hideUnless: 'display.traces'}],
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],
zoomVectors: ['Zoom Vectors', 'boolean', true]
},
compensate: {
timeScale: ['Time Scale Compensator', 'boolean', false, {wide: true}],

24
simulator.js
View File

@ -1,4 +1,5 @@
import {
EVENT_PLAY_PAUSE,
EVENT_ZOOM,
FRAMERATE_SAMPLE_DURATION,
} from './config.js';
@ -8,6 +9,7 @@ import {Overlay} from './overlay.js';
import {Pointer} from './pointer.js';
import {Options} from './options.js';
import {Zoom} from './zoom.js';
import {Panning} from './panning.js';
import {Select} from './select.js';
import {simOptions} from './sim-options.js';
import {initializeTools} from './sim-tools.js';
@ -20,7 +22,6 @@ export class Sim {
nextZoom = undefined;
playing = true;
recentFrames = [];
panning = undefined;
frameRate = 0;
system = undefined;
@ -28,6 +29,7 @@ export class Sim {
overlay = undefined;
pointer = undefined;
zoom = undefined;
panning = undefined;
select = undefined;
toolbarGroups = {};
@ -52,6 +54,7 @@ export class Sim {
this.overlay = new Overlay(this);
this.pointer = new Pointer(this);
this.zoom = new Zoom(this);
this.panning = new Panning(this);
this.select = new Select(this);
initializeTools(this);
@ -82,14 +85,15 @@ export class Sim {
if (this.getOption('debug.frameRate')) {
this.info['Frame Rate'] = this.frameRate.toPrecision(3);
}
this.zoom.frame();
this.pointer.frame();
this.zoom.frame(elapsedTime);
this.panning.frame(elapsedTime);
this.pointer.frame(elapsedTime);
this.display.frame(elapsedTime);
this.select.frame();
this.select.frame(elapsedTime);
this.system.frame(elapsedTime);
this.overlay.frame();
this.overlay.frame(elapsedTime);
for (const group in this.toolbarGroups) {
this.toolbarGroups[group].frame();
this.toolbarGroups[group].frame(elapsedTime);
}
requestAnimationFrame(t => this.frame(t));
}
@ -131,9 +135,12 @@ export class Sim {
play() {
this.playing = true;
if (this.panning?.paused) {
if (this.panning.paused) {
this.panning.paused = false;
}
const e = new CustomEvent(EVENT_PLAY_PAUSE, {detail: {playing: this.playing}});
this.div.dispatchEvent(e);
}
pause() {
@ -142,6 +149,9 @@ export class Sim {
if (this.panning?.velocity) {
this.panning.paused = true;
}
const e = new CustomEvent(EVENT_PLAY_PAUSE, {detail: {playing: this.playing}});
this.div.dispatchEvent(e);
}
getScaleDisplay() {

22
system.js
View File

@ -1,9 +1,9 @@
import {OBJECT_HISTORY_SIZE} from './config.js';
import {MassObject} from './object.js';
import {
add, cross, direction, div, magnitude, mult,
square,
sub, weightedAvg, zero
add, copy, cross, degrees,
direction, div, magnitude, mult,
square, sub, weightedAvg, zero
} from './vector.js';
export class System {
@ -43,10 +43,8 @@ export class System {
obj.velocity = div(obj.velocity, this.sim.timeScale);
}
if (this.sim.panning?.velocity) {
obj.velocity = add(obj.velocity, this.sim.panning.velocity);
}
}
handlePointerMove(r) {
// If the cursor moves while creating an object, or while an object is selected,
@ -125,8 +123,8 @@ export class System {
// Combine forces
// Add masses
// Average color
S.position = weightedAvg(S.position, S.mass, T.position, T.mass);
S.velocity = weightedAvg(S.velocity, S.mass, T.velocity, T.mass);
S.position = weightedAvg([[S.position, S.mass], [T.position, T.mass]]);
S.velocity = weightedAvg([[S.velocity, S.mass], [T.velocity, T.mass]]);
S.forces.push(...T.forces);
S.mass += T.mass;
S.color = {
@ -171,9 +169,9 @@ export class System {
this.forEachObject((obj, i) => {
const speed = magnitude(obj.velocity);
const accel = magnitude(obj.acceleration);
// Invert y so that the angle is counterclockwise from x-axis
const velocityDir = direction(obj.velocity);
const accelDir = direction(obj.acceleration);
// Give angle counterclockwise from horizontal
const velocityDir = -1 * degrees(direction(obj.velocity));
const accelDir = -1 * degrees(direction(obj.acceleration));
const {r, g, b} = obj.color;
this.sim.info[`Object ${i}`] = [
`<span style="background-color: rgb(${r},${g},${b});">&nbsp;&nbsp;</span>`,
@ -215,9 +213,7 @@ export class System {
this.pause();
}
if (this.sim.panning?.velocity) {
obj.velocity = {...this.sim.panning.velocity};
}
obj.velocity = copy(this.sim.panning.velocity);
}
doneCreatingObject() {

4
tool/options.js
View File

@ -48,7 +48,7 @@ export class OptionsTool extends Tool {
if (item.tall === true) button.classList.add(TALL_CLASSNAME);
const value = this.sim.getOption(path);
button.style.opacity = value ? '100%' : '50%';
this.sim.onOptionSet(path, value => {
this.sim.onOptionSet(path, ({value}) => {
button.style.opacity = value ? '100%' : '50%';
});
button.addEventListener('click', () => {
@ -81,7 +81,7 @@ export class OptionsTool extends Tool {
this.sim.setOption(path, input.value);
});
this.sim.onOptionSet(path, value => {
this.sim.onOptionSet(path, ({value}) => {
input.value = value;
});

14
tool/play-pause.js
View File

@ -1,4 +1,5 @@
import {
EVENT_PLAY_PAUSE,
TALL_CLASSNAME
} from '../config.js';
import {Tool} from '../tool.js';
@ -17,6 +18,10 @@ export class PlayPause extends Tool {
setContainer(container) {
super.setContainer(container);
this.updateButtons();
this.sim.div.addEventListener(EVENT_PLAY_PAUSE, () => {
this.updateButtons();
});
}
constructor(container) {
@ -38,18 +43,13 @@ export class PlayPause extends Tool {
pauseButton.classList.add(TALL_CLASSNAME);
pauseButton.addEventListener('click', () => {
this.sim.panning = undefined;
if (this.sim.playing) {
this.sim.playing = false;
this.sim.pause();
this.updateButtons();
}
});
playButton.addEventListener('click', () => {
if (!this.sim.playing) {
this.sim.playing = true;
this.sim.play();
this.updateButtons();
}
});
}
}

14
tool/zoom.js
View File

@ -1,10 +1,11 @@
import { Tool } from '../tool.js';
import {
TOOL_INFO_CLASSNAME,
WIDE_CLASSNAME,
ZOOM_IN_FACTOR,
ZOOM_OUT_FACTOR,
WIDE_CLASSNAME,
TOOL_INFO_CLASSNAME,
} from '../config.js';
import {Tool} from '../tool.js';
import {zero} from '../vector.js';
export class Zoom extends Tool {
currentScaleEl = undefined;
@ -73,7 +74,7 @@ export class Zoom extends Tool {
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 {netMomentum, totalMass} = this.sim.system.computeSystemCenter();
const netVelocity = {
x: netMomentum.x / totalMass,
y: netMomentum.y / totalMass,
@ -83,7 +84,7 @@ export class Zoom extends Tool {
zeroVelocity.addEventListener('click', () => {
// Determine center of mass and average momentum
const { totalMass, netMomentum } = this.sim.system.computeSystemCenter();
const {totalMass, netMomentum} = this.sim.system.computeSystemCenter();
const netVelocity = {
x: netMomentum.x / totalMass,
y: netMomentum.y / totalMass,
@ -96,8 +97,7 @@ export class Zoom extends Tool {
});
// Cancel panning
this.sim.panning = undefined;
this.sim.panning.setVelocity(zero);
});
}
}

39
vector.js
View File

@ -1,15 +1,21 @@
export const copy = (v) => ({x: v.x, y: v.y});
export const dot = (a, b) => a.x * b.x + a.y * b.y;
export const cross = (a, b) => a.x * b.y - a.y * b.x;
export const add = (a, b) => ({x: a.x + b.x, y: a.y + b.y});
export const sub = (a, b) => ({x: a.x - b.x, y: a.y - b.y});
export const square = ({x, y}) => x ** 2 + y ** 2;
export const magnitude = ({x, y}) => Math.sqrt(square({x, y}));
// Arguments must be one vector and one scalar, but can be transposed
export const mult = (v, m) => {
if (v.x !== undefined) return {x: v.x * m, y: v.y * m};
else return {x: m.x * v, y: m.y * v};
if (typeof v === 'object') return {x: v.x * m, y: v.y * m};
else if (typeof m === 'object') return {x: m.x * v, y: m.y * v};
else throw new Error('mult: no vector provided');
};
export const div = (v, m) => ({x: v.x / m, y: v.y / m});
export const zero = {x: 0, y: 0};
export const weightedAvg = (items) => {
let res = zero;
let W = 0;
@ -20,27 +26,10 @@ export const weightedAvg = (items) => {
return div(res, W);
};
// Angle is given counterclockwise, assuming screen coordinates
export const direction = ({x, y}) => Math.atan2(-y, x) * 180 / Math.PI;
export const components = (mag, dir) => mult(mag, {
x: Math.cos(dir),
y: Math.sin(dir),
});
export class Vector {
x = undefined;
y = undefined;
constructor({x, y}) {
this.x = x;
this.y = y;
}
dot(v) {return dot(this, v);}
cross(v) {return cross(this, v);}
add(v) {return new Vector(add(this, v));}
sub(v) {return new Vector(sub(this, v));}
magnitude() {return magnitude(this);}
mult(m) {return new Vector(mult(this, m));}
div(m) {return new Vector(div(this, m));}
toJSON() {
return {x: this.x, y: this.y};
}
}
export const direction = ({x, y}) => Math.atan2(y, x);
export const degrees = (rad) => rad * 180 / Math.PI;

16
zoom.js
View File

@ -3,6 +3,7 @@ import {
SCALE_POWER_MAX,
SCALE_POWER_MIN,
} from './config.js';
import {div, sub} from './vector.js';
export class Zoom {
sim = undefined;
@ -27,7 +28,7 @@ export class Zoom {
// x, y should be in Sim coordinates
// velocity should be in Sim coordinate scale
zoom({x, y, factor, velocity}) {
const { display } = this.sim;
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
@ -35,22 +36,15 @@ export class Zoom {
let scalePower = display.scalePower + factor;
scalePower = Math.max(scalePower, SCALE_POWER_MIN);
scalePower = Math.min(scalePower, SCALE_POWER_MAX);
this.sim.display.scalePower = scalePower;
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();
display.viewOrigin = sub({x, y}, div({x: display.width, y: display.height}, 2));
// TODO: If paused, set panning velocity on resume
// if (this.sim.playing && velocity) {
if (velocity) {
this.sim.panning = {
velocity: { ...velocity },
paused: !this.sim.playing,
};
this.sim.panning.setVelocity(velocity);
}
const e = new CustomEvent(EVENT_ZOOM);