Animate a non-regular rectangle using four points.

[blackazaru]

I want to animate a non-regular rectangle to new points that arrive every 100ms. (I am creating an object detection component for react-native-vision-camera.) I have tried animating the rectangle using four points, but I don't have any ideas on how to animate it to new random points every 100ms.

I hope to benefit from the community's experience.

const MissionsTab: React.FC = () => {
  const progress = useSharedValue(0);
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  const points = useSharedValue<{
    x1: number;
    y1: number;
    x2: number;
    y2: number;
    x3: number;
    y3: number;
    x4: number;
    y4: number;
  }>({
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    x3: 0,
    y3: 0,
    x4: 0,
    y4: 0,
  });
  const newPoints = useSharedValue<{
    x1: number;
    y1: number;
    x2: number;
    y2: number;
    x3: number;
    y3: number;
    x4: number;
    y4: number;
  }>({
    x1: 0,
    y1: 0,
    x2: 100,
    y2: 0,
    x3: 100,
    y3: 100,
    x4: 0,
    y4: 100,
  });

  let oldPath = useSharedValue(Skia.Path.Make());

  oldPath.value.moveTo(points.value.x1, points.value.y1);
  oldPath.value.lineTo(points.value.x2, points.value.y2);
  oldPath.value.lineTo(points.value.x3, points.value.y3);
  oldPath.value.lineTo(points.value.x4, points.value.y4);
  oldPath.value.close();

  let newPath = useSharedValue(Skia.Path.Make());

  newPath.value.moveTo(newPoints.value.x1, newPoints.value.y1);
  newPath.value.lineTo(newPoints.value.x2, newPoints.value.y2);
  newPath.value.lineTo(newPoints.value.x3, newPoints.value.y3);
  newPath.value.lineTo(newPoints.value.x4, newPoints.value.y4);
  newPath.value.close();


  
  let path = usePathInterpolation(progress, [0, 1], [oldPath.value, newPath.value]);


  useEffect(() => {
    progress.value = withRepeat(withTiming(1, {duration: 1000}), -1, false);

    setInterval(() => {
      points.value = {
        x1: newPoints.value.x1,
        y1: newPoints.value.y1,
        x2: newPoints.value.x2,
        y2: newPoints.value.y2,
        x3: newPoints.value.x3,
        y3: newPoints.value.y3,
        x4: newPoints.value.x4,
        y4: newPoints.value.y4,
      };

      newPoints.value = {
        x1: newPoints.value.x1 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y1: newPoints.value.y1 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x2: newPoints.value.x2 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y2: newPoints.value.y2 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x3: newPoints.value.x3 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y3: newPoints.value.y3 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x4: newPoints.value.x4 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y4: newPoints.value.y4 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
      };
    }, 1000);
  }, []);
 
  
  return (
    <Canvas style={{ 
      width:  windowWidth,
      height: windowHeight,
    }}>
      <Path path={path} style="stroke" strokeWidth={5} strokeCap="round"/>
    </Canvas>
  );
};```

[blackazaru]

Here is a working solution; however, I hope someone can provide a better or more efficient solution.

const PathView: React.FC<PathProps> = ({newPoints}) => {
  const [points, setPoints] = useState({
    x1: 0,
    y1: 0,
    x2: 100,
    y2: 0,
    x3: 100,
    y3: 100,
    x4: 0,
    y4: 100,
  });
  const progress = useSharedValue(0);
  let oldPath = useSharedValue(Skia.Path.Make());
  let newPath = useSharedValue(Skia.Path.Make());

  useEffect(() => {
    progress.value = 0;
    progress.value = withTiming(1, {
      duration: 190,
    })

    oldPath.value.reset();
    oldPath.value.moveTo(points.x1, points.y1);
    oldPath.value.lineTo(points.x2, points.y2);
    oldPath.value.lineTo(points.x3, points.y3);
    oldPath.value.lineTo(points.x4, points.y4);
    oldPath.value.close();
  
    newPath.value.reset();
    newPath.value.moveTo(newPoints.x1, newPoints.y1);
    newPath.value.lineTo(newPoints.x2, newPoints.y2);
    newPath.value.lineTo(newPoints.x3, newPoints.y3);
    newPath.value.lineTo(newPoints.x4, newPoints.y4);
    newPath.value.close();

    setPoints(newPoints);
  }, [newPoints]);

  const animatedPath = usePathInterpolation(progress, [0, 1], [oldPath.value, newPath.value]);

  return (
      <Path path={animatedPath} style="stroke" strokeWidth={1} color={'blue'} />
  );
}

const Main: React.FC = () => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  const [points, setPoints] = useState({
    x1: 0,
    y1: 0,
    x2: 100,
    y2: 0,
    x3: 100,
    y3: 100,
    x4: 0,
    y4: 100,
  });

  useEffect(() => {
    setInterval(() => {
      setPoints({
        x1: points.x1 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y1: points.y1 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x2: points.x2 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y2: points.y2 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x3: points.x3 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y3: points.y3 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        x4: points.x4 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
        y4: points.y4 + Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1),
      })
    }, 200);
  }, []);
 
  return (
    <Canvas style={{ 
      width:  windowWidth,
      height: windowHeight,
    }}>
      <PathView newPoints={points} />
    </Canvas>
  );
};