Incremental rendering

blog/2024-11-15-playing-with-fire/1-introduction/chaosGame.js

@@ -1,3 +1,4 @@
+function Gasket() {
     // Hint: try increasing the iteration count
     const iterations = 10000;
 
@@ -8,7 +9,8 @@ const functions = [
         (x, y) => [x / 2, (y + 1) / 2]
     ]
 
-function chaosGame(image) {
+    const image = new ImageData(600, 600);
+    function* chaosGame() {
         var [x, y] = [randomBiUnit(), randomBiUnit()];
 
         for (var count = 0; count < iterations; count++) {
@@ -18,7 +20,21 @@ function chaosGame(image) {
             if (count > 20) {
                 plot(x, y, image);
             }
+
+            if (count % 1000 === 0) {
+                yield image;
             }
         }
 
-render(<Gasket renderFn={chaosGame}/>)
+        yield image;
+    }
+
+    return (
+        <Canvas
+            width={image.width}
+            height={image.height}
+            painter={chaosGame()}/>
+    )
+}
+
+render(<Gasket/>)

blog/2024-11-15-playing-with-fire/1-introduction/scope.tsx

@@ -1,30 +1,12 @@
-import React, {useContext, useEffect} from "react";
 import randomBiUnit from './biunit';
 import plot from './plot';
 import randomInteger from './randint';
-import Canvas, {ImageContext} from "../src/Canvas";
-
-interface Props {
-    renderFn: (image: ImageData) => void;
-}
-function Render({renderFn}: Props) {
-    const {width, height, setImage} = useContext(ImageContext);
-    const image = new ImageData(width, height);
-
-    useEffect(() => {
-        renderFn(image);
-        setImage(image);
-    }, []);
-
-    return <></>;
-}
+import Canvas from "../src/Canvas";
 
 const Scope = {
     plot,
     randomBiUnit,
     randomInteger,
-    Canvas,
-    Gasket: ({renderFn}: Props) =>
-        <Canvas width={600} height={600}><Render renderFn={renderFn}/></Canvas>
+    Canvas
 }
 export default Scope;

blog/2024-11-15-playing-with-fire/src/Canvas.tsx

@@ -1,49 +1,54 @@
-import React, {createContext, useCallback, useContext, useEffect, useRef, useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import {useColorMode} from "@docusaurus/theme-common";
 
-interface IImageContext {
-    width: number;
-    height: number;
-    setImage: (image: ImageData) => void;
-}
-export const ImageContext = createContext<IImageContext>(null);
-
 interface Props {
     width: number;
     height: number;
+    painter: Iterator<ImageData>;
     children?: React.ReactNode;
 }
-export default function Canvas({width, height, children}) {
-    const [canvasCtx, setCanvasCtx] = useState<CanvasRenderingContext2D | null>(null);
+export default function Canvas({width, height, painter, children}: Props) {
+    const {colorMode} = useColorMode();
+    const [image, setImage] = useState<[ImageData]>(null);
+
+    const [canvasCtx, setCanvasCtx] = useState<CanvasRenderingContext2D>(null);
     const canvasRef = useCallback(node => {
         if (node !== null) {
             setCanvasCtx(node.getContext("2d"));
         }
     }, []);
 
-    const {colorMode} = useColorMode();
-    const [image, setImage] = useState<ImageData>(new ImageData(width, height));
     const paintImage = new ImageData(width, height);
-
-    useEffect(() => {
-        if (!canvasCtx) {
+    const paint = () => {
+        if (!canvasCtx || !image) {
             return;
         }
 
-        for (const [index, value] of image.data.entries()) {
-            // If dark mode is active, invert the color scheme
-            const adjustValue = colorMode === 'light' ? value : 255 - value;
-
-            // Alpha values never change
-            paintImage.data[index] = index % 4 === 3 ? value : adjustValue;
+        for (const [index, value] of image[0].data.entries()) {
+            if (index % 4 === 3) {
+                // Alpha values are copied as-is
+                paintImage.data[index] = value;
+            } else {
+                // If dark mode is active, invert the color
+                paintImage.data[index] = colorMode === 'light' ? value : 255 - value;
+            }
         }
 
-        console.log("Painting image");
         canvasCtx.putImageData(paintImage, 0, 0);
-    }, [canvasCtx, colorMode, image]);
+    }
+    useEffect(paint, [colorMode, image]);
+
+    const animate = () => {
+        const nextImage = painter.next().value;
+        if (nextImage) {
+            setImage([nextImage])
+            requestAnimationFrame(animate);
+        }
+    }
+    useEffect(animate, [canvasCtx]);
 
     return (
-        <ImageContext.Provider value={{width, height, setImage}}>
+        <>
             <canvas
                 ref={canvasRef}
                 width={width}
@@ -54,6 +59,6 @@ export default function Canvas({width, height, children}) {
                 }}
             />
             {children}
-        </ImageContext.Provider>
+        </>
     )
 }