diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx index 4a91a38..53080c3 100644 --- a/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx +++ b/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx @@ -18,32 +18,32 @@ export const CoefEditor = ({title, isPost, coefs, setCoefs, resetCoefs}: Props)

{title} {resetButton}

{isPost ? \alpha : 'a'}: {coefs.a}

- setCoefs({...coefs, a: Number(e.currentTarget.value)})}/>

{isPost ? \beta : 'b'}: {coefs.b}

- setCoefs({...coefs, b: Number(e.currentTarget.value)})}/>

{isPost ? \gamma : 'c'}: {coefs.c}

- setCoefs({...coefs, c: Number(e.currentTarget.value)})}/>

{isPost ? \delta : 'd'}: {coefs.d}

- setCoefs({...coefs, d: Number(e.currentTarget.value)})}/>

{isPost ? \epsilon : 'e'}: {coefs.e}

- setCoefs({...coefs, e: Number(e.currentTarget.value)})}/>

{isPost ? \zeta : 'f'}: {coefs.f}

- setCoefs({...coefs, f: Number(e.currentTarget.value)})}/>
diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx index 2498e68..22461b2 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx +++ b/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"; diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx index 9ed60fa..8db4119 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx +++ b/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; diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts index 11b6ed6..dd3a1aa 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameColor.ts +++ b/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) { diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts b/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts index 828f31e..76025ab 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts +++ b/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); } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx index b4d552c..495d47c 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx +++ b/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"; - + ## Log display +import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic" + +{paintLogarithmicSource} + import {paintLogarithmic} from './paintLogarithmic' - + ## Color +import paintColorSource from "!!raw-loader!./paintColor" + +{paintColorSource} + import FlameColor from "./FlameColor"; - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/color.ts b/blog/2024-11-15-playing-with-fire/3-log-density/paintColor.ts similarity index 100% rename from blog/2024-11-15-playing-with-fire/3-log-density/color.ts rename to blog/2024-11-15-playing-with-fire/3-log-density/paintColor.ts diff --git a/blog/2024-11-15-playing-with-fire/src/css/styles.module.css b/blog/2024-11-15-playing-with-fire/src/css/styles.module.css index 6c16604..f83b7cf 100644 --- a/blog/2024-11-15-playing-with-fire/src/css/styles.module.css +++ b/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%; }