remove the shape type

Author: g-harel

README.md

@@ -42,8 +42,8 @@ _Options are **not** [sanitized](https://en.wikipedia.org/wiki/HTML_sanitization
 Name           | Type       | Description
 -------------- | ---------- | ---------------------------------------------
 `size`         | `number`   | Bounding box dimensions (in pixels)
-`complexity`   | `number`   | Shape complexity (number of points)
-`contrast`     | `number`   | Shape contrast (randomness of point position)
+`complexity`   | `number`   | Blob complexity (number of points)
+`contrast`     | `number`   | Blob contrast (randomness of point position)
 
 
 #### Optional

internal/animate/interpolate.ts

@@ -1,5 +1,5 @@
-import {Shape} from "../types";
-import {split, splitLine, mod, smooth, mapShape} from "../util";
+import {Point} from "../types";
+import {split, splitLine, mod, smooth, mapPoints} from "../util";
 
 // Interpolates between angles a and b. Angles are normalized to avoid unnecessary rotation.
 // Direction is chosen to produce the smallest possible movement.
@@ -17,19 +17,19 @@ const interpolateAngle = (percentage: number, a: number, b: number): number => {
     return split(percentage, aNorm, bNorm);
 };
 
-// Interpolates linearly between shapes a and b. Can only interpolate between shapes that have the
+// Interpolates linearly between a and b. Can only interpolate between point lists that have the
 // same number of points. Easing effects can be applied to the percentage given to this function.
 // Percentages outside the 0-1 range are supported.
-export const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shape => {
-    if (a.length !== b.length) throw new Error("shapes have different number of points");
+export const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
+    if (a.length !== b.length) throw new Error("must have equal number of points");
 
     // Clamped range for use in values that could look incorrect otherwise.
     // ex. Handles that invert if their value goes negative (creates loops at corners).
     const clamped = Math.min(1, Math.max(0, percentage));
 
-    const shape: Shape = [];
+    const points: Point[] = [];
     for (let i = 0; i < a.length; i++) {
-        shape.push({
+        points.push({
             ...splitLine(percentage, a[i], b[i]),
             handleIn: {
                 angle: interpolateAngle(percentage, a[i].handleIn.angle, b[i].handleIn.angle),
@@ -41,22 +41,22 @@ export const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shap
             },
         });
     }
-    return shape;
+    return points;
 };
 
-// Interpolates between shapes a and b while applying a smoothing effect. Smoothing effect's
-// strength is relative to how far away the percentage is from either 0 or 1. It is strongest in the
-// middle of the animation (percentage = 0.5) or when bounds are exceeded (percentage = 1.8).
+// Interpolates between a and b while applying a smoothing effect. Smoothing effect's strength is
+// relative to how far away the percentage is from either 0 or 1. It is strongest in the middle of
+// the animation (percentage = 0.5) or when bounds are exceeded (percentage = 1.8).
 export const interpolateBetweenSmooth = (
     strength: number,
     percentage: number,
-    a: Shape,
-    b: Shape,
-): Shape => {
+    a: Point[],
+    b: Point[],
+): Point[] => {
     strength *= Math.min(1, Math.min(Math.abs(0 - percentage), Math.abs(1 - percentage)));
     const interpolated = interpolateBetween(percentage, a, b);
     const smoothed = smooth(interpolated, Math.sqrt(strength + 0.25) / 3);
-    return mapShape(interpolated, ({index, curr}) => {
+    return mapPoints(interpolated, ({index, curr}) => {
         const sp = smoothed[index];
         curr.handleIn.angle = interpolateAngle(strength, curr.handleIn.angle, sp.handleIn.angle);
         curr.handleIn.length = split(strength, curr.handleIn.length, sp.handleIn.length);

internal/animate/prepare.ts

@@ -7,55 +7,55 @@ import {
     mod,
     angleOf,
     coordEqual,
-    mapShape,
-    forShape,
+    mapPoints,
+    forPoints,
 } from "../util";
-import {Point, Shape} from "../types";
+import {Point} from "../types";
 
 // OPT extract optimization logic
-const optimizeOrder = (a: Shape, b: Shape): Shape => {
+const optimizeOrder = (a: Point[], b: Point[]): Point[] => {
     const count = a.length;
 
     let minSum = Infinity;
     let minOffset = 0;
-    let minShape: Shape = [];
+    let minOffsetBase: Point[] = [];
 
-    const setMinOffset = (shape: Shape) => {
+    const setMinOffset = (points: Point[]) => {
         for (let i = 0; i < count; i++) {
             let sum = 0;
             for (let j = 0; j < count; j++) {
-                sum += (100 * distance(a[j], shape[mod(j + i, count)])) ** 1 / 2;
+                sum += (100 * distance(a[j], points[mod(j + i, count)])) ** 1 / 2;
                 if (sum > minSum) break;
             }
             if (sum <= minSum) {
                 minSum = sum;
                 minOffset = i;
-                minShape = shape;
+                minOffsetBase = points;
             }
         }
     };
     setMinOffset(b);
     setMinOffset(reverse(b));
 
-    return shift(minOffset, minShape);
+    return shift(minOffset, minOffsetBase);
 };
 
 // OPT allow extra division
-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();
+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");
+    if (count === points.length) return points.slice();
 
     const lengths: number[] = [];
-    forShape(shape, ({curr, next}) => {
+    forPoints(points, ({curr, next}) => {
         lengths.push(length(curr, next()));
     });
 
-    const divisors = divideLengths(lengths, count - shape.length);
-    const out: Shape = [];
-    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)];
+    const divisors = divideLengths(lengths, count - points.length);
+    const out: Point[] = [];
+    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)];
         out.pop();
         out.push(...insertCount(divisors[i], curr, next));
     }
@@ -66,8 +66,8 @@ export const divideShape = (count: number, shape: Shape): Shape => {
 };
 
 // OPT disable
-const fixAnglesWith = (fixee: Shape, fixer: Shape): Shape => {
-    return mapShape(fixee, ({index, curr, prev, next}) => {
+const fixAnglesWith = (fixee: Point[], fixer: Point[]): Point[] => {
+    return mapPoints(fixee, ({index, curr, prev, next}) => {
         if (curr.handleIn.length === 0 && coordEqual(prev(), curr)) {
             curr.handleIn.angle = fixer[index].handleIn.angle;
         }
@@ -79,8 +79,8 @@ const fixAnglesWith = (fixee: Shape, fixer: Shape): Shape => {
 };
 
 // OPT disable
-const fixAnglesSelf = (shape: Shape): Shape => {
-    return mapShape(shape, ({curr, prev, next}) => {
+const fixAnglesSelf = (points: Point[]): Point[] => {
+    return mapPoints(points, ({curr, prev, next}) => {
         const angle = angleOf(prev(), next());
         if (curr.handleIn.length === 0) {
             curr.handleIn.angle = angle + Math.PI;
@@ -114,10 +114,10 @@ const divideLengths = (lengths: number[], add: number): number[] => {
     return divisors;
 };
 
-export const prepShapes = (a: Shape, b: Shape): [Shape, Shape] => {
+export const prepare = (a: Point[], b: Point[]): [Point[], Point[]] => {
     const pointCount = Math.max(a.length, b.length);
-    const aNorm = divideShape(pointCount, a);
-    const bNorm = divideShape(pointCount, b);
+    const aNorm = divide(pointCount, a);
+    const bNorm = divide(pointCount, b);
     const bOpt = optimizeOrder(aNorm, bNorm);
     return [fixAnglesWith(fixAnglesSelf(aNorm), bNorm), fixAnglesWith(fixAnglesSelf(bOpt), aNorm)];
 };

internal/animate/testing/script.ts

@@ -1,8 +1,8 @@
 import {interpolateBetweenSmooth} from "../interpolate";
-import {divideShape, prepShapes} from "../prepare";
-import {Coord, Point, Shape} from "../../types";
-import {length, insertAt, insertCount, rad, mod, mapShape, forShape, smooth} from "../../util";
-import {clear, drawInfo, drawShape} from "../../render/canvas";
+import {divide, prepare} from "../prepare";
+import {Coord, Point} from "../../types";
+import {length, insertAt, insertCount, rad, mod, mapPoints, forPoints} from "../../util";
+import {clear, drawInfo, drawClosed} from "../../render/canvas";
 import {genBlob} from "../../blobs";
 import {rand} from "../../rand";
 
@@ -33,35 +33,35 @@ const point = (x: number, y: number, ia: number, il: number, oa: number, ol: num
 };
 
 const testSplitAt = (percentage: number) => {
-    let shape: Shape = [
+    let points: Point[] = [
         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 = shape.length;
+    const count = points.length;
     const stop = 2 * count - 1;
     for (let i = 0; i < count; i++) {
         const double = i * 2;
         const next = mod(double + 1, stop);
-        shape.splice(double, 2, ...insertAt(percentage, shape[double], shape[next]));
+        points.splice(double, 2, ...insertAt(percentage, points[double], points[next]));
     }
-    shape.splice(0, 1);
+    points.splice(0, 1);
 
     let sum = 0;
-    forShape(shape, ({curr, next}) => {
+    forPoints(points, ({curr, next}) => {
         sum += length(curr, next());
     });
     drawInfo(ctx, 1, "split at lengths sum", sum);
 
-    drawShape(ctx, debug, shape);
+    drawClosed(ctx, debug, points);
 };
 
 const testSplitBy = () => {
     const count = 10;
     for (let i = 0; i < count; i++) {
-        drawShape(
+        drawClosed(
             ctx,
             debug,
             insertCount(
@@ -73,13 +73,13 @@ const testSplitBy = () => {
     }
 };
 
-const testDivideShape = () => {
+const testDividePoints = () => {
     const count = 10;
     for (let i = 0; i < count; i++) {
-        drawShape(
+        drawClosed(
             ctx,
             debug,
-            divideShape(i + 3, [
+            divide(i + 3, [
                 point(0.3, 0.2 + i * 0.05, -10, 0.04, -45, 0.02),
                 point(0.35, 0.2 + i * 0.05 - 0.02, 180, 0.02, 0, 0.02),
                 point(0.4, 0.2 + i * 0.05, -135, 0.02, 170, 0.04),
@@ -101,29 +101,29 @@ const testInterpolateBetween = (percentage: number) => {
         point(0.35, 0.82, 360 * 10, 0, 180, 0),
         point(0.3, 0.77, 90, 0, -90, 0),
     ];
-    drawShape(ctx, debug, loopBetween(percentage, a, b));
+    drawClosed(ctx, debug, loopBetween(percentage, a, b));
 };
 
-const testPrepShapesA = (percentage: number) => {
+const testPrepPointsA = (percentage: number) => {
     const a = blob("a", 6, 0.15, {x: 0.45, y: 0.1});
     const b = blob("b", 10, 0.15, {x: 0.45, y: 0.1});
-    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
+    drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
 };
 
-const testPrepShapesB = (percentage: number) => {
+const testPrepPointsB = (percentage: number) => {
     const a = blob("a", 8, 0.15, {x: 0.45, y: 0.25});
-    const b: Shape = [
+    const b: Point[] = [
         point(0.45, 0.25, 0, 0, 0, 0),
         point(0.6, 0.25, 0, 0, 0, 0),
         point(0.6, 0.4, 0, 0, 0, 0),
         point(0.45, 0.4, 0, 0, 0, 0),
     ];
-    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
+    drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
 };
 
-const testPrepShapesC = (percentage: number) => {
+const testPrepPointsC = (percentage: number) => {
     const a = blob("c", 8, 0.15, {x: 0.45, y: 0.45});
-    const b: Shape = [
+    const b: Point[] = [
         point(0.5, 0.45, 0, 0, 0, 0),
         point(0.55, 0.45, 0, 0, 0, 0),
         point(0.55, 0.5, 0, 0, 0, 0),
@@ -137,21 +137,21 @@ const testPrepShapesC = (percentage: number) => {
         point(0.45, 0.5, 0, 0, 0, 0),
         point(0.5, 0.5, 0, 0, 0, 0),
     ];
-    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(b, a)));
+    drawClosed(ctx, debug, loopBetween(percentage, ...prepare(b, a)));
 };
 
-const testPrepShapesD = (percentage: number) => {
+const testPrepPointsD = (percentage: number) => {
     const a = blob("d", 8, 0.15, {x: 0.45, y: 0.65});
-    const b: Shape = [
+    const b: Point[] = [
         point(0.525, 0.725, 0, 0, 0, 0),
         point(0.525, 0.725, 0, 0, 0, 0),
         point(0.525, 0.725, 0, 0, 0, 0),
     ];
-    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
+    drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
 };
 
 const testPrepLetters = (percentage: number) => {
-    const a: Shape = [
+    const a: Point[] = [
         point(0.65, 0.2, 0, 0, 0, 0),
         point(0.85, 0.2, 0, 0, 0, 0),
         point(0.85, 0.25, 0, 0, 0, 0),
@@ -165,14 +165,14 @@ const testPrepLetters = (percentage: number) => {
         point(0.85, 0.45, 0, 0, 0, 0),
         point(0.65, 0.45, 0, 0, 0, 0),
     ];
-    const b: Shape = blob("lettersa", 8, 0.25, {x: 0.65, y: 0.2});
-    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
+    const b: Point[] = blob("", 8, 0.25, {x: 0.65, y: 0.2});
+    drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
 };
 
-const blob = (seed: string, count: number, scale: number, offset: Coord): Shape => {
+const blob = (seed: string, count: number, scale: number, offset: Coord): Point[] => {
     const rgen = rand(seed);
-    const shape = genBlob(count, () => 0.3 + 0.2 * rgen());
-    return mapShape(shape, ({curr}) => {
+    const points = genBlob(count, () => 0.3 + 0.2 * rgen());
+    return mapPoints(points, ({curr}) => {
         curr.x *= scale * size;
         curr.y *= scale * size;
         curr.x += offset.x * size;
@@ -183,7 +183,7 @@ const blob = (seed: string, count: number, scale: number, offset: Coord): Shape
     });
 };
 
-const loopBetween = (percentage: number, a: Shape, b: Shape): Shape => {
+const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
     if (percentage < 0.5) {
         return interpolateBetweenSmooth(1, 2 * percentage, a, b);
     } else {
@@ -200,12 +200,12 @@ const loopBetween = (percentage: number, a: Shape, b: Shape): Shape => {
         drawInfo(ctx, 0, "percentage", percentage);
         testSplitAt(percentage);
         testSplitBy();
-        testDivideShape();
+        testDividePoints();
         testInterpolateBetween(percentage);
-        testPrepShapesA(percentage);
-        testPrepShapesB(percentage);
-        testPrepShapesC(percentage);
-        testPrepShapesD(percentage);
+        testPrepPointsA(percentage);
+        testPrepPointsB(percentage);
+        testPrepPointsC(percentage);
+        testPrepPointsD(percentage);
         testPrepLetters(percentage);
 
         percentage += animationSpeed / 1000;

internal/blobs.ts

@@ -1,17 +1,17 @@
-import {Shape} from "./types";
+import {Point} from "./types";
 import {smooth} from "../internal/util";
 
-export const genBlob = (pointCount: number, offset: () => number): Shape => {
+export const genBlob = (pointCount: number, offset: () => number): Point[] => {
     const angle = (Math.PI * 2) / pointCount;
     const boundingSize = 1;
     const boundingCenter = boundingSize / 2;
 
-    const shape: Shape = [];
+    const points: Point[] = [];
     for (let i = 0; i < pointCount; i++) {
         const randPointOffset = offset();
         const pointX = Math.sin(i * angle);
         const pointY = Math.cos(i * angle);
-        shape.push({
+        points.push({
             x: boundingCenter + pointX * randPointOffset,
             y: boundingCenter + pointY * randPointOffset,
             handleIn: {angle: 0, length: 0},
@@ -22,5 +22,5 @@ export const genBlob = (pointCount: number, offset: () => number): Shape => {
     // https://math.stackexchange.com/a/873589/235756
     const smoothingStrength = ((4 / 3) * Math.tan(angle / 4)) / Math.sin(angle / 2) / 2;
 
-    return smooth(shape, smoothingStrength);
+    return smooth(points, smoothingStrength);
 };