add interpolation func that smoothes on every frame

Author: g-harel

internal/animate/interpolate.ts

@@ -1,9 +1,8 @@
 import {Shape} from "../types";
-import {split, splitLine, mod} from "../util";
-
-// OPT? loop
-// TODO smooth between
+import {split, splitLine, mod, smooth, mapShape} from "../util";
 
+// Interpolates between angles a and b. Angles are normalized to avoid unnecessary rotation.
+// Direction is chosen to produce the smallest possible movement.
 const interpolateAngle = (percentage: number, a: number, b: number): number => {
     const tau = Math.PI * 2;
     let aNorm = mod(a, tau);
@@ -18,9 +17,16 @@ const interpolateAngle = (percentage: number, a: number, b: number): number => {
     return split(percentage, aNorm, bNorm);
 };
 
-const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shape => {
+// Interpolates linearly between shapes a and b. Can only interpolate between shapes 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");
+
+    // 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 = [];
     for (let i = 0; i < a.length; i++) {
         shape.push({
@@ -38,10 +44,20 @@ const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shape => {
     return shape;
 };
 
-export const interpolateBetweenLoop = (percentage: number, a: Shape, b: Shape): Shape => {
-    if (percentage < 0.5) {
-        return interpolateBetween(2 * percentage, a, b);
-    } else {
-        return interpolateBetween(-2 * percentage + 2, a, b);
-    }
+// OPT smooth strength
+// 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).
+export const interpolateBetweenSmooth = (percentage: number, a: Shape, b: Shape): Shape => {
+    const strength = Math.min(1, Math.min(Math.abs(0 - percentage), Math.abs(1 - percentage)));
+    const interpolated = interpolateBetween(percentage, a, b);
+    const smoothed = smooth(interpolated, strength);
+    return mapShape(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);
+        curr.handleOut.angle = interpolateAngle(strength, curr.handleOut.angle, sp.handleOut.angle);
+        curr.handleOut.length = split(strength, curr.handleOut.length, sp.handleOut.length);
+        return curr;
+    });
 };

internal/animate/testing/script.ts

@@ -1,7 +1,7 @@
-import {interpolateBetweenLoop} from "../interpolate";
+import {interpolateBetweenSmooth} from "../interpolate";
 import {divideShape, prepShapes} from "../prepare";
 import {Coord, Point, Shape} from "../../types";
-import {length, insertAt, insertCount, rad, mod, mapShape, forShape} from "../../util";
+import {length, insertAt, insertCount, rad, mod, mapShape, forShape, smooth} from "../../util";
 import {clear, drawInfo, drawShape} from "../../render/canvas";
 import {genBlob} from "../../blobs";
 import {rand} from "../../rand";
@@ -101,13 +101,13 @@ 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, interpolateBetweenLoop(percentage, a, b));
+    drawShape(ctx, debug, loopBetween(percentage, a, b));
 };
 
 const testPrepShapesA = (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, interpolateBetweenLoop(percentage, ...prepShapes(a, b)));
+    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
 };
 
 const testPrepShapesB = (percentage: number) => {
@@ -118,7 +118,7 @@ const testPrepShapesB = (percentage: number) => {
         point(0.6, 0.4, 0, 0, 0, 0),
         point(0.45, 0.4, 0, 0, 0, 0),
     ];
-    drawShape(ctx, debug, interpolateBetweenLoop(percentage, ...prepShapes(a, b)));
+    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
 };
 
 const testPrepShapesC = (percentage: number) => {
@@ -137,7 +137,7 @@ 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, interpolateBetweenLoop(percentage, ...prepShapes(b, a)));
+    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(b, a)));
 };
 
 const testPrepShapesD = (percentage: number) => {
@@ -147,7 +147,26 @@ const testPrepShapesD = (percentage: number) => {
         point(0.525, 0.725, 0, 0, 0, 0),
         point(0.525, 0.725, 0, 0, 0, 0),
     ];
-    drawShape(ctx, debug, interpolateBetweenLoop(percentage, ...prepShapes(a, b)));
+    drawShape(ctx, debug, loopBetween(percentage, ...prepShapes(a, b)));
+};
+
+const testPrepLetters = (percentage: number) => {
+    const a: Shape = [
+        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),
+        point(0.7, 0.25, 0, 0, 0, 0),
+        point(0.7, 0.4, 0, 0, 0, 0),
+        point(0.8, 0.4, 0, 0, 0, 0),
+        point(0.8, 0.35, 0, 0, 0, 0),
+        point(0.75, 0.35, 0, 0, 0, 0),
+        point(0.75, 0.3, 0, 0, 0, 0),
+        point(0.85, 0.3, 0, 0, 0, 0),
+        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 blob = (seed: string, count: number, scale: number, offset: Coord): Shape => {
@@ -164,6 +183,14 @@ const blob = (seed: string, count: number, scale: number, offset: Coord): Shape
     });
 };
 
+const loopBetween = (percentage: number, a: Shape, b: Shape): Shape => {
+    if (percentage < 0.5) {
+        return interpolateBetweenSmooth(2 * percentage, a, b);
+    } else {
+        return interpolateBetweenSmooth(-2 * percentage + 2, a, b);
+    }
+};
+
 (() => {
     let percentage = animationStart;
 
@@ -179,6 +206,7 @@ const blob = (seed: string, count: number, scale: number, offset: Coord): Shape
         testPrepShapesB(percentage);
         testPrepShapesC(percentage);
         testPrepShapesD(percentage);
+        testPrepLetters(percentage);
 
         percentage += animationSpeed / 1000;
         percentage = mod(percentage, 1);