Rewrite canvas to use React state management properly

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

@@ -1,6 +1,6 @@
-import {useEffect, useState} from "react";
-import Canvas from "../src/Canvas";
-import { Params, chaosGameWeighted } from "./chaosGameWeighted";
+import {useEffect, useState, useContext} from "react";
+import {PainterContext} from "../src/Canvas";
+import {chaosGameWeighted } from "./chaosGameWeighted";
 import TeX from '@matejmazur/react-katex';
 
 import styles from "../src/css/styles.module.css"
@@ -8,10 +8,6 @@ import styles from "../src/css/styles.module.css"
 type Transform = (x: number, y: number) => [number, number];
 
 export default function GasketWeighted() {
-    const image = new ImageData(600, 600);
-    const iterations = 100_000;
-    const step = 1000;
-
     const [f0Weight, setF0Weight] = useState<number>(1);
     const [f1Weight, setF1Weight] = useState<number>(1);
     const [f2Weight, setF2Weight] = useState<number>(1);
@@ -20,19 +16,14 @@ export default function GasketWeighted() {
     const f1: Transform = (x, y) => [(x + 1) / 2, y / 2];
     const f2: Transform = (x, y) => [x / 2, (y + 1) / 2];
 
-    const [game, setGame] = useState<Generator<ImageData>>(null);
+    const {setPainter} = useContext(PainterContext);
+
     useEffect(() => {
-        const params: Params = {
-            transforms: [
-                [f0Weight, f0],
-                [f1Weight, f1],
-                [f2Weight, f2]
-            ],
-            image,
-            iterations,
-            step
-        }
-        setGame(chaosGameWeighted(params))
+        setPainter(chaosGameWeighted([
+            [f0Weight, f0],
+            [f1Weight, f1],
+            [f2Weight, f2]
+        ]));
     }, [f0Weight, f1Weight, f2Weight]);
 
     const weightInput = (title, weight, setWeight) => (
@@ -47,7 +38,6 @@ export default function GasketWeighted() {
 
     return (
         <>
-            <Canvas width={image.width} height={image.height} painter={game}/>
             <div style={{paddingTop: '1em', display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
                 {weightInput("F_0", f0Weight, setF0Weight)}
                 {weightInput("F_1", f1Weight, setF1Weight)}

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

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

blog/2024-11-15-playing-with-fire/1-introduction/chaosGameWeighted.ts

@@ -2,15 +2,12 @@
 import { randomBiUnit } from "../src/randomBiUnit";
 import { randomChoice } from "../src/randomChoice";
 import { plot } from "./plot"
-export type Transform = (x: number, y: number) => [number, number];
-export type Params = {
-    transforms: [number, Transform][],
-    image: ImageData,
-    iterations: number,
-    step: number
-}
+import {Transform} from "../src/transform";
+const iterations = 50_000;
+const step = 1000;
 // hidden-end
-export function* chaosGameWeighted({transforms, image, iterations, step}: Params) {
+export function* chaosGameWeighted(transforms: [number, Transform][]) {
+    let image = new ImageData(500, 500);
     var [x, y] = [randomBiUnit(), randomBiUnit()];
 
     for (let i = 0; i < iterations; i++) {

blog/2024-11-15-playing-with-fire/1-introduction/index.mdx

@@ -177,7 +177,9 @@ import Scope from './scope'
 
 import chaosGameSource from '!!raw-loader!./chaosGame'
 
+<!--
 <Playground scope={Scope} noInline={true}>{chaosGameSource}</Playground>
+-->
 
 <hr/>
 
@@ -198,7 +200,9 @@ import chaosGameWeightedSource from "!!raw-loader!./chaosGameWeighted";
 
 <CodeBlock language={'typescript'}>{chaosGameWeightedSource}</CodeBlock>
 
-import BrowserOnly from "@docusaurus/BrowserOnly";
 import GasketWeighted from "./GasketWeighted"
+import Canvas from "../src/Canvas"
 
-<BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>
+<Canvas width={500} height={500}>
+    <GasketWeighted/>
+</Canvas>

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

@@ -1,12 +1,15 @@
+import {useContext} from "react";
 import { plot } from './plot';
 import { randomBiUnit } from '../src/randomBiUnit';
 import { randomInteger } from '../src/randomInteger';
-import Canvas from "../src/Canvas";
+import Canvas, {PainterContext} from "../src/Canvas";
 
 const Scope = {
+    Canvas,
+    PainterContext,
     plot,
     randomBiUnit,
     randomInteger,
-    Canvas
+    useContext,
 }
 export default Scope;