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

import React, {useContext, useEffect} from "react";
import * as params from "../src/params";
import {PainterContext} from "../src/Canvas";
import {chaosGameHistogram} from "@site/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram";

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

    useEffect(() => {
        const gameParams = {
            width,
            height,
            transforms: params.xforms,
            final: params.xformFinal,
            quality,
            painter: paintFn
        }
        setPainter(chaosGameHistogram(gameParams));
    }, []);

    return children;
}