mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-07-01 22:06:26 -04:00
Code Issues Releases Wiki Activity

View detection

Browse Source
This commit is contained in:
Bradlee Speice
2024-12-08 16:17:21 -05:00
parent 3c583705f8
commit 78d71cbc7b
7 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,7 +103,7 @@ const ColorEditor: React.FC<ColorEditorProps> = ({title, palette, transformColor
onInput={e => setTransformColor({...transformColor, color: Number(e.currentTarget.value)})}/>
</div>
<div className={styles.inputElement}>
<p>Color speed: {transformColor.colorSpeed}</p>
<p>Speed: {transformColor.colorSpeed}</p>
<input type={'range'} min={0} max={1} step={.001} value={transformColor.colorSpeed}
onInput={e => setTransformColor({...transformColor, colorSpeed: Number(e.currentTarget.value)})}/>
</div>

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

@ -1,24 +1,24 @@
import React, {useContext, useEffect} from "react";
import * as params from "../src/params";
import {xforms as transforms, xformFinal as final} from "../src/params";
import {PainterContext} from "../src/Canvas";
import {chaosGameHistogram} from "./chaosGameHistogram";
type Props = {
quality?: number;
paintFn: (width: number, histogram: Uint32Array) => ImageData;
paint: (width: number, histogram: Uint32Array) => ImageData;
children?: React.ReactElement;
}
export default function FlameHistogram({quality, paintFn, children}: Props) {
export default function FlameHistogram({quality, paint, children}: Props) {
const {width, height, setPainter} = useContext(PainterContext);
useEffect(() => {
const gameParams = {
width,
height,
transforms: params.xforms,
final: params.xformFinal,
transforms,
final,
quality,
painter: paintFn
paint
}
setPainter(chaosGameHistogram(gameParams));
}, []);

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

@ -20,7 +20,7 @@ export type ChaosGameColorProps = ChaosGameFinalProps & {
}
export function* chaosGameColor({width, height, transforms, final, palette, colors, finalColor, quality, step}: ChaosGameColorProps) {
let iterations = (quality ?? 1) * width * height;
step = step ?? 100_000;
step = step ?? 10_000;
let currentColor = Math.random();
const red = Array(width * height).fill(0);

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

@ -9,7 +9,7 @@ export type ChaosGameHistogramProps = ChaosGameFinalProps & {
}
export function* chaosGameHistogram({width, height, transforms, final, quality, step, paint}: ChaosGameHistogramProps) {
let iterations = (quality ?? 1) * width * height;
step = step ?? 100_000;
step = step ?? 10_000;
const histogram = new Uint32Array(width * height);

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

@ -32,7 +32,7 @@ import Canvas from "../src/Canvas";
import FlameHistogram from "./FlameHistogram";
import {paintLinear} from "./paintLinear";
<Canvas><FlameHistogram quality={5} paintFn={paintLinear}/></Canvas>
<Canvas><FlameHistogram quality={5} paint={paintLinear}/></Canvas>
## Log display
@ -42,7 +42,7 @@ import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"
import {paintLogarithmic} from './paintLogarithmic'
<Canvas><FlameHistogram quality={5} paintFn={paintLogarithmic}/></Canvas>
<Canvas><FlameHistogram quality={5} paint={paintLogarithmic}/></Canvas>
## Color