useShaderToyUniforms.ts

import * as React from 'react';

export type VectorizedBounds2D = readonly [width: number, height: number];

export type ShaderToyDynamics = {
  readonly iFrame: number;
  readonly iTime: number;
};

export type ShaderToyUniforms = ShaderToyDynamics & {
  readonly iResolution: VectorizedBounds2D;
};

type State = ShaderToyDynamics & {
  readonly startTime: number;
};

export default function useShaderToyUniforms({
  height,
  width,
}: {
  readonly height: number;
  readonly width: number;
}): ShaderToyUniforms {
  const [{iTime, iFrame}, setState] = React.useState<State>(() => ({
    iFrame: 0,
    iTime: 0,
    startTime: new Date().getTime(),
  }));
  const iResolution = React.useMemo<VectorizedBounds2D>(() => [width, height], [
    width,
    height,
  ]);
  React.useEffect(() => {
    const i = setInterval(() =>
      setState(({iFrame, startTime}: State) => ({
        iFrame: iFrame + 1,
        iTime: (new Date().getTime() - startTime) / 1000,
        startTime,
      }))
    );
    return () => {
      clearInterval(i);
    };
  }, []);
  return {
    iFrame,
    iResolution,
    iTime,
  };
}