From 213525c3dd2ec2a1c06840710b6674c9798681f3 Mon Sep 17 00:00:00 2001 From: Ladd Date: Sat, 27 Dec 2025 21:20:24 -0600 Subject: [PATCH] improved panning and path traces --- display.js | 8 +++----- find | 6 +++++- index.html | 3 +-- pointer.js | 24 +++++++++--------------- simulator.js | 9 ++++++--- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/display.js b/display.js index 58095fb..745cf77 100644 --- a/display.js +++ b/display.js @@ -104,11 +104,9 @@ export class Display { ctx.lineWidth = PATH_TRACES_WIDTH / this.scale; ctx.beginPath(); let dash = false; - const skip = 1; - let skipped = 0; - for (let i = obj.history.length - 1; i >= 0; i--) { - if (++skipped < skip) continue; - skipped = 0; + for (let i = 0; i < obj.history.length; i++) { + // for (let i = obj.history.length - 1; i >= 0; i--) { + if (i % 2) continue; const {position} = obj.history[i]; const x = position.x; const y = position.y; diff --git a/find b/find index 0ee070c..9c9141a 100755 --- a/find +++ b/find @@ -1,2 +1,6 @@ #!/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 "$@" diff --git a/index.html b/index.html index d62df39..624a04d 100644 --- a/index.html +++ b/index.html @@ -59,8 +59,7 @@ div.lhg-toolbar { diff --git a/pointer.js b/pointer.js index 752ac0d..ad12534 100644 --- a/pointer.js +++ b/pointer.js @@ -33,7 +33,6 @@ export class Pointer { y: e.clientY, }; } else { - // const {x, y} = this.sim.screenToSim(e.clientX, e.clientY); this.handlePointerMove({x: e.clientX, y: e.clientY}); } }); @@ -67,7 +66,6 @@ export class Pointer { }); el.addEventListener('pointerup', e => { - this.clearPointerHistory(); if (this.draggingElement) { this.draggingElement.dragging = undefined; this.draggingElement = undefined; @@ -93,10 +91,9 @@ export class Pointer { const start = this.pointerHistory[0]; const end = this.pointerHistory[this.pointerHistory.length - 1]; const dt = (end.t - start.t) / 1000; - // Bonus scale factor for pointer power return { - x: (end.x - start.x) / dt * this.sim.display.scale, - y: (end.y - start.y) / dt * this.sim.display.scale, + x: (end.x - start.x) / dt, + y: (end.y - start.y) / dt, dt }; } @@ -125,9 +122,9 @@ export class Pointer { while (this.pointerHistory.length >= POINTER_HISTORY_SIZE) { this.pointerHistory.shift(); } - const v = this.getPointerVelocity(); - const a = this.getPointerAcceleration(); - this.pointerHistory.push({t, x, y, v, a}); + // const v = this.getPointerVelocity(); + // const a = this.getPointerAcceleration(); + this.pointerHistory.push({t, x, y}); } handlePointerDown({x: clientX, y: clientY}) { @@ -139,7 +136,7 @@ export class Pointer { } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) { this.panning = this.panning || {}; 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 // TODO: If e.touches.length > 1, user may be engaging pinch to zoom handlePointerMove({x: clientX, y: clientY}) { + this.updatePointer({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 @@ -171,13 +168,10 @@ export class Pointer { } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) { if (this.panning?.gathering) { - this.updatePointer({x: clientX, y: clientY}); const velocity = this.getPointerVelocity(); - const acceleration = this.getPointerAcceleration(); // Convet to sim coordinates - // Let's try incorporating pointer acceleration - this.panning.velocity.x = velocity.x + acceleration.x * velocity.dt; - this.panning.velocity.y = velocity.y + acceleration.y * velocity.dt; + this.panning.velocity.x = velocity.x / this.sim.display.scale; + this.panning.velocity.y = velocity.y / this.sim.display.scale; } } } diff --git a/simulator.js b/simulator.js index 38ff023..6ad7db4 100644 --- a/simulator.js +++ b/simulator.js @@ -13,7 +13,6 @@ import { DISPLAY_CURRENT_SCALE, DISPLAY_CURRENT_MODE, MOTION_TIME_SCALE, - MODE_PAN_VIEW, } from './config.js'; export class Sim { @@ -29,10 +28,14 @@ export class Sim { toolbar = undefined; toolbar2 = undefined; - isCurrentMode = () => false; + isCurrentMode = () => undefined; + getCurrentMode = () => undefined; + setCurrentMode = () => undefined; getOption = () => undefined; + onModeEnter = () => undefined; + onModeLeave = () => undefined; - init(divId) { + constructor(divId) { this.divId = divId; const div = document.getElementById(this.divId); this.div = div;