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

Compare commits

base: lentil:4bb91d664d71a10c6df626d3383ba5d7160b77fe
Branches Tags
lentil:main
lentil:dev
..
compare: lentil:02b3f9a913ff5ffdde505c29ad0e3f90a73023e7
Branches Tags
lentil:main
lentil:dev

No commits in common. "4bb91d664d71a10c6df626d3383ba5d7160b77fe" and "02b3f9a913ff5ffdde505c29ad0e3f90a73023e7" have entirely different histories.
4bb91d664d ... 02b3f9a913

12 changed files with 93 additions and 321 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1 +1 @@
*.sw[po]
*.swp

24
config.js
View File

@ -1,13 +1,9 @@
export const MASS_CREATION_RATE = 0.001;
export const DISPLAY_OBJECTS_INFO = false;
export const DISPLAY_CURSOR_INFO = false;
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 MASS_CREATION_RATE = 0.001;
export const POINTER_HISTORY_SIZE = 15;
export const VELOCITY_VECTOR_SCALE = 0.1;
export const POINTER_HISTORY_SIZE = 20;
export const VELOCITY_VECTOR_SCALE = 0.2;
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;
@ -17,14 +13,8 @@ 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;
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 ZOOM_IN_FACTOR = 2;
export const ZOOM_OUT_FACTOR = 0.5;
export const SCALE_MAX = 256;
export const SCALE_MIN = 1/256;
export const DRAGGABLE_ELEMENT_CLASSNAME = 'lhg-draggable-element';
export const MODE_MASS_GENERATION = 'mass-gen';
export const MODE_PAN_VIEW = 'pan-view';

11
display.js
View File

