Adds the ability to move to a target along a path

Author: Bryan Parker

src/animations/animations.ts

@@ -148,32 +148,88 @@ export function isTargetAnimation<T>(o: any): o is TargetAnimation<T> {
 }
 
 
-type MoveToTargetArgs = { target: Shape, destination: Shape | Point } & AnimationArgs;
+type MoveToTargetArgs = { target: Shape, destination: Shape | Point, alongPath?: Point[] | PointsAware } & AnimationArgs;
 
 export class MoveToTarget extends Animation implements TargetAnimation<Shape> {
     private _target: Shape;
     private startLocation: Point
     private endLocation: Point
 
-    constructor({ target, destination, ...baseConfig }: MoveToTargetArgs) {
+    private pathObj?: Point[] | PointsAware;
+    private path?: Point[];
+
+    constructor({ target, destination, alongPath, ...baseConfig }: MoveToTargetArgs) {
         super(baseConfig);
 
         this._target = target;
         this.startLocation = this._target.center();
         this.endLocation = isShape(destination) ? destination.center() : destination;
+        this.pathObj = alongPath;
     }
 
     update(pctComplete: number, reversing: boolean): Animatable[] {
-        const [start, end] = reversing ? [this.endLocation, this.startLocation] : [this.startLocation, this.endLocation];
+        // const [start, end] = reversing ? [this.endLocation, this.startLocation] : [this.startLocation, this.endLocation];
 
-        const [nX, nY] = this.updateWithEase(start, end, pctComplete);
+        // const [nX, nY] = this.updateWithEase(start, end, pctComplete);
+        const [nX, nY] = this.getNewPoint(pctComplete, reversing);
         this._target.moveCenter([nX, nY]);
 
         return [this._target];
     }
 
+    private getNewPoint(pctComplete: number, reversing: boolean): Point {
+        if (this.path && this.path.length > 0) {
+            const [from, to] = reversing ? [this.path.length, 0] : [0, this.path.length];
+
+            const idxWithEase = this.updateWithEase(from, to, pctComplete);
+            const idx = Math.floor(idxWithEase);
+
+            if (idx < this.path.length - 1) {
+                const [pt, nextPt] = [this.path[idx], this.path[idx + 1]];
+
+                return arrLerp(pt, nextPt, idxWithEase - idx) as Point;
+            } else {
+                return this.path[Math.min(idx, this.path.length - 1)];
+            }
+        } else {
+            const [start, end] = reversing ? [this.endLocation, this.startLocation] : [this.startLocation, this.endLocation];
+            return this.updateWithEase(start, end, pctComplete) as Point;
+        }
+    }
+
     protected initState(): void {
         this.startLocation = this._target.center();
+
+        if (this.pathObj) {
+            const pathPoints = Array.isArray(this.pathObj) ? this.pathObj : this.pathObj.points();
+
+            // Find the closest point along the path to the start and end locations
+            let [minStartDist, pathStart] = [Number.MAX_VALUE, -1];
+            let [minEndDist, pathEnd] = [Number.MAX_VALUE, -1];
+
+            for (let i = 0; i < pathPoints.length; i++) {
+                const pt = pathPoints[i];
+                const ds = distance(pt, this.startLocation);
+                const dt = distance(pt, this.endLocation);
+
+                if (ds < minStartDist) {
+                    minStartDist = ds;
+                    pathStart = i;
+                }
+
+                if (dt < minEndDist) {
+                    minEndDist = dt;
+                    pathEnd = i;
+                }
+            }
+
+            let segment = pathPoints.slice(Math.min(pathStart, pathEnd), Math.max(pathStart, pathEnd));
+            if (pathStart > pathEnd) {
+                segment = segment.toReversed();
+            }
+
+            this.path = segment;
+        }
     }
 
     resetState(): void {

src/shapes/line_through_points.ts

@@ -5,9 +5,12 @@ import * as math from '@/math';
 
 
 export class LineThroughPoints extends Line {
+    private readonly _length: number;
+
     constructor({ p1, p2, length = 3, ...styleArgs }: { p1: Point; p2: Point; length: number; } & Prettify<StyleArgs>) {
         const [from, to] = LineThroughPoints.linePoints(p1, p2, length);
         super({ from, to, ...styleArgs });
+        this._length = length;
     }
 
     private static linePoints(p1: Point, p2: Point, length: number): [Point, Point] {
@@ -26,4 +29,8 @@ export class LineThroughPoints extends Line {
 
         return [e1, e2] as [Point, Point];
     }
+
+    changePoints(p1: Point, p2: Point) {
+        this.setPoints(LineThroughPoints.linePoints(p1, p2, this._length));
+    }
 }

src/shapes/primitives/point_shape.ts

@@ -167,6 +167,10 @@ export class PointShape implements Shape, Styleable, PointsAware {
         return this._points;
     }
 
+    public setPoints(points: Point[]) {
+        this._points = points;
+    }
+
     computedPoints(): Point[] {
         const [cX, cY] = this.center();
         const computedPoints = [];

test-cases/tests.js

@@ -873,17 +873,67 @@ export class VisualTests extends TestSuite {
     //     new TestScene({ canvas: new HtmlCanvas(canvas), staticScene: true }).compose().render();
     // }
 
-    testCanvasWidth(canvas, done) {
+    // testCanvasWidth(canvas, done) {
+    //     class TestScene extends Scene {
+    //         compose() {
+    //             // const square = new Square();
+    //             // this.add(square);
+    //             this.add(new Axes());
+
+    //             return this;
+    //         }
+    //     }
+
+    //     new TestScene({ canvas: new HtmlCanvas(canvas), staticScene: true }).compose().render();
+    // }
+
+    testMoveAlongPathToDestination(canvas, done) {
         class TestScene extends Scene {
             compose() {
-                // const square = new Square();
-                // this.add(square);
-                this.add(new Axes());
+                const ax = new Axes({
+                    xRange: [0, 6],
+                    yRange: [0, 16],
+                    xLength: 10,
+                    yLength: 6,
+                    yAxisTickStep: 2,
+                });
+
+                const plot = ax.plot(x => x * x);
+                const p = ax.relativePoint([2, 4]);
+                const q = ax.relativePoint([3, 9])
+        
+                const pd = new Dot({ pt: p });
+                const qd = new Dot({ pt: q });
+                const t = new TangentLine({ shape: plot, x: p[0], length: 5, lineColor: Colors.pink() });
+                const s = new LineThroughPoints({ p1: p, p2: q, length: 5, lineColor: Colors.blue() });
+
+                this.add(
+                    ax,
+                    plot,
+                    t,
+                    s,
+                    pd,
+                    qd,
+                );
+
+                // this.add(new MoveAlongPath({ target: qd, path: plot, duration: 2000 }));
+                class Updater extends Animation {
+                    update(pctComplete, reversing) {
+                        s.changePoints(p, qd.center());
+
+                        return [];
+                    }
+                }
+
+                this.add(
+                    new MoveToTarget({ target: qd, destination: pd, alongPath: plot, duration: 2000, easing: Easing.linear, repeat: true, }),
+                    new Updater({ duration: 2000, easing: Easing.linear, repeat: true, }),
+                );
 
                 return this;
             }
         }
 
-        new TestScene({ canvas: new HtmlCanvas(canvas), staticScene: true }).compose().render();
+        new TestScene({ canvas: new HtmlCanvas(canvas), staticScene: false, }).compose().render();
     }
 }

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
     "module": "ESNext",
     "baseUrl": ".",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "ESNext.Array", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     "moduleResolution": "bundler",