Start on animations so I don't kill the browser

posts/2023/06/flam3/0-canvas.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { renderFn } from "./0-utility";
+import { Renderer, renderFn } from "./0-utility";
 
 export const Canvas: React.FC<{ f: renderFn }> = ({ f }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -29,3 +29,45 @@ export const Canvas: React.FC<{ f: renderFn }> = ({ f }) => {
 
   return <canvas ref={canvasRef} width={400} height={400} />;
 };
+
+export type CanvasParams = {
+  defaultUrl: string;
+  size: number;
+  qualityMax: number;
+  qualityStep: number;
+  renderer: Renderer;
+};
+
+export const CanvasRenderer: React.FC<{ params: CanvasParams }> = ({
+  params,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  var qualityCurrent: number = 0;
+
+  const animate = () => {
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    console.log("Animating");
+
+    const image = ctx.createImageData(params.size, params.size);
+    params.renderer.run(params.qualityStep);
+    params.renderer.render(image);
+    ctx.putImageData(image, 0, 0);
+
+    qualityCurrent += params.qualityStep;
+    if (qualityCurrent < params.qualityMax) {
+      requestAnimationFrame(animate);
+    }
+  };
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      requestAnimationFrame(animate);
+    }
+  }, []);
+
+  return <canvas ref={canvasRef} width={params.size} height={params.size} />;
+};