add initial design of animation api

Author: g-harel

internal/animate/prepare.ts

@@ -12,23 +12,22 @@ import {
 } from "../util";
 import {Point} from "../types";
 
-// TODO OPT extract optimization logic
 const optimizeOrder = (a: Point[], b: Point[]): Point[] => {
     const count = a.length;
 
-    let minSum = Infinity;
+    let minTotal = Infinity;
     let minOffset = 0;
     let minOffsetBase: Point[] = [];
 
     const setMinOffset = (points: Point[]) => {
         for (let i = 0; i < count; i++) {
-            let sum = 0;
+            let total = 0;
             for (let j = 0; j < count; j++) {
-                sum += (100 * distance(a[j], points[mod(j + i, count)])) ** 1 / 2;
-                if (sum > minSum) break;
+                total += (100 * distance(a[j], points[mod(j + i, count)])) ** 2;
+                if (total > minTotal) break;
             }
-            if (sum <= minSum) {
-                minSum = sum;
+            if (total <= minTotal) {
+                minTotal = total;
                 minOffset = i;
                 minOffsetBase = points;
             }

internal/animate/testing/script.ts

@@ -233,6 +233,21 @@ const blob = (seed: string, count: number, scale: number, offset: Coord): Point[
 };
 
 const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
+    // Draw before/after shapes + point path.
+    ctx.save();
+    ctx.strokeStyle = "#ffaaaa";
+    drawClosed(ctx, false, a);
+    ctx.strokeStyle = "#aaaaff";
+    drawClosed(ctx, false, b);
+    ctx.strokeStyle = "#33ff33";
+    for (let i = 0; i < a.length; i++) {
+        ctx.beginPath();
+        ctx.moveTo(a[i].x, a[i].y);
+        ctx.lineTo(b[i].x, b[i].y);
+        ctx.stroke();
+    }
+    ctx.restore();
+
     if (percentage < 0.5) {
         return interpolateBetweenSmooth(1, 2 * percentage, a, b);
     } else {

public/animate.ts

@@ -0,0 +1,25 @@
+/*
+// API
+interface Keyframe {
+    duration: number;
+    easing: "ease" | "linear" | "bounce"; // ...
+    blobOptions: BlobOptions;
+}
+interface CanvasKeyframe extends Keyframe {
+    canvasOptions: CanvasOptions;
+}
+interface Animation<K extends Keyframe, T = void> {
+    start(blobOptions: BlobOptions, otherOptions: T) => Animation<T>;
+    // TODO how to handle interrupts
+    // TODO remove keyframe type
+    wait(delay: number) => Promise<Animation<T>>;
+    next(keyframe: K) => Promise<Animation<T>>;
+}
+export const canvasPath(callback: (path: Path2D) => void) => Animation<CanvasKeyframe, CanvasOptions>;
+
+// example
+const animation = animate.canvasPath(callback);
+animation.start(blobOptions, canvasOptions);
+animation.next(keyframe);
+
+*/