Add extrapolation to interpolatePaths() (#662)

Author: wcandillon

package/src/animation/functions/interpolate.ts

@@ -60,7 +60,9 @@ function isExtrapolate(value: string): value is Extrapolate {
 
 // validates extrapolations type
 // if type is correct, converts it to ExtrapolationConfig
-function validateType(type: ExtrapolationType): RequiredExtrapolationConfig {
+export function validateInterpolationOptions(
+  type: ExtrapolationType
+): RequiredExtrapolationConfig {
   // initialize extrapolationConfig with default extrapolation
   const extrapolationConfig: RequiredExtrapolationConfig = {
     extrapolateLeft: Extrapolate.EXTEND,
@@ -151,7 +153,7 @@ export function interpolate(
     );
   }
 
-  const extrapolationConfig = validateType(type);
+  const extrapolationConfig = validateInterpolationOptions(type);
   const { length } = input;
   const narrowedInput: InterpolationNarrowedInput = {
     leftEdgeInput: input[0],

package/src/animation/functions/interpolatePaths.ts

@@ -1,10 +1,26 @@
 import type { SkPath } from "../../skia/types";
+import { exhaustiveCheck } from "../../renderer/typeddash";
+
+import type { ExtrapolationType } from "./interpolate";
+import { validateInterpolationOptions, Extrapolate } from "./interpolate";
+
+const lerp = (
+  value: number,
+  from: number,
+  to: number,
+  p1: SkPath,
+  p2: SkPath
+) => {
+  const t = (value - from) / (to - from);
+  return p2.interpolate(p1, t)!;
+};
 
 /**
  * Maps an input value within a range to an output path within a path range.
  * @param value - The input value.
  * @param inputRange - The range of the input value.
  * @param outputRange - The range of the output path.
+ * @param options - Extrapolation options
  * @returns The output path.
  * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
  * const path1 = new Path();
@@ -18,21 +34,54 @@ import type { SkPath } from "../../skia/types";
 export const interpolatePaths = (
   value: number,
   input: number[],
-  outputRange: SkPath[]
+  outputRange: SkPath[],
+  options?: ExtrapolationType
 ) => {
+  const extrapolation = validateInterpolationOptions(options);
+  if (value < input[0]) {
+    switch (extrapolation.extrapolateLeft) {
+      case Extrapolate.CLAMP:
+        return outputRange[0];
+      case Extrapolate.EXTEND:
+        return lerp(value, input[0], input[1], outputRange[0], outputRange[1]);
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateLeft);
+    }
+  } else if (value > input[input.length - 1]) {
+    switch (extrapolation.extrapolateRight) {
+      case Extrapolate.CLAMP:
+        return outputRange[outputRange.length - 1];
+      case Extrapolate.EXTEND:
+        return lerp(
+          value,
+          input[input.length - 2],
+          input[input.length - 1],
+          outputRange[input.length - 2],
+          outputRange[input.length - 1]
+        );
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateRight);
+    }
+  }
   let i = 0;
   for (; i <= input.length - 1; i++) {
     if (value >= input[i] && value <= input[i + 1]) {
       break;
     }
-    if (i === input.length - 1) {
-      if (value < input[0]) {
-        return outputRange[0];
-      } else {
-        return outputRange[i];
-      }
-    }
   }
-  const t = (value - input[i]) / (input[i + 1] - input[i]);
-  return outputRange[i + 1].interpolate(outputRange[i], t)!;
+  return lerp(
+    value,
+    input[i],
+    input[i + 1],
+    outputRange[i],
+    outputRange[i + 1]
+  );
 };

package/src/skia/__tests__/Path.spec.ts

@@ -185,7 +185,12 @@ describe("Path", () => {
     const path3 = Skia.Path.Make();
     path3.moveTo(0, 0);
     path3.lineTo(200, 200);
-    const path = interpolatePaths(-1, [0, 0.5, 1], [path1, path2, path3]);
+    const path = interpolatePaths(
+      -1,
+      [0, 0.5, 1],
+      [path1, path2, path3],
+      "clamp"
+    );
     expect(path.toCmds().flat()).toEqual(path1.toCmds().flat());
   });
 
@@ -200,7 +205,12 @@ describe("Path", () => {
     const path3 = Skia.Path.Make();
     path3.moveTo(0, 0);
     path3.lineTo(200, 200);
-    const path = interpolatePaths(2, [0, 0.5, 1], [path1, path2, path3]);
+    const path = interpolatePaths(
+      2,
+      [0, 0.5, 1],
+      [path1, path2, path3],
+      "clamp"
+    );
     expect(path.toCmds()).toEqual(path3.toCmds());
   });
 
@@ -300,4 +310,71 @@ describe("Path", () => {
     }
     processResult(surface, "snapshots/path/interpolate.png");
   });
+
+  it("should support overshooting values in path interpolation", () => {
+    const { Skia } = setupSkia();
+    const p1 = Skia.Path.Make();
+    p1.moveTo(0, 0);
+    p1.lineTo(100, 100);
+
+    const p2 = Skia.Path.Make();
+    p2.moveTo(0, 100);
+    p2.lineTo(100, 0);
+
+    const p3 = p2.interpolate(p1, 1.1)!;
+    expect(p3).not.toBeNull();
+    const [[, moveX, moveY], [, lineX, lineY]] = p3.toCmds();
+    expect(moveX).toBe(0);
+    expect(moveY).toBe(110);
+    expect(lineX).toBe(100);
+    expect(lineY).toBe(-10);
+
+    const p4 = p2.interpolate(p1, -0.1)!;
+    expect(p4).not.toBeNull();
+    const [[, moveX1, moveY1], [, lineX1, lineY1]] = p4.toCmds();
+    expect(moveX1).toBe(0);
+    expect(moveY1).toBe(-10);
+    expect(lineX1).toBe(100);
+    expect(lineY1).toBe(110);
+  });
+
+  it("interpolatePath() should support overshooting values", () => {
+    const { Skia } = setupSkia();
+    const p1 = Skia.Path.Make();
+    p1.moveTo(0, 0);
+    p1.lineTo(100, 100);
+
+    const p2 = Skia.Path.Make();
+    p2.moveTo(0, 100);
+    p2.lineTo(100, 0);
+
+    const ref1 = Skia.Path.Make();
+    ref1.moveTo(0, -10);
+    ref1.lineTo(100, 110);
+
+    const ref2 = Skia.Path.Make();
+    ref2.moveTo(0, 110);
+    ref2.lineTo(100, -10);
+
+    const p3 = interpolatePaths(-0.1, [0, 1], [p1, p2]);
+    expect(p3.toCmds()).toEqual(ref1.toCmds());
+    const p4 = interpolatePaths(1.1, [0, 1], [p1, p2]);
+    expect(p4.toCmds()).toEqual(ref2.toCmds());
+  });
+
+  it("interpolatePath() should support clamping left and right values", () => {
+    const { Skia } = setupSkia();
+    const p1 = Skia.Path.Make();
+    p1.moveTo(0, 0);
+    p1.lineTo(100, 100);
+
+    const p2 = Skia.Path.Make();
+    p2.moveTo(0, 100);
+    p2.lineTo(100, 0);
+
+    const p3 = interpolatePaths(-0.1, [0, 1], [p1, p2], "clamp");
+    expect(p3.toCmds()).toEqual(p1.toCmds());
+    const p4 = interpolatePaths(1.1, [0, 1], [p1, p2], "clamp");
+    expect(p4.toCmds()).toEqual(p2.toCmds());
+  });
 });