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

Actually doing some writing

Browse Source
This commit is contained in:
Bradlee Speice
2024-12-08 22:50:46 -05:00
parent 5ae6b82d26
commit b608a25146
12 changed files with 78 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,12 @@
import React, {useContext, useEffect, useMemo, useRef, useState} from "react";
import * as params from "../src/params";
import {InvertibleCanvas, PainterContext} from "../src/Canvas";
import {PainterContext} from "../src/Canvas";
import {colorFromPalette} from "./paintColor";
import {chaosGameColor, ChaosGameColorProps, TransformColor} from "./chaosGameColor";
import styles from "../src/css/styles.module.css";
import {histIndex} from "../src/camera";
type AutoSizingCanvasProps = {
painter: (width: number, height: number) => ImageData;
}
const AutoSizingCanvas: React.FC<AutoSizingCanvasProps> = ({painter}) => {
const sizingRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState<number>(0);
const [height, setHeight] = useState<number>(0);
useEffect(() => {
if (sizingRef) {
setWidth(sizingRef.current.offsetWidth);
setHeight(sizingRef.current.offsetHeight)
}
}, [sizingRef]);
const image: [ImageData] = useMemo(() => (width && height) ? [painter(width, height)] : null, [painter, width, height]);
return (
<div ref={sizingRef} style={{width: '100%', height: '100%'}}>
<InvertibleCanvas width={width} height={height} image={image}/>
</div>
)
}
import {useColorMode} from "@docusaurus/theme-common";
const paletteBarPainter = (palette: number[]) =>
(width: number, height: number) => {
@ -60,7 +37,7 @@ const PaletteBar: React.FC<PaletteBarProps> = ({height, palette, children}) => {
return (
<>
<div style={{width: '100%', height, marginTop: '1em', marginBottom: '1em'}}>
<AutoSizingCanvas painter={painter}/>
{/*<AutoSizingCanvas painter={painter}/>*/}
</div>
{children}
</>
@ -90,9 +67,13 @@ type ColorEditorProps = {
children?: React.ReactNode;
}
const ColorEditor: React.FC<ColorEditorProps> = ({title, palette, transformColor, setTransformColor, resetTransformColor, children}) => {
const painter = useMemo(() => colorSwatchPainter(palette, transformColor.color), [palette, transformColor]);
const resetButton = <button className={styles.inputReset} onClick={resetTransformColor}>Reset</button>
const [r, g, b] = colorFromPalette(palette, transformColor.color);
const colorCss = `rgb(${Math.floor(r * 0xff)},${Math.floor(g * 0xff)},${Math.floor(b * 0xff)})`;
const {colorMode} = useColorMode();
return (
<>
<div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: '2fr 2fr 1fr'}}>
@ -107,9 +88,12 @@ const ColorEditor: React.FC<ColorEditorProps> = ({title, palette, transformColor
<input type={'range'} min={0} max={1} step={.001} value={transformColor.colorSpeed}
onInput={e => setTransformColor({...transformColor, colorSpeed: Number(e.currentTarget.value)})}/>
</div>
<div className={styles.inputElement}>
<AutoSizingCanvas painter={painter}/>
</div>
<div className={styles.inputElement} style={{
width: '100%',
height: '100%',
backgroundColor: colorCss,
filter: colorMode === 'dark' ? 'invert(1)' : ''
}}/>
</div>
{children}
</>

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

@ -28,11 +28,11 @@ import paintLinearSource from "!!raw-loader!./paintLinear"
<CodeBlock language="typescript">{paintLinearSource}</CodeBlock>
import Canvas from "../src/Canvas";
import {SquareCanvas} from "../src/Canvas";
import FlameHistogram from "./FlameHistogram";
import {paintLinear} from "./paintLinear";
<!-- <Canvas><FlameHistogram quality={5} paint={paintLinear}/></Canvas> -->
<SquareCanvas><FlameHistogram quality={5} paint={paintLinear}/></SquareCanvas>
## Log display
@ -42,7 +42,7 @@ import paintLogarithmicSource from "!!raw-loader!./paintLogarithmic"
import {paintLogarithmic} from './paintLogarithmic'
<!-- <Canvas><FlameHistogram quality={5} paint={paintLogarithmic}/></Canvas> -->
<SquareCanvas><FlameHistogram quality={10} paint={paintLogarithmic}/></SquareCanvas>
## Color
@ -52,4 +52,4 @@ import paintColorSource from "!!raw-loader!./paintColor"
import FlameColor from "./FlameColor";
<!-- <Canvas><FlameColor quality={15}/></Canvas> -->
<SquareCanvas><FlameColor quality={15}/></SquareCanvas>