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

Compare commits

base: lentil:3b2122d2e6fd73533136356de1a9dbef8d9c1595
Branches Tags
lentil:main
lentil:dev
..
compare: lentil:4bb91d664d71a10c6df626d3383ba5d7160b77fe
Branches Tags
lentil:main
lentil:dev

No commits in common. "3b2122d2e6fd73533136356de1a9dbef8d9c1595" and "4bb91d664d71a10c6df626d3383ba5d7160b77fe" have entirely different histories.
3b2122d2e6 ... 4bb91d664d

7 changed files with 35 additions and 182 deletions
Show Stats Expand all files Collapse all files

15
config.js
View File

@ -4,26 +4,16 @@ 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-1;
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-5;
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;
@ -31,7 +21,8 @@ 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 GRAVITATIONAL_CONSTANT = 1E5;
export const PAN_VELOCITY_SCALE_FACTOR = 1E-3;
export const PAN_DRAG = 1;
export const DRAGGABLE_ELEMENT_CLASSNAME = 'lhg-draggable-element';

27
display.js
View File

@ -3,18 +3,12 @@ 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 {
@ -83,7 +77,6 @@ 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;
@ -146,11 +139,9 @@ export class Display {
ctx.fill();
// Draw arrow for the velocity
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;
const style = VELOCITY_VECTOR_COLOR === 'object color' ? ctx.fillStyle : VELOCITY_VECTOR_COLOR;
this.drawArrow(x, y, endVx, endVy, {
style,
width: VELOCITY_VECTOR_WIDTH,
@ -158,22 +149,8 @@ export class Display {
fill: false,
ifShort: 'head'
});
}
// 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'
});
}
// TODO: Draw arrow for acceleration
}
drawObjects() {

15
object.js
View File

@ -6,8 +6,6 @@ export class MassObject {
velocity = {x: 0, y: 0};
color = {r: undefined, g: undefined, b: undefined};
created = undefined;
forces = []; // [{x, y}]
active = false;
constructor(x, y, index) {
this.index = index;
@ -27,18 +25,5 @@ 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,
};
}
}

85
objects.js
View File

@ -3,7 +3,6 @@ import {
MASS_CREATION_RATE,
DISPLAY_OBJECTS_INFO,
MOTION_TIME_SCALE,
GRAVITATIONAL_CONSTANT,
} from './config.js';
export class Objects {
@ -24,12 +23,8 @@ export class Objects {
}
doneCreatingObject() {
if (this.creatingObject !== undefined) {
const obj = this.objects[this.creatingObject];
obj.active = true;
this.creatingObject = undefined;
}
}
object(i) {
return this.objects[i];
@ -54,26 +49,6 @@ 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];
@ -105,7 +80,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.getSelectedOrCreating();
const obj = this.sim.objects.getSelectedOrCreating();
if (obj !== undefined) {
obj.position.x = x;
obj.position.y = y;
@ -114,29 +89,6 @@ 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];
if (!A.active || !B.active) continue;
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
@ -147,41 +99,12 @@ export class Objects {
}
if (this.sim.playing) {
// Calculate forces due to gravity.
this.computeForces(elapsedTime);
// Generate predicted positions (Velocity verlet method)
// Update positions. Simple Euler method for now.
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
obj.currentAcceleration = {...obj.acceleration};
obj.projectedPosition = {
x: obj.position.x + MOTION_TIME_SCALE * elapsedTime *
(obj.velocity.x + 1/2 * obj.currentAcceleration.x * elapsedTime),
y: obj.position.y + MOTION_TIME_SCALE * elapsedTime *
(obj.velocity.y + 1/2 * obj.currentAcceleration.y * elapsedTime),
};
obj.currentPosition = {...obj.position};
obj.position = obj.projectedPosition;
obj.position.x += obj.velocity.x * MOTION_TIME_SCALE;
obj.position.y += obj.velocity.y * MOTION_TIME_SCALE;
}
// Recompute forces
this.computeForces();
// Average first and second predicted accelerations
for (let i = 0; i < this.objects.length; i++) {
const obj = this.objects[i];
const acceleration = {...obj.acceleration};
const meanAcceleration = {
x: (obj.currentAcceleration.x + acceleration.x) / 2,
y: (obj.currentAcceleration.y + acceleration.y) / 2,
};
obj.velocity.x += meanAcceleration.x * MOTION_TIME_SCALE * elapsedTime;
obj.velocity.y += meanAcceleration.y * MOTION_TIME_SCALE * elapsedTime;
obj.position.x = obj.currentPosition.x + obj.velocity.x * MOTION_TIME_SCALE * elapsedTime;
obj.position.y = obj.currentPosition.y + obj.velocity.y * MOTION_TIME_SCALE * elapsedTime;
}
}
// Display objects info

17
pointer.js
View File

@ -68,7 +68,7 @@ export class Pointer {
},
};
} else {
this.handlePointerDown({x: e.clientX, y: e.clientY});
this.handlePointerDown(this.sim.screenToSim(e.clientX, e.clientY));
}
});
@ -79,7 +79,7 @@ export class Pointer {
this.draggingElement = undefined;
this.lastPosition = {x: undefined, y: undefined};
} else {
this.handlePointerUp({x: e.clientX, y: e.clientY});
this.handlePointerUp(this.sim.screenToSim(e.clientX, e.clientY));
}
});
@ -118,29 +118,24 @@ export class Pointer {
}
}
handlePointerDown({x: clientX, y: clientY}) {
handlePointerDown({x, y}) {
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: clientX, y: clientY},
pointerCurrent: {x: clientX, y: clientY},
pointerStart: {x, y},
pointerCurrent: {x, y},
velocity: this.getPointerVelocity(),
};
}
}
handlePointerUp({x: clientX, y: clientY}) {
handlePointerUp({x, y}) {
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;
this.display.scalePower += factor > 0 ? 1 : -1;
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,18 +10,19 @@ export class Zoom extends Tool {
const zoomOut = document.createElement('button');
const zoomIn = document.createElement('button');
const zoomAll = 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';
}
this.div.appendChild(zoomOut);
this.div.appendChild(zoomIn);
this.div.appendChild(document.createElement('br'));
this.div.appendChild(zoomAll);
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.innerHTML = '<h2>Zoom<br>-<br>Out</h2>';
zoomIn.innerHTML = '<h2>Zoom<br>+<br>In</h2>';
zoomOut.addEventListener('click', (e) => {
// Aim at center of view
@ -36,24 +37,5 @@ 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));
}
}
});
}
}