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

acceleration first cut

Browse Source
This commit is contained in:
Lentil Hoffman 2025-12-26 20:55:43 -06:00
parent 4bb91d664d
commit 429357469d
Signed by: lentil
GPG Key ID: 0F5B99F3F4D0C087
7 changed files with 156 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
config.js
View File

@ -4,16 +4,26 @@ export const DISPLAY_CANVAS_SIZE = false;
export const DISPLAY_CURRENT_SCALE = true;
export const DISPLAY_CURRENT_MODE = false;
export const DISPLAY_VELOCITY_VECTORS = true;
export const DISPLAY_ACCELERATION_VECTORS = true;
export const MASS_CREATION_RATE = 0.001;
export const POINTER_HISTORY_SIZE = 15;
export const VELOCITY_VECTOR_SCALE = 0.1;
export const VELOCITY_VECTOR_COLOR = 'rgb(150, 150, 150)'; // optionally set to 'object color'
export const VELOCITY_VECTOR_WIDTH = 1.5;
export const VELOCITY_VECTOR_ARROWHEAD = true;
export const ACCELERATION_VECTOR_SCALE = 1E-4;
export const ACCELERATION_VECTOR_COLOR = 'rgb(0, 255, 0)'; // optionally set to 'object color'
export const ACCELERATION_VECTOR_WIDTH = 1.5;
export const ACCELERATION_VECTOR_ARROWHEAD = true;
export const MOTION_TIME_SCALE = 5E-4;
export const PAN_VELOCITY_SCALE_FACTOR = 1E-3;
export const ARROWHEAD_LENGTH = 7;
export const ARROWHEAD_WIDTH = 5;
export const MOTION_TIME_SCALE = 0.001;
export const OFFSCREEN_OBJECT_LINE_SCALE = 7;
export const OFFSCREEN_OBJECT_LINE_WIDTH = 2;
export const OFFSCREEN_OBJECT_ARROWHEAD_LENGTH = 15;
@ -21,8 +31,7 @@ export const ZOOM_IN_FACTOR = 1;
export const ZOOM_OUT_FACTOR = -1;
export const SCALE_POWER_MAX = 8;
export const SCALE_POWER_MIN = -8;
export const PAN_VELOCITY_SCALE_FACTOR = 1E-3;
export const PAN_DRAG = 1;
export const GRAVITATIONAL_CONSTANT = 1E6;
export const DRAGGABLE_ELEMENT_CLASSNAME = 'lhg-draggable-element';

45
display.js
View File