@ -8,12 +8,11 @@ import {
OFFSCREEN_OBJECT_LINE_SCALE,
OFFSCREEN_OBJECT_LINE_WIDTH,
OFFSCREEN_OBJECT_ARROWHEAD_LENGTH,
DISPLAY_CANVAS_SIZE,
} from './config.js';
export class Display {
sim = undefined;
scalePower = 0;
scale = 1;
viewOrigin = {x: 0, y: 0};
constructor(sim) {
@ -30,10 +29,6 @@ export class Display {
window.addEventListener('resize', () => this.fullscreen());
}
get scale() {
return 2 ** this.scalePower;
}
get ctx() {
const ctx = this.canvas.getContext("2d");
ctx.resetTransform();
@ -60,9 +55,7 @@ export class Display {
fullscreen() {
this.canvas.width = document.documentElement.clientWidth;
this.canvas.height = document.documentElement.clientHeight;
if (DISPLAY_CANVAS_SIZE) {
this.sim.info['Canvas'] = `${this.canvas.width} x ${this.canvas.height}`;
}
// this.info['Canvas'] = `${this.canvas.width} x ${this.canvas.height}`;
}
fillCanvas() {

11
index.html
View File

@ -20,17 +20,6 @@ div[id=simulator] {
left: 0;
width: 100%;
}
button {
width: 8em;
padding-left: 0.5em;
padding-left: 0.5em;
}
button.wide {
width: 16em;
}
</style>
<script type="module">
import { Sim } from './simulator.js';

13
objects.js
View File

@ -60,6 +60,7 @@ export class Objects {
}
}
handlePointerDown({x, y}) {
// If pointer is touching an object, select the object
const touchingObject = this.objectAtLocation(x, y);
@ -77,18 +78,6 @@ export class Objects {
this.deselect();
}
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();
if (obj !== undefined) {
obj.position.x = x;
obj.position.y = y;
obj.velocity.x = vx;
obj.velocity.y = vy;
}
}
computeFrame(elapsedTime) {
// If we're creating an object, increment its mass
// with the mass creation rate accelerating over time

97
pointer.js
View File

@ -4,9 +4,6 @@ import {
ZOOM_OUT_FACTOR,
DISPLAY_CURSOR_INFO,
DRAGGABLE_ELEMENT_CLASSNAME,
MODE_MASS_GENERATION,
MODE_PAN_VIEW,
PAN_VELOCITY_SCALE_FACTOR,
} from './config.js';
function dispatchEvent(target, eventType, data) {
@ -19,8 +16,6 @@ export class Pointer {
pointerHistory = [];
draggingElement = undefined;
panning = undefined;
suppressClick = false;
constructor(sim) {
this.sim = sim;
@ -32,26 +27,26 @@ export class Pointer {
if (DISPLAY_CURSOR_INFO) {
this.sim.info['pointermove'] = [`${e.clientX}, `, `${e.clientY}`];
}
if (this.draggingElement) {
// e.preventDefault();
this.draggingElement.dragging.pointerEnd = {
x: e.clientX,
y: e.clientY,
};
} else {
// const {x, y} = this.sim.screenToSim(e.clientX, e.clientY);
this.handlePointerMove({x: e.clientX, y: e.clientY});
const {x, y} = this.sim.screenToSim(e.clientX, e.clientY);
this.handlePointerMove({x, y});
}
});
el.addEventListener('pointerdown', e => {
// If this is a child of a draggable element, handle dragging
// e.preventDefault();
let target = e.target;
while (target && !target.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
target = target.parentElement;
}
if (target?.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
// e.preventDefault();
this.draggingElement = target;
this.draggingElement.dragging = {
elementStart: {
@ -73,7 +68,7 @@ export class Pointer {
});
el.addEventListener('pointerup', e => {
this.clearPointerHistory();
// e.preventDefault();
if (this.draggingElement) {
this.draggingElement.dragging = undefined;
this.draggingElement = undefined;
@ -83,10 +78,16 @@ export class Pointer {
}
});
el.addEventListener('click', e => {
// e.preventDefault();
});
// Monitor wheel events
el.addEventListener('wheel', e => {
// e.preventDefault();
// Wheel scroll down => positive deltaY => ZOOM IN
const factor = e.deltaY > 0 ? ZOOM_IN_FACTOR : ZOOM_OUT_FACTOR;
this.sim.scheduleZoom({x: e.clientX, y: e.clientY}, factor);
this.sim.scheduleZoom(this.sim.screenToSim(e.clientX, e.clientY), factor);
});
}
@ -119,73 +120,31 @@ export class Pointer {
}
handlePointerDown({x, y}) {
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
this.clearPointerHistory();
this.updatePointer({x, y});
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},
velocity: this.getPointerVelocity(),
};
}
}
handlePointerUp({x, y}) {
this.clearPointerHistory();
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
// TODO: Conditional?
this.sim.objects.handlePointerUp({x, y});
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
if (this.panning?.gathering) {
this.panning.gathering = false;
}
}
}
// Handle cursor (mouse or touch) movement
// TODO: If e.touches.length > 1, user may be engaging pinch to zoom
handlePointerMove({x: clientX, y: clientY}) {
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
this.updatePointer({ x: clientX, y: clientY });
const {x, y} = this.sim.screenToSim(clientX, clientY);
const velocity = this.getPointerVelocity();
// Convert pointer velocity to sim internal scale
const vx = velocity.x / this.sim.display.scale;
const vy = velocity.y / this.sim.display.scale;
this.sim.objects.handlePointerMove({x, y, vx, vy});
handlePointerMove({x, y}) {
this.updatePointer({x, y});
const {x: vx, y: vy} = this.getPointerVelocity();
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
if (this.panning?.gathering) {
this.updatePointer({ x: clientX, y: clientY });
this.panning.pointerCurrent = {x: clientX, y: clientY};
this.panning.velocity = this.getPointerVelocity();
}
}
}
computeFrame(elapsedTime) {
// Add another entry for the current pointer position
if (this.pointerHistory?.length) {
const currentPointer = this.pointerHistory[this.pointerHistory.length - 1];
this.updatePointer(currentPointer);
}
// Apply update to viewOrigin based on panning
if (!this.sim.isCurrentMode(MODE_PAN_VIEW)) {
this.panning = undefined;
return;
}
if (this.panning) {
const {pointerStart, pointerCurrent, viewOriginStart, velocity} = this.sim.pointer.panning;
// Convert pointer velocity to sim internal scale
const vx = velocity.x / this.sim.display.scale;
const vy = velocity.y / this.sim.display.scale;
this.panning.viewOriginStart = this.sim.display.viewOrigin;
this.panning.pointerStart = pointerCurrent;
// const speed = Math.sqrt(velocity.x ** 2 + velocity.y ** 2);
this.sim.display.viewOrigin.x -= vx * elapsedTime * PAN_VELOCITY_SCALE_FACTOR;
this.sim.display.viewOrigin.y -= vy * elapsedTime * PAN_VELOCITY_SCALE_FACTOR;
// 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();
if (obj !== undefined) {
obj.position.x = x;
obj.position.y = y;
obj.velocity.x = vx;
obj.velocity.y = vy;
}
}
}

54
simulator.js
View File

@ -3,15 +3,8 @@ import { Overlay } from './overlay.js';
import { Pointer } from './pointer.js';
import { Objects } from './objects.js';
import { Toolbar } from './toolbar.js';
import { PlayPause } from './tool/play-pause.js';
import { Zoom } from './tool/zoom.js';
import { ModeSwitch } from './tool/modes.js';
import {
SCALE_POWER_MAX,
SCALE_POWER_MIN,
DISPLAY_CURRENT_SCALE,
DISPLAY_CURRENT_MODE,
} from './config.js';
import { PlayPause } from './tools/play-pause.js';
import { SCALE_MAX, SCALE_MIN} from './config.js';
export class Sim {
info = {};
@ -24,8 +17,6 @@ export class Sim {
pointer = undefined;
objects = undefined;
isCurrentMode = () => false;
init(divId) {
this.divId = divId;
const div = document.getElementById(this.divId);
@ -33,43 +24,32 @@ export class Sim {
this.display = new Display(this);
this.overlay = new Overlay(this);
this.objects = new Objects(this);
this.pointer = new Pointer(this);
this.objects = new Objects(this);
this.toolbar = new Toolbar(this);
// Set up toolbar
this.toolbar.addTool(new Zoom(this.toolbar));
this.toolbar.addTool(new PlayPause(this.toolbar));
this.toolbar.addTool(new ModeSwitch(this.toolbar));
// Initiate main loop
this.time = document.timeline.currentTime;
requestAnimationFrame(t => this.loop(t));
}
// It's better not to change the scale in the middle of possible frame calculations,
// so use this to schedule it and let the event loop pick it up.
scheduleZoom({x, y}, factor) {
this.nextZoom = {x, y, factor};
}
zoom({x: screenX, y: screenY, factor}) {
const {x, y} = this.screenToSim(screenX, screenY);
zoom({x, y, factor}) {
// 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;
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;
this.display.scale = this.display.scale * factor;
if (this.display.scale > SCALE_MAX) this.display.scale = SCALE_MAX;
if (this.display.scale < SCALE_MIN) this.display.scale = SCALE_MIN;
// compute coordinates of new view frame
this.display.viewOrigin.x = x - this.display.width / 2;
this.display.viewOrigin.y = y - this.display.height / 2;
this.pointer.clearPointerHistory();
if (this.pointer.panning) {
this.pointer.panning = undefined;
// TODO: Maybe rescale velocity
}
}
// Transform display coordinates to simulator coordinates using scale and viewOrigin
@ -89,30 +69,16 @@ export class Sim {
loop(currentTime) {
const elapsedTime = currentTime - this.time;
this.time = currentTime;
if (DISPLAY_CURRENT_MODE) {
this.info['Mode'] = this.getCurrentMode();
}
if (this.nextZoom) {
this.zoom(this.nextZoom);
this.nextZoom = undefined;
}
if (DISPLAY_CURRENT_SCALE) {
const scale = 2 ** Math.abs(this.display.scalePower);
this.info['Scale'] = this.display.scalePower >= 0 ? `${scale}` : `1/${scale}`;
}
this.pointer.computeFrame(elapsedTime);
this.info['scale'] = this.display.scale;
this.objects.computeFrame(elapsedTime);
this.overlay.updateDraggable();
this.overlay.renderInfo();
this.display.fillCanvas();
this.display.drawObjects();
this.overlay.updateDraggable();
this.overlay.renderInfo();
requestAnimationFrame(t => this.loop(t));
}
}

4
tool.js
View File

@ -17,8 +17,8 @@ export class Tool {
div.style.top = 0;
div.style.left = 0;
div.style.border = '1px #0fb solid';
div.style.margin = '25px';
div.style.padding = '25px';
div.style.margin = '5px';
div.style.padding = '5px';
div.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
}

66
tool/modes.js
View File

@ -1,66 +0,0 @@
// Mode Switcher
import { Tool } from '../tool.js';
import {
MODE_MASS_GENERATION,
MODE_PAN_VIEW,
} from '../config.js';
export class ModeSwitch extends Tool {
currentMode = undefined;
modes = [
[MODE_MASS_GENERATION, 'Generate Mass'],
[MODE_PAN_VIEW, 'Pan View'],
];
buttons = [];
constructor(toolbar) {
super(toolbar);
const [[currentModeID, _]] = this.modes;
this.currentMode = currentModeID;
const modesDiv = document.createElement('div');
const titleDiv = document.createElement('div');
this.div.appendChild(titleDiv);
this.div.appendChild(modesDiv);
titleDiv.innerHTML = `<h2>Modes</h2>`;
// Since we have a heading, we need to reduce top padding
this.div.style.paddingTop = '0px';
modesDiv.style.display = 'flex';
modesDiv.style.flexDirection = 'column';
for (let [modeID, modeTitle] of this.modes) {
const button = document.createElement('button');
this.buttons.push(button);
button.modeID = modeID;
modesDiv.appendChild(button);
button.innerHTML = `<h3>${modeTitle}</h3>`;
button.classList.add('wide');
button.addEventListener('click', (e) => {
if (this.currentMode !== modeID) {
this.currentMode = modeID;
this.setModesOpacity();
}
});
}
this.setModesOpacity();
// Add global method to get current mode / check mode
this.sim.getCurrentMode = () => this.currentMode;
this.sim.isCurrentMode = (modeID) => modeID === this.currentMode;
}
setModesOpacity() {
for (let button of this.buttons) {
button.style.opacity = button.modeID === this.currentMode ? '50%' : '100%';
}
}
// TODO: on enter / on leave mode / some sort of callbacks on mode transitions
}

47
tool/play-pause.js
View File

@ -1,47 +0,0 @@
import { Tool } from '../tool.js';
export class PlayPause extends Tool {
playHTML = '<h2>Play</h2>';
pauseHTML = '<h2>Pause</h2>';
constructor(toolbar) {
super(toolbar);
const pauseButton = document.createElement('button');
const playButton = document.createElement('button');
this.div.appendChild(pauseButton);
this.div.appendChild(playButton);
pauseButton.innerHTML = this.pauseHTML;
playButton.innerHTML = this.playHTML;
pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
playButton.style.opacity = this.sim.playing ? '50%' : '100%';
pauseButton.addEventListener('click', (e) => {
e.stopPropagation();
if (this.playing) {
this.playing = false;
pauseButton.style.opacity = '50%';
playButton.style.opacity = '100%';
}
});
playButton.addEventListener('click', (e) => {
if (!this.playing) {
this.playing = true;
pauseButton.style.opacity = '100%';
playButton.style.opacity = '50%';
}
});
}
get playing() {
return this.sim.playing;
}
set playing(playing) {
return this.sim.playing = playing;
}
}

41
tool/zoom.js
View File

@ -1,41 +0,0 @@
import { Tool } from '../tool.js';
import {
ZOOM_IN_FACTOR,
ZOOM_OUT_FACTOR,
} from '../config.js';
export class Zoom extends Tool {
constructor(toolbar) {
super(toolbar);
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';
}
this.div.appendChild(zoomOut);
this.div.appendChild(zoomIn);
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
const x = this.sim.display.width * this.sim.display.scale / 2;
const y = this.sim.display.height * this.sim.display.scale / 2;
this.sim.scheduleZoom({x, y}, ZOOM_OUT_FACTOR);
});
zoomIn.addEventListener('click', (e) => {
// Aim at center of view
const x = this.sim.display.width * this.sim.display.scale / 2;
const y = this.sim.display.height * this.sim.display.scale / 2;
this.sim.scheduleZoom({x, y}, ZOOM_IN_FACTOR);
});
}
}

40
tools/play-pause.js Normal file
View File

@ -0,0 +1,40 @@
import { Tool } from '../tool.js';
export class PlayPause extends Tool {
playHTML = 'Play';
pauseHTML = 'Pause';
constructor(toolbar) {
super(toolbar);
// For now, use a regular button
const button = document.createElement('button');
button.style.width = '50px';
button.style.height = '50px';
this.div.appendChild(button);
if (this.playing) {
button.innerHTML = this.pauseHTML;
} else {
button.innerHTML = this.playHTML;
}
button.addEventListener('click', (e) => {
e.stopPropagation();
if (this.playing) {
button.innerHTML = this.playHTML;
this.playing = false;
} else {
button.innerHTML = this.pauseHTML;
this.playing = true;
}
});
}
get playing() {
return this.sim.playing;
}
set playing(playing) {
return this.sim.playing = playing;
}
}