Incremental rendering

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

@@ -1,24 +1,40 @@
-// Hint: try increasing the iteration count
-const iterations = 10000;
+function Gasket() {
+    // Hint: try increasing the iteration count
+    const iterations = 10000;
 
-// Hint: negating `x` and `y` creates some interesting images
-const functions = [
-    (x, y) => [x / 2, y / 2],
-    (x, y) => [(x + 1) / 2, y / 2],
-    (x, y) => [x / 2, (y + 1) / 2]
-]
+    // Hint: negating `x` and `y` creates some interesting images
+    const functions = [
+        (x, y) => [x / 2, y / 2],
+        (x, y) => [(x + 1) / 2, y / 2],
+        (x, y) => [x / 2, (y + 1) / 2]
+    ]
 
-function chaosGame(image) {
-    var [x, y] = [randomBiUnit(), randomBiUnit()];
+    const image = new ImageData(600, 600);
+    function* chaosGame() {
+        var [x, y] = [randomBiUnit(), randomBiUnit()];
 
-    for (var count = 0; count < iterations; count++) {
-        const i = randomInteger(0, functions.length);
-        [x, y] = functions[i](x, y);
+        for (var count = 0; count < iterations; count++) {
+            const i = randomInteger(0, functions.length);
+            [x, y] = functions[i](x, y);
 
-        if (count > 20) {
-            plot(x, y, image);
+            if (count > 20) {
+                plot(x, y, image);
+            }
+
+            if (count % 1000 === 0) {
+                yield image;
+            }
         }
+
+        yield image;
     }
+
+    return (
+        <Canvas
+            width={image.width}
+            height={image.height}
+            painter={chaosGame()}/>
+    )
 }
 
-render(<Gasket renderFn={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;