@ -3,12 +3,18 @@ import {
VELOCITY_VECTOR_COLOR,
VELOCITY_VECTOR_WIDTH,
VELOCITY_VECTOR_ARROWHEAD,
ACCELERATION_VECTOR_SCALE,
ACCELERATION_VECTOR_COLOR,
ACCELERATION_VECTOR_WIDTH,
ACCELERATION_VECTOR_ARROWHEAD,
ARROWHEAD_LENGTH,
ARROWHEAD_WIDTH,
OFFSCREEN_OBJECT_LINE_SCALE,
OFFSCREEN_OBJECT_LINE_WIDTH,
OFFSCREEN_OBJECT_ARROWHEAD_LENGTH,
DISPLAY_CANVAS_SIZE,
DISPLAY_VELOCITY_VECTORS,
DISPLAY_ACCELERATION_VECTORS,
} from './config.js';
export class Display {
@ -77,6 +83,7 @@ export class Display {
const {r, g, b} = obj.color;
const {x, y} = obj.position;
const {x: vx, y: vy} = obj.velocity;
const acceleration = obj.acceleration;
const radius = obj.radius;
const {height: H, width: W} = this;
const ox = this.viewOrigin.x;
@ -139,18 +146,34 @@ export class Display {
ctx.fill();
// Draw arrow for the velocity
const endVx = x + VELOCITY_VECTOR_SCALE * vx;
const endVy = y + VELOCITY_VECTOR_SCALE * vy;
const style = VELOCITY_VECTOR_COLOR === 'object color' ? ctx.fillStyle : VELOCITY_VECTOR_COLOR;
this.drawArrow(x, y, endVx, endVy, {
style,
width: VELOCITY_VECTOR_WIDTH,
arrowhead: VELOCITY_VECTOR_ARROWHEAD,
fill: false,
ifShort: 'head'
});
if (DISPLAY_VELOCITY_VECTORS) {
const endVx = x + VELOCITY_VECTOR_SCALE * vx;
const endVy = y + VELOCITY_VECTOR_SCALE * vy;
const style = VELOCITY_VECTOR_COLOR === 'object color' ?
ctx.fillStyle : VELOCITY_VECTOR_COLOR;
this.drawArrow(x, y, endVx, endVy, {
style,
width: VELOCITY_VECTOR_WIDTH,
arrowhead: VELOCITY_VECTOR_ARROWHEAD,
fill: false,
ifShort: 'head'
});
}
// TODO: Draw arrow for acceleration
// Draw arrow for acceleration
if (DISPLAY_ACCELERATION_VECTORS) {
const endAx = x + ACCELERATION_VECTOR_SCALE * acceleration.x;
const endAy = y + ACCELERATION_VECTOR_SCALE * acceleration.y;
const style = ACCELERATION_VECTOR_COLOR === 'object color' ?
ctx.fillStyle : ACCELERATION_VECTOR_COLOR;
this.drawArrow(x, y, endAx, endAy, {
style,
width: ACCELERATION_VECTOR_WIDTH,
arrowhead: ACCELERATION_VECTOR_ARROWHEAD,
fill: false,
ifShort: 'tail'
});
}
}
drawObjects() {

14
object.js
View File

@ -6,6 +6,7 @@ export class MassObject {
velocity = {x: 0, y: 0};
color = {r: undefined, g: undefined, b: undefined};
created = undefined;
forces = []; // [{x, y}]
constructor(x, y, index) {
this.index = index;
@ -25,5 +26,18 @@ export class MassObject {
// radius should be proportional to cube root of mass
return Math.pow(this.mass / this.density, 1/3);
}
get acceleration() {
let ax = 0;
let ay = 0;
for (let {x, y} of this.forces) {
ax += x;
ay += y;
}
return {
x: ax / this.mass,
y: ay / this.mass,
};
}
}

60
objects.js
View File

@ -3,6 +3,7 @@ import {
MASS_CREATION_RATE,
DISPLAY_OBJECTS_INFO,
MOTION_TIME_SCALE,
GRAVITATIONAL_CONSTANT,
} from './config.js';
export class Objects {
@ -49,6 +50,26 @@ export class Objects {
return this.objects.length;
}
get boundingBox() {
const box = {
start: {x: undefined, y: undefined},
end: {x: undefined, y: undefined},
};
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
if (box.start.x === undefined) {
box.start = {...obj.position};
box.end = {...obj.position};
} else {
if (obj.position.x < box.start.x) box.start.x = obj.position.x;
if (obj.position.x > box.end.x) box.end.x = obj.position.x;
if (obj.position.y < box.start.y) box.start.y = obj.position.y;
if (obj.position.y > box.end.y) box.end.y = obj.position.y;
}
}
return box;
}
objectAtLocation(x, y) {
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
@ -80,7 +101,7 @@ export class Objects {
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
const obj = this.sim.objects.getSelectedOrCreating();
const obj = this.getSelectedOrCreating();
if (obj !== undefined) {
obj.position.x = x;
obj.position.y = y;
@ -89,6 +110,28 @@ export class Objects {
}
}
computeForces(elapsedTime) {
if (this.objects.length < 2) return;
for (let i = 0; i < this.objects.length; i++) {
this.objects[i].forces = [];
}
for (let i = 0; i < this.objects.length; i++) {
const A = this.objects[i];
for (let j = i + 1; j < this.objects.length; j++) {
const B = this.objects[j];
const dx = (B.position.x - A.position.x);
const dy = (B.position.y - A.position.y);
const dSquared = dx ** 2 + dy ** 2;
const d = Math.sqrt(dSquared);
const F = GRAVITATIONAL_CONSTANT * A.mass * B.mass / dSquared;
const Fx = F * dx / d;
const Fy = F * dy / d;
A.forces.push({ x: Fx, y: Fy });
B.forces.push({ x: -Fx, y: -Fy });
}
}
}
computeFrame(elapsedTime) {
// If we're creating an object, increment its mass
// with the mass creation rate accelerating over time
@ -99,11 +142,22 @@ export class Objects {
}
if (this.sim.playing) {
// Calculate forces due to gravity.
this.computeForces(elapsedTime);
// Update velocities. Simple euler method for now.
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
const acceleration = obj.acceleration;
obj.velocity.x += acceleration.x * MOTION_TIME_SCALE * elapsedTime;
obj.velocity.y += acceleration.y * MOTION_TIME_SCALE * elapsedTime;
}
// Update positions. Simple Euler method for now.
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
obj.position.x += obj.velocity.x * MOTION_TIME_SCALE;
obj.position.y += obj.velocity.y * MOTION_TIME_SCALE;
obj.position.x += obj.velocity.x * MOTION_TIME_SCALE * elapsedTime;
obj.position.y += obj.velocity.y * MOTION_TIME_SCALE * elapsedTime;
}
}

17
pointer.js
View File

@ -68,7 +68,7 @@ export class Pointer {
},
};
} else {
this.handlePointerDown(this.sim.screenToSim(e.clientX, e.clientY));
this.handlePointerDown({x: e.clientX, y: e.clientY});
}
});
@ -79,7 +79,7 @@ export class Pointer {
this.draggingElement = undefined;
this.lastPosition = {x: undefined, y: undefined};
} else {
this.handlePointerUp(this.sim.screenToSim(e.clientX, e.clientY));
this.handlePointerUp({x: e.clientX, y: e.clientY});
}
});
@ -118,24 +118,29 @@ export class Pointer {
}
}
handlePointerDown({x, y}) {
handlePointerDown({x: clientX, y: clientY}) {
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
const {x, y} = this.sim.screenToSim(clientX, clientY)
this.sim.objects.handlePointerDown({x, y});
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
this.panning = {
gathering: true,
viewOriginStart: this.sim.display.viewOrigin,
pointerStart: {x, y},
pointerCurrent: {x, y},
pointerStart: {x: clientX, y: clientY},
pointerCurrent: {x: clientX, y: clientY},
velocity: this.getPointerVelocity(),
};
}
}
handlePointerUp({x, y}) {
handlePointerUp({x: clientX, y: clientY}) {
this.clearPointerHistory();
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)) {
if (this.panning?.gathering) {
this.panning.gathering = false;

2
simulator.js
View File

@ -58,7 +58,7 @@ export class 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
this.display.scalePower += factor > 0 ? 1 : -1;
this.display.scalePower += factor;
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

36
tool/zoom.js
View File

@ -10,19 +10,18 @@ export class Zoom extends Tool {
const zoomOut = document.createElement('button');
const zoomIn = document.createElement('button');
for (let b of [zoomIn, zoomOut]) {
// b.style.width = '100px';
// b.style.height = '50px';
// b.style['padding-left'] = '25px';
// b.style['padding-right'] = '25px';
}
const zoomAll = document.createElement('button');
this.div.appendChild(zoomOut);
this.div.appendChild(zoomIn);
this.div.appendChild(document.createElement('br'));
this.div.appendChild(zoomAll);
zoomOut.innerHTML = '<h2>Zoom<br>-<br>Out</h2>';
zoomIn.innerHTML = '<h2>Zoom<br>+<br>In</h2>';
zoomAll.classList.add('wide');
zoomOut.innerHTML = '<h2>Zoom<br>Out</h2>';
zoomIn.innerHTML = '<h2>Zoom<br>In</h2>';
zoomAll.innerHTML = '<h2>Zoom to Fit</h2>';
zoomOut.addEventListener('click', (e) => {
// Aim at center of view
@ -37,5 +36,24 @@ export class Zoom extends Tool {
const y = this.sim.display.height * this.sim.display.scale / 2;
this.sim.scheduleZoom({x, y}, ZOOM_IN_FACTOR);
});
zoomAll.addEventListener('click', (e) => {
// 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;
if (box.start.x !== box.end.x && box.start.y !== box.end.y) {
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);
if (biggerRatio <= 1) {
const base2Ratio = Math.log(1/biggerRatio) / Math.log(2);
this.sim.scheduleZoom({x, y}, Math.floor(base2Ratio));
} else {
const base2Ratio = Math.log(1/biggerRatio) / Math.log(2);
this.sim.scheduleZoom({x, y}, Math.ceil(base2Ratio));
}
}
});
}
}