Updated gasket, fixed charts

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

@@ -0,0 +1,34 @@
+import {useEffect, useRef} from "react";
+
+interface Props {
+    renderFn: (ImageData) => void
+}
+
+export const Canvas: React.FC<Props> = ({renderFn}: Props) => {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+    useEffect(() => {
+        const ctx = canvasRef.current?.getContext("2d");
+        if (!ctx) {
+            console.log("Canvas not ready");
+        }
+
+        const image = ctx.createImageData(canvasRef.current.width, canvasRef.current.height);
+        renderFn(image);
+        ctx.putImageData(image, 0, 0);
+    }, []);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            width={600}
+            height={600}
+            style={{
+                aspectRatio: '1 / 1',
+                width: '100%',
+            }}
+        />
+    );
+};
+
+export default Canvas;

blog/2024-11-15-playing-with-fire/1-introduction/Gasket.jsx

@@ -1,5 +1,7 @@
-function Gasket(props) {
+// Hint: try increasing the iteration count
-    const iterations = 1000;
+const iterations = 10000;
+
+// Hint: negating `x` and `y` also creates some interesting images
 const functions = [
     (x, y) => [x / 2, y / 2],
     (x, y) => [(x + 1) / 2, y / 2],
@@ -9,35 +11,14 @@ function Gasket(props) {
 function chaosGame(image) {
     var [x, y] = [randomBiUnit(), randomBiUnit()];
 
-        for (var i = 0; i < iterations; i++) {
+    for (var count = 0; count < iterations; count++) {
-            const f = functions[randomInteger(0, functions.length)];
+        const i = randomInteger(0, functions.length);
-            [x, y] = f(x, y);
+        [x, y] = functions[i](x, y);
 
-            if (i > 20) {
+        if (count > 20) {
             plot(x, y, image);
         }
     }
 }
 
-    function onClickRender() {
+render(<Canvas renderFn={chaosGame}/>)
-        /** @type{HTMLCanvasElement} */
-        const canvas = document.getElementById('canvas-gasket');
-        const context = canvas.getContext('2d');
-        const image = context.createImageData(canvas.width, canvas.height);
-        chaosGame(image);
-        context.putImageData(image, 0, 0);
-    }
-
-    return <div style={{width: '100%'}}>
-        <center>
-            <button onClick={onClickRender}>Play chaos game</button>
-            <hr/>
-        </center>
-        <div>
-            <canvas
-                id={'canvas-gasket'}
-                style={{width: '100%', aspectRatio: '1 / 1'}}
-            />
-        </div>
-    </div>
-}

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

@@ -53,28 +53,16 @@ like a coordinate chart.
 
 For example, if we say $S = \{(0,0), (1, 1), (2, 2)\}$, there are three points to plot:
 
-import Plot from "react-plotly.js"
+import {VictoryChart, VictoryTheme, VictoryScatter, VictoryLegend} from "victory";
+export const simpleData = [
+    {x: 0, y: 0},
+    {x: 1, y: 1},
+    {x: 2, y: 2}
+]
 
-<center>
+<VictoryChart theme={VictoryTheme.clean}>
-    <Plot
+    <VictoryScatter data={simpleData} size={5} style={{data: {fill: "blue"}}}/>
-        data={[
+</VictoryChart>
-            {
-                x: [0, 1, 2],
-                y: [0, 1, 2],
-                type: 'scatter',
-                mode: 'markers',
-                marker: { size: 15 }
-            }
-        ]}
-        layout={{
-            plot_bgcolor: 'rgba(0,0,0,0)',
-            paper_bgcolor: 'rgba(0,0,0,0)'
-        }}
-        config={{
-            staticPlot: true
-        }}
-    />
-</center>
 
 For fractal flames, we just need to figure out which points are in $S$ and plot them. While there are
 technically an infinite number of points, if we find _enough_ points and plot them, we end up with a nice picture.
@@ -95,74 +83,21 @@ $$
 
 That is, for an input point $(x, y)$, the output point will be $(x + 1, y)$:
 
-<center>
+export const shiftData = simpleData.map(({x, y}) => { return {x: x + 1, y} })
-    <Plot
+
+<VictoryChart theme={VictoryTheme.clean}>
+    <VictoryScatter data={simpleData} size={5} style={{data: {fill: "blue"}}}/>
+    <VictoryScatter data={shiftData} size={5} style={{data: {fill: "orange"}}}/>
+    <VictoryLegend
         data={[
-            {
+            {name: "(x,y)", symbol: {fill: "blue"}},
-                x: [0, 1, 2],
+            {name: "F(x,y)", symbol: {fill: "orange"}}
-                y: [0, 1, 2],
-                type: 'scatter',
-                mode: 'markers',
-                marker: { size: 12 },
-                name: "(x, y)"
-            },
-            {
-                x: [1, 2, 3],
-                y: [0, 1, 2],
-                type: 'scatter',
-                mode: 'markers',
-                marker: { size: 12 },
-                name: "(x+1, y)"
-            },
-            {
-                x: [0, 1],
-                y: [0, 0],
-                mode: 'lines+markers',
-                marker: {
-                    size: 12,
-                    symbol: 'arrow-bar-up',
-                    angleref: 'previous',
-                    color: 'rgb(0,0,0)'
-                },
-                type: 'scatter',
-                showlegend: false
-            },
-            {
-                x: [1, 2],
-                y: [1, 1],
-                mode: 'lines+markers',
-                marker: {
-                    size: 12,
-                    symbol: 'arrow-bar-up',
-                    angleref: 'previous',
-                    color: 'rgb(0,0,0)'
-                },
-                type: 'scatter',
-                showlegend: false
-            },
-            {
-                x: [2, 3],
-                y: [2, 2],
-                mode: 'lines+markers',
-                marker: {
-                    size: 12,
-                    symbol: 'arrow-bar-up',
-                    angleref: 'previous',
-                    color: 'rgb(0,0,0)'
-                },
-                type: 'scatter',
-                showlegend: false
-            }
         ]}
-        layout={{
+        orientation={"vertical"}
-            plot_bgcolor: 'rgba(0,0,0,0)',
+        x={75}
-            paper_bgcolor: 'rgba(0,0,0,0)'
+        y={10}
-        }}
-        config={{
-            staticPlot: true
-        }}
     />
-</center>
+</VictoryChart>
 
 This is a simple example designed to illustrate the principle. In general, $F_i$ functions have the form:
 
@@ -243,4 +178,11 @@ import Scope from './scope'
 
 import Gasket from '!!raw-loader!./Gasket'
 
-<Playground scope={Scope}>{Gasket}</Playground>
+<Playground scope={Scope} noInline={true}>{Gasket}</Playground>
+
+<hr/>
+
+<small>
+Note: The image our chaos game generates is different than the fractal flame paper, but I think the version displayed
+here is correct. As confirmation, the next post will re-create the same image using a different method.
+</small>

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

@@ -3,12 +3,13 @@ import React from 'react';
 import randomBiUnit from './biunit';
 import plot from './plot';
 import randomInteger from './randint';
-
+import Canvas from './Canvas';
 
 const Scope = {
     React,
     plot,
     randomBiUnit,
-    randomInteger
+    randomInteger,
+    Canvas
 }
 export default Scope;

src/css/custom.css

@@ -23,7 +23,10 @@
     no-repeat;
 }
 
-/* Dark mode for Plotly, copied from https://github.com/plotly/plotly.js/issues/2006#issuecomment-2081535168 */
+/*
-[data-theme='dark'] .plot-container {
+Inspired by https://github.com/plotly/plotly.js/issues/2006#issuecomment-2081535168,
+adapted for Victory charts
+ */
+[data-theme='dark'] .VictoryContainer {
     filter: invert(75%) hue-rotate(180deg);
 }