mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2024-12-22 16:48:10 -05:00
Code Issues Releases Wiki Activity

Fix final transform modifying coordinates

Browse Source
This commit is contained in:
Bradlee Speice 2024-12-08 15:35:27 -05:00
parent 845e7fb4f7
commit 3c583705f8
8 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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";

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

@ -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;

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

@ -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) {

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

@ -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);
}

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

@ -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>

0
blog/2024-11-15-playing-with-fire/3-log-density/color.ts → blog/2024-11-15-playing-with-fire/3-log-density/paintColor.ts
View File

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

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