allow percentages outside regular range

Author: g-harel

internal/animate/ease.ts

@@ -1,17 +1,22 @@
 import {InterpolationFunc} from "./types";
 
-export const linear: InterpolationFunc = (progress: number) => {
-    return progress;
+export const linear: InterpolationFunc = (percentage: number) => {
+    return percentage;
 };
 
-export const ease: InterpolationFunc = (progress: number) => {
-    return 0.5 + 0.5 * Math.sin(Math.PI * (progress + 1.5));
+export const ease: InterpolationFunc = (percentage: number) => {
+    return 0.5 + 0.5 * Math.sin(Math.PI * (percentage + 1.5));
 };
 
-export const easeStart: InterpolationFunc = (progress: number) => {
-    return progress ** 2;
+export const easeStart: InterpolationFunc = (percentage: number) => {
+    return percentage ** 2;
 };
 
-export const easeEnd: InterpolationFunc = (progress: number) => {
-    return 1 - (progress - 1) ** 2;
+export const easeEnd: InterpolationFunc = (percentage: number) => {
+    return 1 - (percentage - 1) ** 2;
+};
+
+export const easeOutElastic: InterpolationFunc = (percentage: number) => {
+    const p = 0.1;
+    return Math.pow(2, -10 * percentage) * Math.sin(((percentage - p / 4) * (2 * Math.PI)) / p) + 1;
 };

internal/animate/interpolate.ts

@@ -1,8 +1,8 @@
 import {Shape} from "../types";
 import {split, splitLine, mod} from "../util";
 
-// TODO allow percentage > 1
 // OPT? loop
+// TODO smooth between
 
 const interpolateAngle = (percentage: number, a: number, b: number): number => {
     const tau = Math.PI * 2;
@@ -20,17 +20,18 @@ const interpolateAngle = (percentage: number, a: number, b: number): number => {
 
 const interpolateBetween = (percentage: number, a: Shape, b: Shape): Shape => {
     if (a.length !== b.length) throw new Error("shapes have different number of points");
+    const clamped = Math.min(1, Math.max(0, percentage));
     const shape: Shape = [];
     for (let i = 0; i < a.length; i++) {
         shape.push({
             ...splitLine(percentage, a[i], b[i]),
             handleIn: {
                 angle: interpolateAngle(percentage, a[i].handleIn.angle, b[i].handleIn.angle),
-                length: split(percentage, a[i].handleIn.length, b[i].handleIn.length),
+                length: split(clamped, a[i].handleIn.length, b[i].handleIn.length),
             },
             handleOut: {
                 angle: interpolateAngle(percentage, a[i].handleOut.angle, b[i].handleOut.angle),
-                length: split(percentage, a[i].handleOut.length, b[i].handleOut.length),
+                length: split(clamped, a[i].handleOut.length, b[i].handleOut.length),
             },
         });
     }
@@ -41,6 +42,6 @@ export const interpolateBetweenLoop = (percentage: number, a: Shape, b: Shape):
     if (percentage < 0.5) {
         return interpolateBetween(2 * percentage, a, b);
     } else {
-        return interpolateBetween(2 * percentage - 1, b, a);
+        return interpolateBetween(-2 * percentage + 2, a, b);
     }
 };

internal/animate/testing/script.ts

@@ -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(a, b)));
+    drawShape(ctx, debug, interpolateBetweenLoop(percentage, ...prepShapes(b, a)));
 };
 
 const testPrepShapesD = (percentage: number) => {

internal/animate/types.ts

@@ -1,3 +1,3 @@
 export interface InterpolationFunc {
-    (progress: number): number;
+    (percentage: number): number;
 }

internal/types.ts

@@ -11,7 +11,6 @@ export interface Handle {
     length: number;
 }
 
-// TODO? use four coord instead of angles
 export interface Point extends Coord {
     // Cubic bezier handles.
     handleIn: Handle;

internal/util.ts

@@ -61,7 +61,6 @@ const collapseHandle = (point: Coord, handle: Coord): Handle => ({
     length: Math.sqrt((handle.x - point.x) ** 2 + (handle.y - point.y) ** 2),
 });
 
-// TODO make more precise
 export const length = (a: Point, b: Point): number => {
     const aHandle = expandHandle(a, a.handleOut);
     const bHandle = expandHandle(b, b.handleIn);