add curve splitting animation

Author: g-harel

demo/content.ts

@@ -131,59 +131,84 @@ addCanvas(2, (ctx, width, height, animate) => {
         These handles can be thought of as defining the direction and momentum of the line.`;
 });
 
+const drawDetails = (
+    ctx: CanvasRenderingContext2D,
+    percentage: number,
+    a: Point,
+    b: Point,
+    styles: {
+        details: () => void;
+        handles: () => void;
+        line?: () => void;
+        point: () => void;
+    },
+) => {
+    const a0: Coord = a;
+    const a1 = expandHandle(a, a.handleOut);
+    const a2 = expandHandle(b, b.handleIn);
+    const a3: Coord = b;
+
+    const b0 = splitLine(percentage, a0, a1);
+    const b1 = splitLine(percentage, a1, a2);
+    const b2 = splitLine(percentage, a2, a3);
+    const c0 = splitLine(percentage, b0, b1);
+    const c1 = splitLine(percentage, b1, b2);
+    const d0 = splitLine(percentage, c0, c1);
+
+    tempStyles(ctx, styles.details, () => {
+        drawLine(ctx, a0, a1, 1);
+        drawLine(ctx, a1, a2, 1);
+        drawLine(ctx, a2, a3, 1);
+        drawLine(ctx, b0, b1, 1);
+        drawLine(ctx, b1, b2, 1);
+
+        drawPoint(ctx, a0, 1.3, "a0");
+        drawPoint(ctx, a1, 1.3, "a1");
+        drawPoint(ctx, a2, 1.3, "a2");
+        drawPoint(ctx, a3, 1.3, "a3");
+        drawPoint(ctx, b0, 1.3, "b0");
+        drawPoint(ctx, b1, 1.3, "b1");
+        drawPoint(ctx, b2, 1.3, "b2");
+    });
+
+    if (styles.line !== undefined) {
+        forceStyles(ctx, () => {
+            styles.line!();
+            drawOpen(ctx, a, b, false)
+        });
+    } else {
+        drawOpen(ctx, a, b, false)
+    }
+
+    tempStyles(ctx, styles.handles, () => {
+        drawLine(ctx, c0, c1, 1);
+        drawPoint(ctx, c0, 1.3, "c0");
+        drawPoint(ctx, c1, 1.3, "c1");
+    });
+
+    tempStyles(ctx, styles.point, () => {
+        drawPoint(ctx, d0, 3);
+    });
+};
+
 addCanvas(2, (ctx, width, height, animate) => {
     const period = Math.PI * Math.E * 1000;
     const start = point(width * 0.3, height * 0.8, 0, 0, -105, width * 0.32);
     const end = point(width * 0.7, height * 0.8, -75, width * 0.25, 0, 0);
 
-    const a0: Coord = start;
-    const a1 = expandHandle(start, start.handleOut);
-    const a2 = expandHandle(end, end.handleIn);
-    const a3: Coord = end;
-
     animate((frameTime) => {
         const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);
-
-        const b0 = splitLine(percentage, a0, a1);
-        const b1 = splitLine(percentage, a1, a2);
-        const b2 = splitLine(percentage, a2, a3);
-        const c0 = splitLine(percentage, b0, b1);
-        const c1 = splitLine(percentage, b1, b2);
-        const d0 = splitLine(percentage, c0, c1);
-
-        tempStyles(
-            ctx,
-            () => {
+        drawDetails(ctx, percentage, start, end, {
+            details: () => {
                 ctx.fillStyle = colors.secondary;
                 ctx.strokeStyle = colors.secondary;
             },
-            () => {
-                drawLine(ctx, a0, a1, 1);
-                drawLine(ctx, a1, a2, 1);
-                drawLine(ctx, a2, a3, 1);
-                drawLine(ctx, b0, b1, 1);
-                drawLine(ctx, b1, b2, 1);
-                drawLine(ctx, c0, c1, 1);
-
-                drawPoint(ctx, a0, 1.3, "a0");
-                drawPoint(ctx, a1, 1.3, "a1");
-                drawPoint(ctx, a2, 1.3, "a2");
-                drawPoint(ctx, a3, 1.3, "a3");
-                drawPoint(ctx, b0, 1.3, "b0");
-                drawPoint(ctx, b1, 1.3, "b1");
-                drawPoint(ctx, b2, 1.3, "b2");
-                drawPoint(ctx, c0, 1.3, "c0");
-                drawPoint(ctx, c1, 1.3, "c1");
+            handles: () => {
+                ctx.fillStyle = colors.secondary;
+                ctx.strokeStyle = colors.secondary;
             },
-        );
-
-        drawOpen(ctx, start, end, false);
-
-        tempStyles(
-            ctx,
-            () => (ctx.fillStyle = colors.highlight),
-            () => drawPoint(ctx, d0, 3),
-        );
+            point: () => (ctx.fillStyle = colors.highlight),
+        });
     });
 
     return `The curve can be drawn geometrically by recursively splitting points by a percentage
@@ -509,3 +534,33 @@ addCanvas(
             possible shifts.`;
     },
 );
+
+addCanvas(
+    1.3,
+    (ctx, width, height, animate) => {
+        const period = Math.PI ** Math.E * 1000;
+        const start = point(width * 0.1, height * 0.6, 0, 0, -45, width * 0.5);
+        const end = point(width * 0.9, height * 0.6, 160, width * 0.3, 0, 0);
+
+        animate((frameTime) => {
+            const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);
+            drawDetails(ctx, percentage, start, end, {
+                details: () => {
+                    ctx.fillStyle = colors.secondary;
+                    ctx.strokeStyle = colors.secondary;
+                },
+                handles: () => {
+                    ctx.fillStyle = colors.highlight;
+                    ctx.strokeStyle = colors.highlight;
+                },
+                line: () => {
+                    ctx.fillStyle = colors.secondary;
+                    ctx.strokeStyle = colors.secondary;
+                    ctx.lineWidth = sizes().pt;
+                },
+                point: () => (ctx.fillStyle = colors.highlight),
+            });
+        });
+    },
+    () => {},
+);

demo/internal/debug.ts

@@ -1,5 +1,5 @@
 // If debug is initially set to false it will not be toggleable.
-export let debug = false;
+export let debug = true;
 
 const debugListeners: ((debug: boolean) => void)[] = [];
 export const onDebugStateChange = (fn: (debug: boolean) => void) => {