add debug path to example

Author: g-harel

demo/example.ts

@@ -1,4 +1,5 @@
 import {CanvasKeyframe, canvasPath, wigglePreset} from "../public/animate";
+import { drawDebugClosed, drawPoint } from "./internal/canvas";
 import {colors} from "./internal/layout";
 
 // Fetch reference to example container.
@@ -29,6 +30,20 @@ const animation = canvasPath();
 const renderFrame = () => {
     ctx.clearRect(0, 0, size, size);
     ctx.fillStyle = colors.highlight;
+    ctx.strokeStyle = colors.highlight;
+
+    // Debug
+    if (false) {
+        const p = (animation as any).renderPoints();
+
+        drawDebugClosed(ctx, p, 60);
+        if (p.length) drawPoint(ctx, p[0], 400);
+
+        const fps = 5;
+        setTimeout(() => requestAnimationFrame(renderFrame), 1000/fps);
+        return;
+    }
+
     ctx.fill(animation.renderFrame());
     requestAnimationFrame(renderFrame);
 };

demo/internal/canvas.ts

@@ -116,6 +116,33 @@ export const drawClosed = (ctx: CanvasRenderingContext2D, points: Point[], handl
     });
 };
 
+export const drawDebugClosed = (ctx: CanvasRenderingContext2D, points: Point[], size: number) => {
+    forPoints(points, ({curr, next: nextFn}) => {
+        const next = nextFn();
+        const currHandle = expandHandle(curr, curr.handleOut);
+        const nextHandle = expandHandle(next, next.handleIn);
+    
+        drawLine(ctx, curr, currHandle, size);
+        drawLine(ctx, next, nextHandle, size, 2);
+        drawPoint(ctx, currHandle, size * 1.4);
+        drawPoint(ctx, nextHandle, size * 1.4);
+        const curve = new Path2D();
+        curve.moveTo(curr.x, curr.y);
+        curve.bezierCurveTo(
+            currHandle.x,
+            currHandle.y,
+            nextHandle.x,
+            nextHandle.y,
+            next.x,
+            next.y,
+        );
+        ctx.lineWidth = sizes().pt * size*2;
+        ctx.stroke(curve);
+        drawPoint(ctx, curr, size * 1.1);
+        drawPoint(ctx, next, size * 1.1);
+    });
+}
+
 export const drawOpen = (
     ctx: CanvasRenderingContext2D,
     start: Point,

internal/animate/prepare.ts

@@ -12,6 +12,8 @@ import {
 } from "../util";
 import {Point} from "../types";
 
+// Iterate through point ordering possibilities to find an option with the least
+// distance between points. Also reverse the list to try and optimize.
 const optimizeOrder = (a: Point[], b: Point[]): Point[] => {
     const count = a.length;
 
@@ -39,6 +41,8 @@ const optimizeOrder = (a: Point[], b: Point[]): Point[] => {
     return shift(minOffset, minOffsetBase);
 };
 
+// Modify the input shape to be the exact same path visually, but with
+// additional points so that the total number of points is "count".
 export const divide = (count: number, points: Point[]): Point[] => {
     if (points.length < 3) throw new Error("not enough points");
     if (count < points.length) throw new Error("cannot remove points");
@@ -93,6 +97,8 @@ const fixAnglesSelf = (points: Point[]): Point[] => {
     });
 };
 
+// Split the input lengths into smaller segments to add the target amount of
+// lengths while minimizing the standard deviation of the list of lengths.
 const divideLengths = (lengths: number[], add: number): number[] => {
     const divisors = lengths.map(() => 1);
     const sizes = lengths.slice();