Flame blending example

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

@@ -3,16 +3,9 @@ import Canvas from "../src/Canvas";
 import { Params, chaosGameWeighted } from "./chaosGameWeighted";
 import TeX from '@matejmazur/react-katex';
 
-type Transform = (x: number, y: number) => [number, number];
+import styles from "../src/css/styles.module.css"
 
-function WeightInput({value, setValue, children}) {
-    return (
-        <div style={{paddingLeft: '1.5em', paddingRight: '1.5em'}}>
-            {children}
-            <input type={'range'} min={0} max={1} step={.01} style={{width: '100%'}} value={value} onInput={e => setValue(Number(e.currentTarget.value))}/>
-        </div>
-    )
-}
+type Transform = (x: number, y: number) => [number, number];
 
 export default function GasketWeighted() {
     const image = new ImageData(600, 600);
@@ -42,19 +35,23 @@ export default function GasketWeighted() {
         setGame(chaosGameWeighted(params))
     }, [f0Weight, f1Weight, f2Weight]);
 
+    const weightInput = (title, weight, setWeight) => (
+        <>
+            <div className={styles.inputDiv}>
+                <p><TeX>{title}</TeX> weight:<span style={{float: 'right'}}>{weight}</span></p>
+                <input type={'range'} min={0} max={1} step={.01} style={{width: '100%'}} value={weight}
+                    onInput={e => setWeight(Number(e.currentTarget.value))}/>
+            </div>
+        </>
+    )
+
     return (
         <>
             <Canvas width={image.width} height={image.height} painter={game}/>
             <div style={{paddingTop: '1em', display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
-                <WeightInput value={f0Weight} setValue={setF0Weight}>
-                    <p><TeX>F_0</TeX> weight:<span style={{float: 'right'}}>{f0Weight}</span></p>
-                </WeightInput>
-                <WeightInput value={f1Weight} setValue={setF1Weight}>
-                    <p><TeX>F_1</TeX> weight:<span style={{float: 'right'}}>{f1Weight}</span></p>
-                </WeightInput>
-                <WeightInput value={f2Weight} setValue={setF2Weight}>
-                    <p><TeX>F_2</TeX> weight:<span style={{float: 'right'}}>{f2Weight}</span></p>
-                </WeightInput>
+                {weightInput("F_0", f0Weight, setF0Weight)}
+                {weightInput("F_1", f1Weight, setF1Weight)}
+                {weightInput("F_2", f2Weight, setF2Weight)}
             </div>
         </>
     )

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

@@ -2,9 +2,6 @@ function Gasket() {
     // Hint: try increasing the iteration count
     const iterations = 10000;
 
-    // Display the progress every `step` iterations
-    const step = 1000;
-
     // Hint: negating `x` and `y` creates some interesting images
     const transforms = [
         (x, y) => [x / 2, y / 2],
@@ -21,16 +18,12 @@ function Gasket() {
             const i = randomInteger(0, transforms.length);
             [x, y] = transforms[i](x, y);
 
-            if (count > 20) {
+            if (count > 20)
                 plot(x, y, image);
-            }
 
-            if (count % 1000 === 0) {
+            if (count % 1000 === 0)
                 yield image;
-            }
         }
-
-        yield image;
     }
 
     return (
@@ -40,5 +33,4 @@ function Gasket() {
             painter={chaosGame()}/>
     )
 }
-
 render(<Gasket/>)

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

@@ -19,13 +19,11 @@ export function* chaosGameWeighted({transforms, image, iterations, step}: Params
         // highlight-end
         [x, y] = transform(x, y);
 
-        if (i > 20) {
+        if (i > 20)
             plot(x, y, image);
-        }
 
-        if (i % step === 0) {
+        if (i % step === 0)
             yield image;
-        }
     }
 
     yield image;

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

@@ -13,13 +13,10 @@ Wikipedia [describes](https://en.wikipedia.org/wiki/Fractal_flame) fractal flame
 I think of them a different way: beauty in mathematics.
 
 import isDarkMode from '@site/src/isDarkMode'
-import bannerDark from '../banner-dark.png'
-import bannerLight from '../banner-light.png'
+import banner from '../banner.png'
 
 <center>
-    <!-- Why are these backwards? -->
-    <img src={bannerLight} hidden={isDarkMode()}/>
-    <img src={bannerDark} hidden={!isDarkMode()}/>
+    <img src={banner} style={{filter: isDarkMode() ? '' : 'invert(1)'}}/>
 </center>
 
 <!-- truncate -->
@@ -204,6 +201,4 @@ import chaosGameWeightedSource from "!!raw-loader!./chaosGameWeighted";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import GasketWeighted from "./GasketWeighted"
 
-<BrowserOnly>
-    <GasketWeighted/>
-</BrowserOnly>
+<BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>