add shape iteration helpers

Author: g-harel

internal/animate/prepare.ts

@@ -1,5 +1,4 @@
 import {
-    copyPoint,
     length,
     reverse,
     shift,
@@ -8,6 +7,8 @@ import {
     mod,
     angleOf,
     coordEqual,
+    mapShape,
+    forShape,
 } from "../util";
 import {Point, Shape} from "../types";
 
@@ -40,21 +41,21 @@ const optimizeOrder = (a: Shape, b: Shape): Shape => {
 };
 
 // OPT allow extra division
-export const divideShape = (count: number, points: Shape): Shape => {
-    if (points.length < 3) throw new Error("not enough points");
-    if (count < points.length) throw new Error("cannot remove points");
-    if (count === points.length) return points.slice();
+export const divideShape = (count: number, shape: Shape): Shape => {
+    if (shape.length < 3) throw new Error("not enough points");
+    if (count < shape.length) throw new Error("cannot remove points");
+    if (count === shape.length) return shape.slice();
 
-    const lengths = [];
-    for (let i = 0; i < points.length; i++) {
-        lengths.push(length(points[i], points[mod(i + 1, points.length)]));
-    }
+    const lengths: number[] = [];
+    forShape(shape, ({curr, next}) => {
+        lengths.push(length(curr, next()));
+    });
 
-    const divisors = divideLengths(lengths, count - points.length);
+    const divisors = divideLengths(lengths, count - shape.length);
     const out: Shape = [];
-    for (let i = 0; i < points.length; i++) {
-        const curr: Point = out[out.length - 1] || points[i];
-        const next = points[mod(i + 1, points.length)];
+    for (let i = 0; i < shape.length; i++) {
+        const curr: Point = out[out.length - 1] || shape[i];
+        const next = shape[mod(i + 1, shape.length)];
         out.pop();
         out.push(...insertCount(divisors[i], curr, next));
     }
@@ -66,39 +67,29 @@ export const divideShape = (count: number, points: Shape): Shape => {
 
 // OPT disable
 const fixAnglesWith = (fixee: Shape, fixer: Shape): Shape => {
-    const out: Shape = [];
-    for (let i = 0; i < fixee.length; i++) {
-        const before = fixee[mod(i - 1, fixee.length)];
-        const after = fixee[mod(i + 1, fixee.length)];
-        const point = copyPoint(fixee[i]);
-        if (point.handleIn.length === 0 && coordEqual(before, point)) {
-            point.handleIn.angle = fixer[i].handleIn.angle;
+    return mapShape(fixee, ({index, curr, prev, next}) => {
+        if (curr.handleIn.length === 0 && coordEqual(prev(), curr)) {
+            curr.handleIn.angle = fixer[index].handleIn.angle;
         }
-        if (point.handleOut.length === 0 && coordEqual(after, point)) {
-            point.handleOut.angle = fixer[i].handleOut.angle;
+        if (curr.handleOut.length === 0 && coordEqual(next(), curr)) {
+            curr.handleOut.angle = fixer[index].handleOut.angle;
         }
-        out.push(point);
-    }
-    return out;
+        return curr;
+    });
 };
 
 // OPT disable
 const fixAnglesSelf = (shape: Shape): Shape => {
-    const out: Shape = [];
-    for (let i = 0; i < shape.length; i++) {
-        const before = shape[mod(i - 1, shape.length)];
-        const after = shape[mod(i + 1, shape.length)];
-        const angle = angleOf(before, after);
-        const point = copyPoint(shape[i]);
-        if (point.handleIn.length === 0) {
-            point.handleIn.angle = angle + Math.PI;
+    return mapShape(shape, ({curr, prev, next}) => {
+        const angle = angleOf(prev(), next());
+        if (curr.handleIn.length === 0) {
+            curr.handleIn.angle = angle + Math.PI;
         }
-        if (point.handleOut.length === 0) {
-            point.handleOut.angle = angle;
+        if (curr.handleOut.length === 0) {
+            curr.handleOut.angle = angle;
         }
-        out.push(point);
-    }
-    return out;
+        return curr;
+    });
 };
 
 const divideLengths = (lengths: number[], add: number): number[] => {
@@ -124,9 +115,9 @@ const divideLengths = (lengths: number[], add: number): number[] => {
 };
 
 export const prepShapes = (a: Shape, b: Shape): [Shape, Shape] => {
-    const points = Math.max(a.length, b.length);
-    const aNorm = divideShape(points, a);
-    const bNorm = divideShape(points, b);
+    const pointCount = Math.max(a.length, b.length);
+    const aNorm = divideShape(pointCount, a);
+    const bNorm = divideShape(pointCount, b);
     const bOpt = optimizeOrder(aNorm, bNorm);
     return [fixAnglesWith(fixAnglesSelf(aNorm), bNorm), fixAnglesWith(fixAnglesSelf(bOpt), aNorm)];
 };

internal/animate/testing/script.ts

@@ -1,7 +1,7 @@
 import {interpolateBetweenLoop} from "../interpolate";
 import {divideShape, prepShapes} from "../prepare";
 import {Coord, Point, Shape} from "../../types";
-import {length, insertAt, insertCount, rad, mod} from "../../util";
+import {length, insertAt, insertCount, rad, mod, mapShape, forShape} from "../../util";
 import {clear, drawInfo, drawShape} from "../../render/canvas";
 import {genBlob} from "../../blobs";
 import {rand} from "../../rand";
@@ -33,31 +33,29 @@ const point = (x: number, y: number, ia: number, il: number, oa: number, ol: num
 };
 
 const testSplitAt = (percentage: number) => {
-    let points: Shape = [
+    let shape: Shape = [
         point(0.15, 0.15, 135, 0.1, 315, 0.2),
         point(0.85, 0.15, 225, 0.1, 45, 0.2),
         point(0.85, 0.85, 315, 0.1, 135, 0.2),
         point(0.15, 0.85, 45, 0.1, 225, 0.2),
     ];
 
-    const count = points.length;
+    const count = shape.length;
     const stop = 2 * count - 1;
     for (let i = 0; i < count; i++) {
         const double = i * 2;
         const next = mod(double + 1, stop);
-        points.splice(double, 2, ...insertAt(percentage, points[double], points[next]));
+        shape.splice(double, 2, ...insertAt(percentage, shape[double], shape[next]));
     }
-    points.splice(0, 1);
+    shape.splice(0, 1);
 
     let sum = 0;
-    for (let i = 0; i < points.length; i++) {
-        const curr = points[i];
-        const next = points[mod(i + 1, points.length)];
-        sum += length(curr, next);
-    }
+    forShape(shape, ({curr, next}) => {
+        sum += length(curr, next());
+    });
     drawInfo(ctx, 1, "split at lengths sum", sum);
 
-    drawShape(ctx, debug, points);
+    drawShape(ctx, debug, shape);
 };
 
 const testSplitBy = () => {
@@ -155,15 +153,15 @@ const testPrepShapesD = (percentage: number) => {
 const blob = (seed: string, count: number, scale: number, offset: Coord): Shape => {
     const rgen = rand(seed);
     const shape = genBlob(count, () => 0.3 + 0.2 * rgen());
-    for (let i = 0; i < shape.length; i++) {
-        shape[i].x *= scale * size;
-        shape[i].y *= scale * size;
-        shape[i].x += offset.x * size;
-        shape[i].y += offset.y * size;
-        shape[i].handleIn.length *= scale * size;
-        shape[i].handleOut.length *= scale * size;
-    }
-    return shape;
+    return mapShape(shape, ({curr}) => {
+        curr.x *= scale * size;
+        curr.y *= scale * size;
+        curr.x += offset.x * size;
+        curr.y += offset.y * size;
+        curr.handleIn.length *= scale * size;
+        curr.handleOut.length *= scale * size;
+        return curr;
+    });
 };
 
 (() => {

internal/blobs.ts

@@ -1,13 +1,13 @@
 import {Shape} from "./types";
 import {smooth} from "../internal/util";
 
-export const genBlob = (points: number, offset: () => number): Shape => {
-    const angle = (Math.PI * 2) / points;
+export const genBlob = (pointCount: number, offset: () => number): Shape => {
+    const angle = (Math.PI * 2) / pointCount;
     const boundingSize = 1;
     const boundingCenter = boundingSize / 2;
 
     const shape: Shape = [];
-    for (let i = 0; i < points; i++) {
+    for (let i = 0; i < pointCount; i++) {
         const randPointOffset = offset();
         const pointX = Math.sin(i * angle);
         const pointY = Math.cos(i * angle);

internal/render/canvas.ts

@@ -1,5 +1,5 @@
 import {Coord, Shape} from "../types";
-import {expandHandle, mod} from "../util";
+import {expandHandle, forShape} from "../util";
 
 const pointSize = 2;
 const infoSpacing = 20;
@@ -35,10 +35,10 @@ const drawPoint = (ctx: CanvasRenderingContext2D, p: Coord, style: string) => {
 export const drawShape = (ctx: CanvasRenderingContext2D, debug: boolean, shape: Shape) => {
     if (shape.length < 2) throw new Error("not enough points");
 
-    for (let i = 0; i < shape.length; i++) {
+    forShape(shape, ({curr, next: getNext}) => {
+        const next = getNext();
+
         // Compute coordinates of handles.
-        const curr = shape[i];
-        const next = shape[mod(i + 1, shape.length)];
         const currHandle = expandHandle(curr, curr.handleOut);
         const nextHandle = expandHandle(next, next.handleIn);
 
@@ -53,5 +53,5 @@ export const drawShape = (ctx: CanvasRenderingContext2D, debug: boolean, shape:
         ctx.moveTo(curr.x, curr.y);
         ctx.bezierCurveTo(currHandle.x, currHandle.y, nextHandle.x, nextHandle.y, next.x, next.y);
         ctx.stroke();
-    }
+    });
 };

internal/render/svg.ts

@@ -1,6 +1,6 @@
 import {xml, XmlElement} from "../../editable";
 import {Shape} from "../types";
-import {expandHandle, mod} from "../util";
+import {expandHandle, forShape} from "../util";
 
 export interface RenderOptions {
     // Viewport size.
@@ -24,20 +24,19 @@ export interface RenderOptions {
     boundingBox?: boolean;
 }
 
-// OPT render path only
+// TODO render path only
 
 // Renders a shape made up of the input points to an editable data structure
 // which can be rendered to svg.
-export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement => {
+export const renderEditable = (shape: Shape, opt: RenderOptions): XmlElement => {
     // Render path data attribute from points and handles.
-    let path = `M${points[0].x},${points[0].y}`;
-    for (let i = 0; i < points.length; i++) {
-        const curr = points[i];
-        const next = points[mod(i + 1, points.length)];
+    let path = `M${shape[0].x},${shape[0].y}`;
+    forShape(shape, ({curr, next: getNext}) => {
+        const next = getNext();
         const currControl = expandHandle(curr, curr.handleOut);
         const nextControl = expandHandle(next, next.handleIn);
         path += `C${currControl.x},${currControl.y},${nextControl.x},${nextControl.y},${next.x},${next.y}`;
-    }
+    });
 
     const stroke = opt.stroke || (opt.guides ? "black" : "none");
     const strokeWidth = opt.strokeWidth || (opt.guides ? 1 : 0);
@@ -80,9 +79,8 @@ export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement =>
         }
 
         // Points and handles.
-        for (let i = 0; i < points.length; i++) {
-            const curr = points[i];
-            const next = points[mod(i + 1, points.length)];
+        forShape(shape, ({curr, next: getNext}) => {
+            const next = getNext();
             const currControl = expandHandle(curr, curr.handleOut);
             const nextControl = expandHandle(next, next.handleIn);
 
@@ -126,7 +124,7 @@ export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement =>
             xmlContentGroup.children.push(xmlOutgoingHandleCircle);
             xmlContentGroup.children.push(xmlIncomingHandleCircle);
             xmlContentGroup.children.push(xmlPointCircle);
-        }
+        });
     }
 
     return xmlRoot;