Fix final transform modifying coordinates

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

@@ -18,32 +18,32 @@ export const CoefEditor = ({title, isPost, coefs, setCoefs, resetCoefs}: Props)
             <p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title} {resetButton}</p>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\alpha</TeX> : 'a'}: {coefs.a}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.a}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.a}
                        onInput={e => setCoefs({...coefs, a: Number(e.currentTarget.value)})}/>
             </div>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\beta</TeX> : 'b'}: {coefs.b}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.b}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.b}
                        onInput={e => setCoefs({...coefs, b: Number(e.currentTarget.value)})}/>
             </div>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\gamma</TeX> : 'c'}: {coefs.c}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.c}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.c}
                        onInput={e => setCoefs({...coefs, c: Number(e.currentTarget.value)})}/>
             </div>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\delta</TeX> : 'd'}: {coefs.d}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.d}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.d}
                        onInput={e => setCoefs({...coefs, d: Number(e.currentTarget.value)})}/>
             </div>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\epsilon</TeX> : 'e'}: {coefs.e}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.e}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.e}
                        onInput={e => setCoefs({...coefs, e: Number(e.currentTarget.value)})}/>
             </div>
             <div className={styles.inputElement}>
                 <p>{isPost ? <TeX>\zeta</TeX> : 'f'}: {coefs.f}</p>
-                <input type={'range'} min={0} max={2} step={0.01} value={coefs.f}
+                <input type={'range'} min={-2} max={2} step={0.01} value={coefs.f}
                        onInput={e => setCoefs({...coefs, f: Number(e.currentTarget.value)})}/>
             </div>
         </div>

blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useEffect, useMemo, useRef, useState} from "react";
 import * as params from "../src/params";
 import {InvertibleCanvas, PainterContext} from "../src/Canvas";
-import {colorFromPalette} from "./color";
+import {colorFromPalette} from "./paintColor";
 import {chaosGameColor, ChaosGameColorProps, TransformColor} from "./chaosGameColor";
 
 import styles from "../src/css/styles.module.css";

blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx

@@ -1,7 +1,7 @@
 import React, {useContext, useEffect} from "react";
 import * as params from "../src/params";
 import {PainterContext} from "../src/Canvas";
-import {chaosGameHistogram} from "@site/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram";
+import {chaosGameHistogram} from "./chaosGameHistogram";
 
 type Props = {
     quality?: number;

blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts

@@ -2,7 +2,7 @@ import {ChaosGameFinalProps} from "../2-transforms/chaosGameFinal";
 import {randomBiUnit} from "../src/randomBiUnit";
 import {randomChoice} from "../src/randomChoice";
 import {camera, histIndex} from "../src/camera";
-import {colorFromPalette, paintColor} from "./color";
+import {colorFromPalette, paintColor} from "./paintColor";
 
 export type TransformColor = {
     color: number;
@@ -33,7 +33,6 @@ export function* chaosGameColor({width, height, transforms, final, palette, colo
     for (let i = 0; i < iterations; i++) {
         const [transformIndex, transform] = randomChoice(transforms);
         [x, y] = transform(x, y);
-
         const [finalX, finalY] = final(x, y);
 
         if (i > 20) {

blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts

@@ -5,9 +5,9 @@ import {ChaosGameFinalProps} from "../2-transforms/chaosGameFinal";
 import {camera, histIndex} from "../src/camera";
 // hidden-end
 export type ChaosGameHistogramProps = ChaosGameFinalProps & {
-    painter: (width: number, histogram: Uint32Array) => ImageData;
+    paint: (width: number, histogram: Uint32Array) => ImageData;
 }
-export function* chaosGameHistogram({width, height, transforms, final, quality, step, painter}: ChaosGameHistogramProps) {
+export function* chaosGameHistogram({width, height, transforms, final, quality, step, paint}: ChaosGameHistogramProps) {
     let iterations = (quality ?? 1) * width * height;
     step = step ?? 100_000;
 
@@ -18,17 +18,17 @@ export function* chaosGameHistogram({width, height, transforms, final, quality,
     for (let i = 0; i < iterations; i++) {
         const [_, transform] = randomChoice(transforms);
         [x, y] = transform(x, y);
-        [x, y] = final(x, y);
+        const [finalX, finalY] = final(x, y);
 
         if (i > 20) {
-            const [pixelX, pixelY] = camera(x, y, width);
+            const [pixelX, pixelY] = camera(finalX, finalY, width);
             const pixelIndex = histIndex(pixelX, pixelY, width, 1);
             histogram[pixelIndex] += 1;
         }
 
         if (i % step === 0)
-            yield painter(width, histogram);
+            yield paint(width, histogram);
     }
 
-    yield painter(width, histogram);
+    yield paint(width, histogram);
 }

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

@@ -32,16 +32,24 @@ import Canvas from "../src/Canvas";
 import FlameHistogram from "./FlameHistogram";
 import {paintLinear} from "./paintLinear";
 
-<Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas>
+<Canvas><FlameHistogram quality={5} paintFn={paintLinear}/></Canvas>
 
 ## Log display
 
+import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"
+
+<CodeBlock language="typescript">{paintLogarithmicSource}</CodeBlock>
+
 import {paintLogarithmic} from './paintLogarithmic'
 
-<Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas>
+<Canvas><FlameHistogram quality={5} paintFn={paintLogarithmic}/></Canvas>
 
 ## Color
 
+import paintColorSource from "!!raw-loader!./paintColor"
+
+<CodeBlock language="typescript">{paintColorSource}</CodeBlock>
+
 import FlameColor from "./FlameColor";
 
-<Canvas><FlameColor quality={10}/></Canvas>
+<Canvas><FlameColor quality={15}/></Canvas>

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

@@ -22,7 +22,7 @@
     margin: 0
 }
 
-.inputElement > input {
+.inputElement > input[type=range] {
     width: 100%;
 }