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

improved panning and path traces

Browse Source
This commit is contained in:
Ladd 2025-12-27 21:20:24 -06:00
parent ca34843148
commit 213525c3dd
5 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
display.js
View File

@ -104,11 +104,9 @@ export class Display {
ctx.lineWidth = PATH_TRACES_WIDTH / this.scale; ctx.lineWidth = PATH_TRACES_WIDTH / this.scale;
ctx.beginPath(); ctx.beginPath();
let dash = false; let dash = false;
const skip = 1; for (let i = 0; i < obj.history.length; i++) {
let skipped = 0; // for (let i = obj.history.length - 1; i >= 0; i--) {
for (let i = obj.history.length - 1; i >= 0; i--) { if (i % 2) continue;
if (++skipped < skip) continue;
skipped = 0;
const {position} = obj.history[i]; const {position} = obj.history[i];
const x = position.x; const x = position.x;
const y = position.y; const y = position.y;

6
find
View File

@ -1,2 +1,6 @@
#!/bin/env bash #!/bin/env bash
find . -not -path ".git" -name "*.html" -or -name "*.js" -print0 | xargs -0 grep -n --color "$@" find . \
-type f \
\( -path ".git" -o -path '*/node_modules/*' \) -prune -o \
\( -name "*.html" -o -name "*.js" \) -print0 \
| xargs -0 grep -n --color "$@"

3
index.html
View File

@ -59,8 +59,7 @@ div.lhg-toolbar {
</style> </style>
<script type="module"> <script type="module">
import { Sim } from './simulator.js'; import { Sim } from './simulator.js';
const sim = new Sim(); const sim = new Sim('simulator');
sim.init('simulator');
</script> </script>
</head> </head>
<body> <body>

24
pointer.js
View File

@ -33,7 +33,6 @@ export class Pointer {
y: e.clientY, y: e.clientY,
}; };
} else { } else {
// const {x, y} = this.sim.screenToSim(e.clientX, e.clientY);
this.handlePointerMove({x: e.clientX, y: e.clientY}); this.handlePointerMove({x: e.clientX, y: e.clientY});
} }
}); });
@ -67,7 +66,6 @@ export class Pointer {
}); });
el.addEventListener('pointerup', e => { el.addEventListener('pointerup', e => {
this.clearPointerHistory();
if (this.draggingElement) { if (this.draggingElement) {
this.draggingElement.dragging = undefined; this.draggingElement.dragging = undefined;
this.draggingElement = undefined; this.draggingElement = undefined;
@ -93,10 +91,9 @@ export class Pointer {
const start = this.pointerHistory[0]; const start = this.pointerHistory[0];
const end = this.pointerHistory[this.pointerHistory.length - 1]; const end = this.pointerHistory[this.pointerHistory.length - 1];
const dt = (end.t - start.t) / 1000; const dt = (end.t - start.t) / 1000;
// Bonus scale factor for pointer power
return { return {
x: (end.x - start.x) / dt * this.sim.display.scale, x: (end.x - start.x) / dt,
y: (end.y - start.y) / dt * this.sim.display.scale, y: (end.y - start.y) / dt,
dt dt
}; };
} }
@ -125,9 +122,9 @@ export class Pointer {
while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) { while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) {
this.pointerHistory.shift(); this.pointerHistory.shift();
} }
const v = this.getPointerVelocity(); // const v = this.getPointerVelocity();
const a = this.getPointerAcceleration(); // const a = this.getPointerAcceleration();
this.pointerHistory.push({t, x, y, v, a}); this.pointerHistory.push({t, x, y});
} }
handlePointerDown({x: clientX, y: clientY}) { handlePointerDown({x: clientX, y: clientY}) {
@ -139,7 +136,7 @@ export class Pointer {
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) { } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
this.panning = this.panning || {}; this.panning = this.panning || {};
this.panning.gathering = true; this.panning.gathering = true;
this.panning.velocity = {x: 0, y: 0}; this.panning.velocity = this.panning.velocity || {x: 0, y: 0};
} }
} }
@ -160,8 +157,8 @@ export class Pointer {
// Handle cursor (mouse or touch) movement // Handle cursor (mouse or touch) movement
// TODO: If e.touches.length > 1, user may be engaging pinch to zoom // TODO: If e.touches.length > 1, user may be engaging pinch to zoom
handlePointerMove({x: clientX, y: clientY}) { handlePointerMove({x: clientX, y: clientY}) {
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
this.updatePointer({x: clientX, y: clientY}); this.updatePointer({x: clientX, y: clientY});
if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
const {x, y} = this.sim.screenToSim(clientX, clientY); const {x, y} = this.sim.screenToSim(clientX, clientY);
const velocity = this.getPointerVelocity(); const velocity = this.getPointerVelocity();
// Convert pointer velocity to sim internal scale // Convert pointer velocity to sim internal scale
@ -171,13 +168,10 @@ export class Pointer {
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) { } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
if (this.panning?.gathering) { if (this.panning?.gathering) {
this.updatePointer({x: clientX, y: clientY});
const velocity = this.getPointerVelocity(); const velocity = this.getPointerVelocity();
const acceleration = this.getPointerAcceleration();
// Convet to sim coordinates // Convet to sim coordinates
// Let's try incorporating pointer acceleration this.panning.velocity.x = velocity.x / this.sim.display.scale;
this.panning.velocity.x = velocity.x + acceleration.x * velocity.dt; this.panning.velocity.y = velocity.y / this.sim.display.scale;
this.panning.velocity.y = velocity.y + acceleration.y * velocity.dt;
} }
} }
} }

9
simulator.js
View File

@ -13,7 +13,6 @@ import {
DISPLAY_CURRENT_SCALE, DISPLAY_CURRENT_SCALE,
DISPLAY_CURRENT_MODE, DISPLAY_CURRENT_MODE,
MOTION_TIME_SCALE, MOTION_TIME_SCALE,
MODE_PAN_VIEW,
} from './config.js'; } from './config.js';
export class Sim { export class Sim {
@ -29,10 +28,14 @@ export class Sim {
toolbar = undefined; toolbar = undefined;
toolbar2 = undefined; toolbar2 = undefined;
isCurrentMode = () => false; isCurrentMode = () => undefined;
getCurrentMode = () => undefined;
setCurrentMode = () => undefined;
getOption = () => undefined; getOption = () => undefined;
onModeEnter = () => undefined;
onModeLeave = () => undefined;
init(divId) { constructor(divId) {
this.divId = divId; this.divId = divId;
const div = document.getElementById(this.divId); const div = document.getElementById(this.divId);
this.div = div; this.div = div;