add option for smoothing strength during interpolation

Author: g-harel

internal/animate/interpolate.ts

@@ -44,14 +44,13 @@ export const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shap
     return shape;
 };
 
-// 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)));
+export const interpolateBetweenSmooth = (strength: number, percentage: number, a: Shape, b: Shape): Shape => {
+    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);
+    const smoothed = smooth(interpolated, Math.sqrt(strength + 0.25)/3);
     return mapShape(interpolated, ({index, curr}) => {
         const sp = smoothed[index];
         curr.handleIn.angle = interpolateAngle(strength, curr.handleIn.angle, sp.handleIn.angle);

internal/animate/testing/script.ts

@@ -185,9 +185,9 @@ 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);
+        return interpolateBetweenSmooth(1, 2 * percentage, a, b);
     } else {
-        return interpolateBetweenSmooth(-2 * percentage + 2, a, b);
+        return interpolateBetweenSmooth(1, -2 * percentage + 2, a, b);
     }
 };
 

internal/render/canvas.ts

@@ -31,7 +31,6 @@ const drawPoint = (ctx: CanvasRenderingContext2D, p: Coord, style: string) => {
     ctx.fillStyle = backupFillStyle;
 };
 
-// OPT draw cutout
 export const drawShape = (ctx: CanvasRenderingContext2D, debug: boolean, shape: Shape) => {
     if (shape.length < 2) throw new Error("not enough points");