Actually doing some writing

blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx

@@ -14,7 +14,7 @@ export const CoefEditor = ({title, isPost, coefs, setCoefs, resetCoefs}: Props)
     const resetButton = <button className={styles.inputReset} onClick={resetCoefs}>Reset</button>
 
     return (
-        <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
+        <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr'}}>
             <p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title} {resetButton}</p>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\alpha</TeX> : 'a'}: {coefs.a}</p>

blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx

@@ -4,9 +4,8 @@ import * as params from "../src/params"
 import {PainterContext} from "../src/Canvas"
 import {chaosGameFinal} from "./chaosGameFinal"
 import {VariationEditor, VariationProps} from "./VariationEditor"
-import {xform1Weight} from "../src/params";
-import {applyTransform} from "@site/blog/2024-11-15-playing-with-fire/src/applyTransform";
-import {buildBlend} from "@site/blog/2024-11-15-playing-with-fire/2-transforms/buildBlend";
+import {applyTransform} from "../src/applyTransform";
+import {buildBlend} from "./buildBlend";
 
 export default function FlameBlend() {
     const {width, height, setPainter} = useContext(PainterContext);

blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx

@@ -3,7 +3,7 @@ import {Coefs} from "../src/coefs"
 import {Transform} from "../src/transform";
 import * as params from "../src/params";
 import {PainterContext} from "../src/Canvas"
-import {chaosGameFinal, ChaosGameFinalProps} from "./chaosGameFinal"
+import {chaosGameFinal, Props as ChaosGameFinalProps} from "./chaosGameFinal"
 import {CoefEditor} from "./CoefEditor"
 import {applyPost, applyTransform} from "@site/blog/2024-11-15-playing-with-fire/src/applyTransform";
 

blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx

@@ -18,7 +18,7 @@ export const VariationEditor = ({title, variations, setVariations, resetVariatio
     const resetButton = <button className={styles.inputReset} onClick={resetVariations}>Reset</button>
 
     return (
-        <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: 'auto auto auto auto'}}>
+        <div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '1fr 1fr'}}>
             <p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title} {resetButton}</p>
             <div className={styles.inputElement}>
                 <span>Linear: {variations.linear}</span>

blog/2024-11-15-playing-with-fire/2-transforms/chaosGameFinal.ts

@@ -3,20 +3,19 @@ import { randomBiUnit } from "../src/randomBiUnit";
 import { randomChoice } from "../src/randomChoice";
 import { plotBinary as plot } from "../src/plotBinary"
 import {Transform} from "../src/transform";
-import {ChaosGameWeightedProps} from "../1-introduction/chaosGameWeighted";
+import {Props as ChaosGameWeightedProps} from "../1-introduction/chaosGameWeighted";
+
+const quality = 0.5;
+const step = 1000;
 // hidden-end
-export type ChaosGameFinalProps = ChaosGameWeightedProps & {
+export type Props = ChaosGameWeightedProps & {
     final: Transform,
-    quality?: number,
-    step?: number,
 }
-export function* chaosGameFinal({width, height, transforms, final, quality, step}: ChaosGameFinalProps) {
+export function* chaosGameFinal({width, height, transforms, final}: Props) {
     let image = new ImageData(width, height);
     let [x, y] = [randomBiUnit(), randomBiUnit()];
 
-    const iterations = (quality ?? 0.5) * width * height;
-    step = step ?? 1000;
-
+    const iterations = width * height * quality;
     for (let i = 0; i < iterations; i++) {
         const [_, transform] = randomChoice(transforms);
         [x, y] = transform(x, y);

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

@@ -142,10 +142,10 @@ The sliders below change the variation weights for each transform (the $v_{ij}$
 try changing them around to see which parts of the image are controlled by
 each transform.
 
-import Canvas from "../src/Canvas";
+import {SquareCanvas} from "../src/Canvas";
 import FlameBlend from "./FlameBlend";
 
-<!-- <Canvas><FlameBlend/></Canvas> -->
+<SquareCanvas><FlameBlend/></SquareCanvas>
 
 ## Post transforms
 
@@ -160,10 +160,10 @@ $$
 
 import FlamePost from "./FlamePost";
 
-<!-- <Canvas><FlamePost/></Canvas> -->
+<SquareCanvas><FlamePost/></SquareCanvas>
 
 ## Final transform
 
 import FlameFinal from "./FlameFinal";
 
-<!-- <Canvas><FlameFinal/></Canvas> -->
+<SquareCanvas><FlameFinal/></SquareCanvas>