add full examples of morphing between shapes

Author: g-harel

animate/index.ts

@@ -3,6 +3,8 @@
 // http://www.iscriptdesign.com/?sketch=tutorial/splitbezier
 // http://www.wikiwand.com/en/Hungarian_algorithm
 
+import blobs from "..";
+
 let ctx: CanvasRenderingContext2D;
 
 const animationSpeed = 2;
@@ -168,6 +170,7 @@ const approxCurveLength = (a: Point, b: Point): number => {
 };
 
 const calcOptimalOffset = (a: Coord[], b: Coord[]): number => {
+    // TODO also reverse
     const count = a.length;
     let min = Infinity;
     let minIndex = 0;
@@ -185,6 +188,15 @@ const calcOptimalOffset = (a: Coord[], b: Coord[]): number => {
     return minIndex;
 };
 
+const offsetShape = (offset: number, shape: Point[]): Point[] => {
+    if (offset === 0) return shape;
+    const out: Point[] = [];
+    for (let i = 0; i < shape.length; i++) {
+        out.push(shape[(i + offset) % shape.length]);
+    }
+    return out;
+};
+
 const divideShape = (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");
@@ -314,6 +326,7 @@ const renderShape = (points: Point[]) => {
 };
 
 const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
+    // TODO when handle length === 0, ignore/modify angle to look nice
     if (a.length !== b.length) throw new Error("shapes have different number of points");
     const points: Point[] = [];
     for (let i = 0; i < a.length; i++) {
@@ -332,6 +345,14 @@ const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[]
     return points;
 };
 
+const interpolateBetweenLoop = (percentage: number, a: Point[], b: Point[]): Point[] => {
+    if (percentage < 0.5) {
+        return interpolateBetween(2 * percentage, a, b);
+    } else {
+        return interpolateBetween(2 * percentage - 1, b, a);
+    }
+};
+
 const testSplitAt = (percentage: number) => {
     let points: Point[] = [
         point(0.15, 0.15, 135, 0.1, 315, 0.2),
@@ -366,8 +387,8 @@ const testSplitBy = () => {
         renderShape(
             splitCurveBy(
                 i + 1,
-                point(0.15, 0.2 + i * 0.06, 30, 0.1, -30, 0.1),
-                point(0.45, 0.2 + i * 0.06, 135, 0.1, 225, 0.1),
+                point(0.15, 0.2 + i * 0.06, 30, 0.04, -30, 0.04),
+                point(0.25, 0.2 + i * 0.06, 135, 0.04, 225, 0.04),
             ),
         );
     }
@@ -378,32 +399,93 @@ const testDivideShape = () => {
     for (let i = 0; i < count; i++) {
         renderShape(
             divideShape(i + 3, [
-                point(0.6, 0.2 + i * 0.05, -10, 0.1, -45, 0.03),
-                point(0.7, 0.2 + i * 0.05 - 0.03, 180, 0.03, 0, 0.03),
-                point(0.8, 0.2 + i * 0.05, -135, 0.03, 170, 0.1),
+                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),
             ]),
         );
     }
 };
 
 const testInterpolateBetween = (percentage: number) => {
     const a = [
-        point(0.65, 0.72, 135, 0.05, -45, 0.05),
-        point(0.75, 0.72, -135, 0.05, 45, 0.05),
-        point(0.75, 0.82, -45, 0.05, 135, 0.05),
-        point(0.65, 0.82, 45, 0.05, 225, 0.05),
+        point(0.3, 0.72, 135, 0.05, -45, 0.05),
+        point(0.4, 0.72, -135, 0.05, 45, 0.05),
+        point(0.4, 0.82, -45, 0.05, 135, 0.05),
+        point(0.3, 0.82, 45, 0.05, 225, 0.05),
     ];
     const b = [
-        point(0.7, 0.72, 180, 0, 0, 0),
-        point(0.75, 0.77, -90, 0, 90, 0),
-        point(0.7, 0.82, 360 * 10, 0, 180, 0),
-        point(0.65, 0.77, 90, 0, -90, 0),
+        point(0.35, 0.72, 180, 0, 0, 0),
+        point(0.4, 0.77, -90, 0, 90, 0),
+        point(0.35, 0.82, 360 * 10, 0, 180, 0),
+        point(0.3, 0.77, 90, 0, -90, 0),
     ];
-    if (percentage < 0.5) {
-        renderShape(interpolateBetween(2 * percentage, a, b));
-    } else {
-        renderShape(interpolateBetween(2 * percentage - 1, b, a));
+    renderShape(interpolateBetweenLoop(percentage, a, b));
+};
+
+const testBlobMorph = (percentage: number) => {
+    const a = genBlob("a", 0.6, 0.6, 0.3, {x: 0.5, y: 0.2});
+    const b = genBlob("b", 1, 0.6, 0.3, {x: 0.5, y: 0.2});
+
+    const points = Math.max(a.length, b.length);
+    const aNorm = divideShape(points, a);
+    const bNorm = divideShape(points, b);
+    const offset = calcOptimalOffset(aNorm, bNorm);
+    const bOffset = offsetShape(offset, bNorm);
+
+    renderShape(interpolateBetweenLoop(percentage, aNorm, bOffset));
+};
+
+const testShapeMorph = (percentage: number) => {
+    const a = genBlob("a", 0.6, 0.6, 0.3, {x: 0.5, y: 0.5});
+    const b: Point[] = [
+        point(0.55, 0.5, 0, 0, 0, 0),
+        point(0.55, 0.7, 0, 0, 0, 0),
+        point(0.75, 0.7, 0, 0, 0, 0),
+        point(0.75, 0.5, 0, 0, 0, 0),
+    ];
+
+    const points = Math.max(a.length, b.length);
+    const aNorm = divideShape(points, a);
+    const bNorm = divideShape(points, b);
+    const offset = calcOptimalOffset(aNorm, bNorm);
+    const bOffset = offsetShape(offset, bNorm);
+    drawInfo("offset", offset)
+
+    // renderShape(a);
+    // renderShape(b);
+    renderShape(interpolateBetweenLoop(percentage, aNorm, bOffset));
+};
+
+const genBlob = (
+    seed: string,
+    complexity: number,
+    contrast: number,
+    s: number,
+    offset: Coord,
+): Point[] => {
+    const original = blobs.path({
+        complexity,
+        contrast,
+        size: s * size,
+        seed,
+    });
+    const out: Point[] = [];
+    for (let i = 0; i < original.length; i++) {
+        const p = original[i];
+        if (!p.handles) continue;
+        out.push(
+            point(
+                p.x / size + offset.x,
+                p.y / size + offset.y,
+                p.handles.angle + 180,
+                p.handles.in / size,
+                p.handles.angle,
+                p.handles.out / size,
+            ),
+        );
     }
+    return out;
 };
 
 (() => {
@@ -419,11 +501,15 @@ const testInterpolateBetween = (percentage: number) => {
     let percentage = animationStart;
     const renderFrame = () => {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
+
         drawInfo("percentage", percentage);
         testSplitAt(percentage);
         testSplitBy();
         testDivideShape();
         testInterpolateBetween(percentage);
+        testBlobMorph(percentage);
+        testShapeMorph(percentage);
+
         percentage += animationSpeed / 1000;
         percentage %= 1;
         if (animationSpeed > 0) requestAnimationFrame(renderFrame);

index.ts

@@ -7,7 +7,7 @@ import {smooth} from "./internal/svg/smooth";
 import {renderEditable} from "./internal/svg/render";
 import {XmlElement} from "./editable";
 
-export interface BlobOptions {
+export interface PathOptions {
     // Bounding box dimensions.
     size: number;
 
@@ -17,6 +17,11 @@ export interface BlobOptions {
     // Shape contrast.
     contrast: number;
 
+    // Value to seed random number generator.
+    seed?: string;
+}
+
+export interface BlobOptions extends PathOptions {
     // Fill color.
     color?: string;
 
@@ -28,9 +33,6 @@ export interface BlobOptions {
         width: number;
     };
 
-    // Value to seed random number generator.
-    seed?: string;
-
     // Render points, handles and stroke.
     guides?: boolean;
 }
@@ -97,4 +99,46 @@ blobs.editable = (opt: BlobOptions): XmlElement => {
     });
 };
 
+blobs.path = (opt: PathOptions) => {
+    if (!opt) {
+        throw new Error("no options specified");
+    }
+
+    // Random number generator.
+    const rgen = rand(opt.seed || String(Date.now()));
+
+    if (!opt.size) {
+        throw new Error("no size specified");
+    }
+
+    if (opt.complexity <= 0 || opt.complexity > 1) {
+        throw new Error("complexity out of range ]0,1]");
+    }
+
+    if (opt.contrast < 0 || opt.contrast > 1) {
+        throw new Error("contrast out of range [0,1]");
+    }
+
+    const count = 3 + Math.floor(14 * opt.complexity);
+    const angle = 360 / count;
+    const radius = opt.size / Math.E;
+
+    const points: Point[] = [];
+    for (let i = 0; i < count; i++) {
+        const rand = 1 - 0.8 * opt.contrast * rgen();
+
+        points.push({
+            x: Math.sin(rad(i * angle)) * radius * rand + opt.size / 2,
+            y: Math.cos(rad(i * angle)) * radius * rand + opt.size / 2,
+        });
+    }
+
+    const smoothed = smooth(points, {
+        closed: true,
+        strength: ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2)),
+    });
+
+    return smoothed;
+};
+
 export default blobs;