speice.io/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx

import React, { useContext, useEffect } from "react";
import { xformFinal as final, xforms as transforms } from "../src/params";
import { PainterContext } from "../src/Canvas";
import { chaosGameHistogram } from "./chaosGameHistogram";

type Props = {
  paint: (width: number, height: number, histogram: number[]) => ImageData;
  children?: React.ReactElement;
}
export default function FlameHistogram({ paint, children }: Props) {
  const { width, height, setPainter } = useContext(PainterContext);

  useEffect(() => {
    const gameParams = {
      width,
      height,
      transforms,
      final,
      paint
    };
    setPainter(chaosGameHistogram(gameParams));
  }, [width, height]);

  return children;
}