extract detail logic to more generic helper

Author: g-harel

demo/content.ts

@@ -46,6 +46,22 @@ const centeredBlob = (options: BlobOptions, center: Coord): Point[] => {
     });
 };
 
+const calcFullDetails = (percentage: number, a: Point, b: Point) => {
+    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);
+
+    return {a0, a1, a2, a3, b0, b1, b2, c0, c1, d0};
+};
+
 addTitle(4, "What are vector graphics?");
 
 addCanvas(
@@ -131,84 +147,48 @@ 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);
 
     animate((frameTime) => {
         const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);
-        drawDetails(ctx, percentage, start, end, {
-            details: () => {
+        const d = calcFullDetails(percentage, start, end);
+
+        tempStyles(
+            ctx,
+            () => {
                 ctx.fillStyle = colors.secondary;
                 ctx.strokeStyle = colors.secondary;
             },
-            handles: () => {
-                ctx.fillStyle = colors.secondary;
-                ctx.strokeStyle = colors.secondary;
+            () => {
+                drawLine(ctx, d.a0, d.a1, 1);
+                drawLine(ctx, d.a1, d.a2, 1);
+                drawLine(ctx, d.a2, d.a3, 1);
+                drawLine(ctx, d.b0, d.b1, 1);
+                drawLine(ctx, d.b1, d.b2, 1);
+                drawLine(ctx, d.c0, d.c1, 1);
+
+                drawPoint(ctx, d.a0, 1.3, "a0");
+                drawPoint(ctx, d.a1, 1.3, "a1");
+                drawPoint(ctx, d.a2, 1.3, "a2");
+                drawPoint(ctx, d.a3, 1.3, "a3");
+                drawPoint(ctx, d.b0, 1.3, "b0");
+                drawPoint(ctx, d.b1, 1.3, "b1");
+                drawPoint(ctx, d.b2, 1.3, "b2");
+                drawPoint(ctx, d.c0, 1.3, "c0");
+                drawPoint(ctx, d.c1, 1.3, "c1");
             },
-            point: () => (ctx.fillStyle = colors.highlight),
-        });
+        );
+
+        tempStyles(
+            ctx,
+            () => (ctx.fillStyle = colors.highlight),
+            () => drawPoint(ctx, d.d0, 3),
+        );
+
+        drawOpen(ctx, start, end, false);
     });
 
     return `The curve can be drawn geometrically by recursively splitting points by a percentage
@@ -544,22 +524,58 @@ addCanvas(
 
         animate((frameTime) => {
             const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);
-            drawDetails(ctx, percentage, start, end, {
-                details: () => {
+            const d = calcFullDetails(percentage, start, end);
+
+            tempStyles(
+                ctx,
+                () => {
                     ctx.fillStyle = colors.secondary;
                     ctx.strokeStyle = colors.secondary;
                 },
-                handles: () => {
+                () => {
+                    drawLine(ctx, d.a0, d.a1, 1);
+                    drawLine(ctx, d.a1, d.a2, 1);
+                    drawLine(ctx, d.a2, d.a3, 1);
+                    drawLine(ctx, d.b0, d.b1, 1);
+                    drawLine(ctx, d.b1, d.b2, 1);
+
+                    drawPoint(ctx, d.a0, 1.3);
+                    drawPoint(ctx, d.a1, 1.3);
+                    drawPoint(ctx, d.a2, 1.3);
+                    drawPoint(ctx, d.a3, 1.3);
+                    drawPoint(ctx, d.b0, 1.3);
+                    drawPoint(ctx, d.b1, 1.3);
+                    drawPoint(ctx, d.b2, 1.3);
+                },
+            );
+
+            forceStyles(ctx, () => {
+                const {pt} = sizes();
+                ctx.fillStyle = colors.secondary;
+                ctx.strokeStyle = colors.secondary;
+                ctx.lineWidth = pt;
+
+                drawOpen(ctx, start, end, false);
+            });
+
+            tempStyles(
+                ctx,
+                () => {
                     ctx.fillStyle = colors.highlight;
                     ctx.strokeStyle = colors.highlight;
                 },
-                line: () => {
-                    ctx.fillStyle = colors.secondary;
-                    ctx.strokeStyle = colors.secondary;
-                    ctx.lineWidth = sizes().pt;
+                () => {
+                    drawLine(ctx, d.c0, d.c1, 1);
+                    drawPoint(ctx, d.c0, 1.3);
+                    drawPoint(ctx, d.c1, 1.3);
                 },
-                point: () => (ctx.fillStyle = colors.highlight),
-            });
+            );
+
+            tempStyles(
+                ctx,
+                () => (ctx.fillStyle = colors.highlight),
+                () => drawPoint(ctx, d.d0, 2),
+            );
         });
     },
     () => {},