Randomly animate colors in circles on a grid

[trymbill]

I've got a grid of circles that I want to randomly (not all at the same time) change colors, animating from the last color to a new color and then setting a new random interval for when that circle changes color again.

I've tried implementing a useRandomInterval() hook that then changes the color value (just by changing the value directly for now, no animations yet) and even just with that implemented the JS thread is under quite some load (sitting at 30fps).

I'm wondering if there's a way to implement something like this purely with skia hooks so that the JS thread can stay at 60fps? Any ideas would be greatly appreciated!

const colors = [
  '#ff0000',
  '#333333',
  '#000000',
];

const { width, height } = Dimensions.get('window');

const D = 60;
const cols = new Array(Math.ceil(width / D)).fill(0).map((_, i) => i);
const rows = new Array(Math.ceil(height / D)).fill(0).map((_, i) => i);
const size = { width: width / cols.length, height: height / rows.length };

interface CircleProps {
  row: number;
  col: number;
}

const Dot = ({ row, col }: CircleProps) => {
  const r = 25;
  const x = col * D + size.width / 4;
  const y = row * D;
  const origin = vec(x, y);

  const color = useValue('#000000');

  useRandomInterval(
    () => {
      color.current = colors[Math.floor(Math.random() * colors.length)];
    },
    3000,
    10000
  );

  return (
    <Group origin={origin}>
      <Circle cx={x} cy={y} r={r} color={color} />
    </Group>
  );
};

const Layout = ({ children }: Props) => {
  return (
    <>
      <StatusBar style="dark" />

      <Canvas
        style={{
          flex: 1,
          width: width,
          height: height,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        <Group>
          <Fill color="#fafafa" />
          {rows.map((_i, row) =>
            cols.map((_j, col) => (
              <Dot row={row} col={col} key={`circle-${row}-${col}`} />
            ))
          )}
        </Group>
      </Canvas>
    </>
  );
};

[wcandillon]

If you are using animation values (https://shopify.github.io/react-native-skia/docs/animations/values) you should get a big performance improvement no?

[trymbill]

Yeah I'm changing a value from useValue() like this:

  const color = useValue(colors[0]);
  useRandomInterval(
    () => {
      color.current = colors[Math.floor(Math.random() * colors.length)];
    },
    3000,
    10000
  );

useRandomInterval just sets a setTimeout at a random interval between 3000 and 10000. UI thread stays at 60fps, but the dips in the JS thread is what concerns me:

dots.mov

I might just be overthinking this, but I thought maybe there'd be a way to achieve the same result with noise or maybe the clock. Or somehow get away from the 100+ setTimeout's on the JS thread.

[wcandillon]

may I ask how useRandomInterval looks like?

[trymbill]

Of course! It looks like this:

import { useRef, useEffect, useCallback } from 'react';

const random = (min: number, max: number) =>
  Math.floor(Math.random() * (max - min)) + min;

const useRandomInterval = (
  callback: () => void,
  minDelay: number,
  maxDelay: number
) => {
  const timeoutId = useRef<NodeJS.Timeout | undefined>(undefined);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    let isEnabled =
      typeof minDelay === 'number' && typeof maxDelay === 'number';

    if (isEnabled) {
      const handleTick = () => {
        const nextTickAt = random(minDelay, maxDelay);
        timeoutId.current = setTimeout(() => {
          savedCallback.current();
          handleTick();
        }, nextTickAt);
      };
      handleTick();
    }

    return () => clearTimeout(timeoutId.current);
  }, [minDelay, maxDelay]);

  const cancel = useCallback(function () {
    clearTimeout(timeoutId.current);
  }, []);
  return cancel;
};

Thanks for the questions and help on this, really appreciate it! I could toss this into a snack if there ends up being a possible way of optimizing something like this.

[trymbill]

I attempted a rough idea of animating the circles with runTiming and that seems to have solidified that I'm doing something wrong, or at least approaching this idea the wrong way. Running something like the code snippet below, where I have 3 circles in 3 different colors rendered in the same place, but animate the opacity in/out randomly, seems to bring the JS thread down to 10 fps.

const Dot = memo(({ row, col }: DotProps) => {
  [...]

  const primaryOpacity = useValue(0);
  const secondaryOpacity = useValue(0);

  useRandomInterval(
    () => {
      const newIndex = randomColorIndex();
      if (newIndex === 5) {
        runTiming(primaryOpacity, 1, { duration: 2500 });
        runTiming(secondaryOpacity, 0, { duration: 500 });
      } else if (newIndex === 6) {
        runTiming(secondaryOpacity, 1, { duration: 2500 });
        runTiming(primaryOpacity, 0, { duration: 500 });
      } else {
        runTiming(primaryOpacity, 0, { duration: 500 });
        runTiming(secondaryOpacity, 0, { duration: 500 });
      }
    },
    5000,
    20000
  );

  return (
    <Group origin={origin}>
      <Circle cx={x} cy={y} r={r} color={theme.colors.blueGray[200]} />
      <Circle
        cx={x}
        cy={y}
        r={r}
        color={theme.colors.primary[500]}
        opacity={primaryOpacity}
      />
      <Circle
        cx={x}
        cy={y}
        r={r}
        color={theme.colors.secondary[900]}
        opacity={secondaryOpacity}
      />
    </Group>
  );
});

I've also added <Blur /> to the <Canvas />, so it looks like this:

animating-dots.mov