Auto-sizing canvas, starting cleanup for display on mobile browsers

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

@@ -1,16 +1,21 @@
-import Canvas, {PainterContext} from "../src/Canvas";
-import {useContext} from "react";
+import {SquareCanvas, PainterContext} from "../src/Canvas";
+import {useContext, useEffect} from "react";
 
 export function Render({f}) {
-    const {setPainter} = useContext(PainterContext);
-    setPainter(f);
+    const {width, height, setPainter} = useContext(PainterContext);
+    useEffect(() => {
+        if (width && height) {
+            const painter = f({width, height});
+            setPainter(painter);
+        }
+    }, [width, height]);
     return <></>;
 }
 
 export default function Gasket({f}) {
     return (
-        <Canvas width={500} height={500}>
+        <SquareCanvas>
             <Render f={f}/>
-        </Canvas>
+        </SquareCanvas>
     )
 }

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

@@ -1,4 +1,4 @@
-import {useEffect, useState, useContext} from "react";
+import {useEffect, useState, useContext, useRef} from "react";
 import {PainterContext} from "../src/Canvas";
 import {chaosGameWeighted} from "./chaosGameWeighted";
 import TeX from '@matejmazur/react-katex';
@@ -30,7 +30,7 @@ export default function GasketWeighted() {
     const weightInput = (title, weight, setWeight) => (
         <>
             <div className={styles.inputElement}>
-                <p><TeX>{title}</TeX> weight: {weight}</p>
+                <p><TeX>{title}</TeX>: {weight}</p>
                 <input type={'range'} min={0} max={1} step={.01} style={{width: '100%'}} value={weight}
                     onInput={e => setWeight(Number(e.currentTarget.value))}/>
             </div>
@@ -39,7 +39,7 @@ export default function GasketWeighted() {
 
     return (
         <>
-            <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
+            <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr'}}>
                 {weightInput("F_0", f0Weight, setF0Weight)}
                 {weightInput("F_1", f1Weight, setF1Weight)}
                 {weightInput("F_2", f2Weight, setF2Weight)}

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

@@ -1,30 +1,33 @@
-// Hint: try increasing the iteration count
-const iterations = 10000;
+// Hint: try changing the iteration count
+const iterations = 100000;
 
-// Hint: negating `x` and `y` creates some interesting images
-const transforms = [
+// Hint: negating `x` and `y` creates some cool images
+const xforms = [
   (x, y) => [x / 2, y / 2],
   (x, y) => [(x + 1) / 2, y / 2],
   (x, y) => [x / 2, (y + 1) / 2]
 ]
 
-function* chaosGame() {
-    let image = new ImageData(500, 500);
-    let [x, y] = [randomBiUnit(), randomBiUnit()];
+function* chaosGame({width, height}) {
+  let img = new ImageData(width, height);
+  let [x, y] = [
+    randomBiUnit(),
+    randomBiUnit()
+  ];
 
-    for (var count = 0; count < iterations; count++) {
-        const i = randomInteger(0, transforms.length);
-        [x, y] = transforms[i](x, y);
+  for (let c = 0; c < iterations; c++) {
+    const i = randomInteger(0, xforms.length);
+    [x, y] = xforms[i](x, y);
 
-        if (count > 20)
-            plot(x, y, image);
+    if (c > 20)
+      plot(x, y, img);
 
-        if (count % 1000 === 0)
-            yield image;
+    if (c % 1000 === 0)
+      yield img;
   }
 
-    yield image;
+  yield img;
 }
 
 // Wiring so the code above displays properly
-render(<Gasket f={chaosGame()}/>)
+render(<Gasket f={chaosGame}/>)

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

@@ -6,27 +6,33 @@ import {Transform} from "../src/transform";
 const iterations = 50_000;
 const step = 1000;
 // hidden-end
-export type ChaosGameWeightedProps = {
+type Props = {
     width: number,
     height: number,
     transforms: [number, Transform][]
 }
-export function* chaosGameWeighted({width, height, transforms}: ChaosGameWeightedProps) {
-    let image = new ImageData(width, height);
-    var [x, y] = [randomBiUnit(), randomBiUnit()];
+export function* chaosGameWeighted(
+    {width, height, transforms}: Props
+) {
+  let img = new ImageData(width, height);
+  let [x, y] = [
+      randomBiUnit(),
+      randomBiUnit()
+  ];
 
-    for (let i = 0; i < iterations; i++) {
+  const iterations = width * height * 0.5;
+  for (let c = 0; c < iterations; c++) {
     // highlight-start
-        const [_, transform] = randomChoice(transforms);
+    const [_, xform] = randomChoice(transforms);
     // highlight-end
-        [x, y] = transform(x, y);
+    [x, y] = xform(x, y);
 
-        if (i > 20)
-            plot(x, y, image);
+    if (c > 20)
+      plot(x, y, img);
 
-        if (i % step === 0)
-            yield image;
+    if (c % step === 0)
+      yield img;
   }
 
-    yield image;
+  yield img;
 }

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

@@ -101,7 +101,7 @@ export const shiftData = simpleData.map(({x, y}) => { return {x: x + 1, y} })
 This is a simple example designed to illustrate the principle. In general, $F_i$ functions have the form:
 
 $$
-F_i(x,y) = (a_i \cdot x + b_i \cdot y + c_i, \hspace{0.2cm} d_i \cdot x + e_i \cdot y + f_i)
+F_i(x,y) = (a_i \cdot x + b_i \cdot y + c_i, d_i \cdot x + e_i \cdot y + f_i)
 $$
 
 The parameters ($a_i$, $b_i$, etc.) are values we get to choose. In the example above, we can represent our shift
@@ -126,10 +126,10 @@ Fractal flames use more complex functions to produce a wide variety of images, b
 Using these definitions, we can build the first image. The paper defines a function system for us:
 
 $$
-F_0(x, y) = \left({x \over 2}, {y \over 2} \right)
-\hspace{0.8cm}
-F_1(x, y) = \left({{x + 1} \over 2}, {y \over 2} \right)
-\hspace{0.8cm}
+F_0(x, y) = \left({x \over 2}, {y \over 2} \right) \\
+~\\
+F_1(x, y) = \left({{x + 1} \over 2}, {y \over 2} \right) \\
+~\\
 F_2(x, y) = \left({x \over 2}, {{y + 1} \over 2} \right)
 $$
 
@@ -141,11 +141,11 @@ Next, how do we find out all the points in $S$? The paper lays out an algorithm
 
 $$
 \begin{align*}
-&(x, y) = \text{a random point in the bi-unit square} \\
+&(x, y) = \text{random point in the bi-unit square} \\
 &\text{iterate } \{ \\
-&\hspace{1cm} i = \text{a random integer from 0 to } n - 1 \text{ inclusive} \\
+&\hspace{1cm} i = \text{random integer from 0 to } n - 1 \\
 &\hspace{1cm} (x,y) = F_i(x,y) \\
-&\hspace{1cm} \text{plot}(x,y) \text{ except during the first 20 iterations} \\
+&\hspace{1cm} \text{plot}(x,y) \text{ if iterations} > 20 \\
 \}
 \end{align*}
 $$
@@ -199,6 +199,6 @@ import chaosGameWeightedSource from "!!raw-loader!./chaosGameWeighted";
 <CodeBlock language={'typescript'}>{chaosGameWeightedSource}</CodeBlock>
 
 import GasketWeighted from "./GasketWeighted";
-import Canvas from "../src/Canvas";
+import {SquareCanvas} from "../src/Canvas";
 
-<Canvas><GasketWeighted/></Canvas>
+<SquareCanvas><GasketWeighted/></SquareCanvas>

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

@@ -1,34 +1,52 @@
-export function plot(x: number, y: number, image: ImageData) {
-    // Translate (x,y) coordinates to pixel coordinates;
-    // also known as a "camera" function.
-    //
-    // The display range we care about is x=[0, 1], y=[0, 1],
-    // so our pixelX and pixelY coordinates are easy to calculate:
-    const pixelX = Math.floor(x * image.width);
-    const pixelY = Math.floor(y * image.height);
+/**
+ * ImageData is an array that contains
+ * four elements per pixel (one for each
+ * red, green, blue, and alpha value).
+ * This maps from pixel coordinates
+ * to the array index
+ */
+function imageIndex(
+  width: number,
+  x: number,
+  y: number
+) {
+  return y * (width * 4) + x * 4;
+}
 
-    // If we have an (x,y) coordinate outside the display range,
-    // skip it
+export function plot(
+  x: number,
+  y: number,
+  img: ImageData
+) {
+  // Translate (x,y) coordinates
+  // to pixel coordinates.
+  // Also known as a "camera" function.
+  //
+  // The display range is:
+  //  x=[0, 1]
+  //  y=[0, 1]
+  let pixelX = Math.floor(x * img.width);
+  let pixelY = Math.floor(y * img.height);
+
+  const index = imageIndex(
+      img.width,
+      pixelX,
+      pixelY
+  );
+
+  // Skip pixels outside the display range
   if (
-        pixelX < 0 ||
-        pixelX > image.width ||
-        pixelY < 0 ||
-        pixelY > image.height
+      index < 0 ||
+      index > img.data.length
   ) {
       return;
   }
 
-    // ImageData is an array that contains four bytes per pixel
-    // (one for each of the red, green, blue, and alpha values).
-    // The (pixelX, pixelY) coordinates are used to find where
-    // in the image we need to write.
-    const index = pixelY * (image.width * 4) + pixelX * 4;
-
-    // Set the pixel to black by writing a 0 to the first three
-    // bytes (red, green, blue), and 256 to the last byte (alpha),
-    // starting at our index:
-    image.data[index] = 0;
-    image.data[index + 1] = 0;
-    image.data[index + 2] = 0;
-    image.data[index + 3] = 0xff;
+  // Set the pixel to black by writing 0
+  // to the first three elements,
+  // and 255 to the last element
+  img.data[index] = 0;
+  img.data[index + 1] = 0;
+  img.data[index + 2] = 0;
+  img.data[index + 3] = 0xff;
 }

blog/2024-11-15-playing-with-fire/2-transforms/index.mdx

@@ -145,7 +145,7 @@ each transform.
 import Canvas from "../src/Canvas";
 import FlameBlend from "./FlameBlend";
 
-<Canvas><FlameBlend/></Canvas>
+<!-- <Canvas><FlameBlend/></Canvas> -->
 
 ## Post transforms
 
@@ -160,10 +160,10 @@ $$
 
 import FlamePost from "./FlamePost";
 
-<Canvas><FlamePost/></Canvas>
+<!-- <Canvas><FlamePost/></Canvas> -->
 
 ## Final transform
 
 import FlameFinal from "./FlameFinal";
 
-<Canvas><FlameFinal/></Canvas>
+<!-- <Canvas><FlameFinal/></Canvas> -->

blog/2024-11-15-playing-with-fire/3-log-density/index.mdx

@@ -32,7 +32,7 @@ import Canvas from "../src/Canvas";
 import FlameHistogram from "./FlameHistogram";
 import {paintLinear} from "./paintLinear";
 
-<Canvas><FlameHistogram quality={5} paint={paintLinear}/></Canvas>
+<!-- <Canvas><FlameHistogram quality={5} paint={paintLinear}/></Canvas> -->
 
 ## Log display
 
@@ -42,7 +42,7 @@ import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"
 
 import {paintLogarithmic} from './paintLogarithmic'
 
-<Canvas><FlameHistogram quality={5} paint={paintLogarithmic}/></Canvas>
+<!-- <Canvas><FlameHistogram quality={5} paint={paintLogarithmic}/></Canvas> -->
 
 ## Color
 
@@ -52,4 +52,4 @@ import paintColorSource from "!!raw-loader!./paintColor"
 
 import FlameColor from "./FlameColor";
 
-<Canvas><FlameColor quality={15}/></Canvas>
+<!-- <Canvas><FlameColor quality={15}/></Canvas> -->

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

@@ -1,138 +1,68 @@
-import React, {useCallback, useEffect, useState, createContext, useRef} from "react";
+import React, {useEffect, useState, createContext, useRef} from "react";
 import {useColorMode} from "@docusaurus/theme-common";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
-function invertImage(sourceImage: ImageData): ImageData {
-    const image = new ImageData(sourceImage.width, sourceImage.height);
-    sourceImage.data.forEach((value, index) =>
-        image.data[index] = index % 4 === 3 ? value : 0xff - value)
-
-    return image;
-}
-
-type InvertibleCanvasProps = {
-    width: number,
-    height: number,
-    // NOTE: Images are provided as a single-element array
-    //so we can allow re-painting with the same (modified) ImageData reference.
-    image?: [ImageData],
-}
-
-/**
- * Draw images to a canvas, automatically inverting colors as needed.
- *
- * @param width Canvas width
- * @param height Canvas height
- * @param hidden Hide the canvas element
- * @param image Image data to draw on the canvas
- */
-export const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height, image}) => {
-    const [canvasCtx, setCanvasCtx] = useState<CanvasRenderingContext2D>(null);
-    const canvasRef = useCallback(node => {
-        if (node !== null) {
-            setCanvasCtx(node.getContext("2d"));
-        }
-    }, []);
-
-    const [paintImage, setPaintImage] = useState<[ImageData]>(null);
-    useEffect(() => {
-        if (canvasCtx && paintImage) {
-            canvasCtx.putImageData(paintImage[0], 0, 0);
-        }
-    }, [canvasCtx, paintImage]);
-
-    const {colorMode} = useColorMode();
-    useEffect(() => {
-        if (image) {
-            setPaintImage(colorMode === 'light' ? image : [invertImage(image[0])]);
-        }
-    }, [image, colorMode]);
-
-    return (
-        <canvas
-            ref={canvasRef}
-            width={width}
-            height={height}
-            style={{aspectRatio: width / height}}
-        />
-    )
-}
-
 type PainterProps = {
     width: number;
     height: number;
     setPainter: (painter: Iterator<ImageData>) => void;
 }
-export const PainterContext = createContext<PainterProps>(null);
+export const PainterContext = createContext<PainterProps>(null)
 
-interface CanvasProps {
-    width?: number;
-    height?: number;
-    children?: React.ReactElement;
+type CanvasProps = {
+    style?: any;
+    children?: React.ReactElement
 }
+export const Canvas: React.FC<CanvasProps> = ({style, children}) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
 
-/**
- * Draw fractal flames to a canvas.
- *
- * This component is a bit involved because it attempts to solve
- * a couple problems at once:
- *  - Incrementally drawing an image to the canvas
- *  - Interrupting drawing with new parameters
- *
- * Running a full render is labor-intensive, so we model it
- * as an iterator that yields an image of the current system.
- * Internally, that iterator is re-queued on each new image;
- * so long as retrieving each image happens quickly,
- * we keep the main loop running even with CPU-heavy code.
- * As a side benefit, this also animates the chaos game nicely.
- * TODO(bspeice): This also causes React to complain about maximum update depth
- * Would this be better off spawning a `useEffect` animator
- * that has access to a `setState` queue?
- *
- * To interrupt drawing, children set the active iterator
- * through the context provider. This component doesn't care
- * about which iterator is in progress, it exists only
- * to fetch the next image and paint it to our canvas.
- *
- * TODO(bspeice): Can we make this "re-queueing iterator" pattern generic?
- * It would be nice to have iterators returning arbitrary objects,
- * but we rely on contexts to manage the iterator, and I can't find
- * a good way to make those generic.
- */
-export default function Canvas({width, height, children}: CanvasProps) {
-    const viewportDetectionRef = useRef<HTMLDivElement>(null);
     const [isVisible, setIsVisible] = useState(false);
     useEffect(() => {
-        if (!viewportDetectionRef) {
+        if (!canvasRef.current) {
             return;
         }
 
-        const observer = new IntersectionObserver(([entry]) => {
+        const observer = new IntersectionObserver((entries) => {
+            const [entry] = entries;
             if (entry.isIntersecting) {
                 setIsVisible(true);
             }
-        }, {root: null, threshold: .1});
-        observer.observe(viewportDetectionRef.current);
+        });
+        observer.observe(canvasRef.current);
 
         return () => {
-            if (viewportDetectionRef.current) {
-                observer.unobserve(viewportDetectionRef.current);
+            if (canvasRef.current) {
+                observer.unobserve(canvasRef.current);
             }
         }
-    }, [viewportDetectionRef]);
+    }, [canvasRef]);
+
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        if (canvasRef.current) {
+            setWidth(canvasRef.current.offsetWidth);
+            setHeight(canvasRef.current.offsetHeight);
+        }
+    }, [canvasRef]);
+
+    const [imageHolder, setImageHolder] = useState<[ImageData]>(null);
+    useEffect(() => {
+        if (canvasRef.current && imageHolder) {
+            canvasRef.current.getContext("2d").putImageData(imageHolder[0], 0, 0);
+        }
+    }, [canvasRef, imageHolder]);
 
-    const [image, setImage] = useState<[ImageData]>(null);
     const [painterHolder, setPainterHolder] = useState<[Iterator<ImageData>]>(null);
     useEffect(() => {
         if (!isVisible || !painterHolder) {
-            console.log("Skipping, not visible");
             return;
         }
 
         const painter = painterHolder[0];
         const nextImage = painter.next().value;
         if (nextImage) {
-            setImage([nextImage]);
+            setImageHolder([nextImage]);
             setPainterHolder([painter]);
         } else {
             setPainterHolder(null);
@@ -146,18 +76,25 @@ export default function Canvas({width, height, children}: CanvasProps) {
         }
     }, [painter]);
 
-    width = width ?? 500;
-    height = height ?? 500;
+    const {colorMode} = useColorMode();
     return (
         <>
-            <center>
-                <div ref={viewportDetectionRef}>
-                    <InvertibleCanvas width={width} height={height} image={image}/>
-                </div>
-            </center>
+            <canvas
+                ref={canvasRef}
+                width={width}
+                height={height}
+                style={{
+                    filter: colorMode === 'dark' ? 'invert(1)' : '',
+                    ...style
+                }}
+            />
             <PainterContext.Provider value={{width, height, setPainter}}>
                 <BrowserOnly>{() => children}</BrowserOnly>
             </PainterContext.Provider>
         </>
     )
 }
+
+export const SquareCanvas: React.FC<CanvasProps> = ({style, children}) => {
+    return <Canvas style={{width: '100%', aspectRatio: '1/1', ...style}} children={children}/>
+}

blog/2024-11-15-playing-with-fire/src/css/styles.module.css

@@ -1,6 +1,7 @@
 .inputGroup {
-    padding: .5em;
-    margin: .5em;
+    padding: .2em;
+    margin-top: .2em;
+    margin-bottom: .2em;
     border: 1px solid;
     border-radius: var(--ifm-global-radius);
     border-color: var(--ifm-color-emphasis-500);

blog/2024-11-15-playing-with-fire/src/randomChoice.ts

@@ -1,11 +1,16 @@
-export function randomChoice<T>(choices: [number, T][]): [number, T] {
-    const weightSum = choices.reduce((sum, [weight, _]) => sum + weight, 0);
+export function randomChoice<T>(
+  choices: [number, T][]
+): [number, T] {
+  const weightSum = choices.reduce(
+      (sum, [weight, _]) => sum + weight,
+      0
+  );
   let choice = Math.random() * weightSum;
 
-    for (const [index, element] of choices.entries()) {
-        const [weight, t] = element;
+  for (const [idx, elem] of choices.entries()) {
+    const [weight, t] = elem;
     if (choice < weight) {
-            return [index, t];
+      return [idx, t];
     }
     choice -= weight;
   }

blog/2024-11-15-playing-with-fire/src/randomInteger.ts

@@ -1,3 +1,7 @@
-export function randomInteger(min: number, max: number) {
-    return Math.floor(Math.random() * (max - min)) + min;
+export function randomInteger(
+    min: number,
+    max: number
+) {
+    let v = Math.random() * (max - min);
+    return Math.floor(v) + min;
 }

src/css/custom.css

@@ -3,6 +3,19 @@
     --ifm-container-width-xl: 1440px;
     --ifm-footer-padding-vertical: .5rem;
     --ifm-spacing-horizontal: .8rem;
+
+    /* Reduce padding on code blocks */
+    --ifm-pre-padding: .6rem;
+
+    /* More readable code highlight background */
+    --docusaurus-highlighted-code-line-bg: var(--ifm-color-emphasis-300);
+
+    /*--ifm-code-font-size: 85%;*/
+}
+
+.katex {
+    /* Default is 1.21, this helps with fitting on mobile screens */
+    font-size: 1.16em;
 }
 
 .header-github-link:hover {