Crash when interpolating to a shorter path

Hi !

When interpolating from a longer path to a shorter one I have the following crash:

    const longer = parse('M50,10 L100 100 L200 200 L500 500');
    const shorter = parse('M50,10 L200 200 L400 400');
    const pathAnimatedProps = useAnimatedProps(() => ({
        d: interpolatePath(transition.value, [0, 1], [longer, shorter])
    }));

When going to other way around (from shorter to longer) i have the same problem as in issue https://github.com/wcandillon/react-native-redash/issues/415

[jadhaidar]

Hello everyone. I was able to get it to work quite nicely using a pretty simple trick.

Note that my values are scaled uniformly along the x-axis using their index, and not their value. Your use case may differ.

So the idea is we need to interpolate between paths of varying lengths. Instead of re-implementing the interpolatePath function to support that use case - I chose to “prepare” the paths beforehand and simply provide them with equal lengths to interpolatePaths.

The big question was: how do you add or remove points to a path without changing the way it looks?

Easy. Re-scale the values along the x-axis using the same number of data points as our output path, and then for every x, get the corresponding y value from the original path.

Here’s the code snippet for the helper function I created, it returns a new path that has the same amount of data points as specified with the precision param:

// precision is a number corresponding to the number
// of data points we'd like to have in our new path
const normalize = (path, precision, width) => {
  const scaleX = scaleLinear().domain([0, precision - 1]).range([0, width]);

  // create an array of length precision
  const values = Array(precision)
    .fill([])
    .map((_, index) => {
      // re-scale the X value using the new index
      const x = scaleX(index);

      // and now compute the corresponding Y value on the original path
      // for the new x position 
      // using redash's `getYForX`
      const y = getYForX(path, x);
      return [x, y];
    });

  return parse(
    line()
      .x(([x]) => x)
      .y(([, y]) => y)
      .curve(curveLinear)(values)
  );
};

This solution works pretty well, but it is not perfect. The normalized path will lose some detail when removing data points (especially noticeable on points that have a high delta value compared to their surrounding neighbours, i.e. big spike on the path). It will do for now, but any input to help improve this would be much appreciated!

Now the next question is: how can we remove points in a less arbitrary way? i.e. preserve the points with the highest deltas, and ditch those with smaller ones?

[Stevemoretz]

It woule be great to have more support on interpolatePath function.

+1