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

Add a reset button

Browse Source 
Probably overkill, but I kinda like it.
This commit is contained in:
Bradlee Speice 2024-11-30 18:01:29 -05:00
parent 6c4d73f081
commit b7eed2297a
11 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blog/2024-11-15-playing-with-fire/1-introduction/index.mdx
View File

@ -202,6 +202,4 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
import GasketWeighted from "./GasketWeighted";
import Canvas from "../src/Canvas";
<Canvas width={500} height={500}>
<BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>
</Canvas>
<Canvas><BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly></Canvas>

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

@ -8,11 +8,14 @@ export interface Props {
isPost: boolean;
coefs: Coefs;
setCoefs: (coefs: Coefs) => void;
resetCoefs: () => void;
}
export const CoefEditor = ({title, isPost, coefs, setCoefs}: Props) => {
export const CoefEditor = ({title, isPost, coefs, setCoefs, resetCoefs}: Props) => {
const resetButton = <button className={styles.inputReset} onClick={resetCoefs}>Reset</button>
return (
<div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: 'auto auto auto'}}>
<p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title}</p>
<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} style={{width: '100%'}} value={coefs.a}

25
blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx
View File

@ -1,7 +1,6 @@
import {useContext, useEffect, useState} from "react";
import {Transform} from "../src/transform";
import {
identityCoefs,
xform1Coefs,
xform1Weight,
xform2Coefs,
@ -17,29 +16,32 @@ import {VariationEditor, VariationProps} from "./VariationEditor"
export default function FlameBlend() {
const {width, height, setPainter} = useContext(PainterContext);
const xform1Default: VariationProps = {
const xform1VariationsDefault: VariationProps = {
linear: 0,
julia: 1,
popcorn: 0,
pdj: 0,
}
const [xform1Variations, setXform1Variations] = useState(xform1Default)
const [xform1Variations, setXform1Variations] = useState(xform1VariationsDefault)
const resetXform1Variations = () => setXform1Variations(xform1VariationsDefault);
const xform2Default: VariationProps = {
const xform2VariationsDefault: VariationProps = {
linear: 1,
julia: 0,
popcorn: 1,
pdj: 0
}
const [xform2Variations, setXform2Variations] = useState(xform2Default)
const [xform2Variations, setXform2Variations] = useState(xform2VariationsDefault)
const resetXform2Variations = () => setXform2Variations(xform2VariationsDefault);
const xform3Default: VariationProps = {
const xform3VariationsDefault: VariationProps = {
linear: 0,
julia: 0,
popcorn: 0,
pdj: 1
}
const [xform3Variations, setXform3Variations] = useState(xform3Default)
const [xform3Variations, setXform3Variations] = useState(xform3VariationsDefault)
const resetXform3Variations = () => setXform3Variations(xform3VariationsDefault);
// Cheating a bit here; for purposes of code re-use, use the post- and final-transform-enabled chaos game,
// and swap in identity components for each
@ -53,9 +55,12 @@ export default function FlameBlend() {
return (
<>
<VariationEditor title={"Transform 1"} variations={xform1Variations} setVariations={setXform1Variations}/>
<VariationEditor title={"Transform 2"} variations={xform2Variations} setVariations={setXform2Variations}/>
<VariationEditor title={"Transform 3"} variations={xform3Variations} setVariations={setXform3Variations}/>
<VariationEditor title={"Transform 1"} variations={xform1Variations} setVariations={setXform1Variations}
resetVariations={resetXform1Variations}/>
<VariationEditor title={"Transform 2"} variations={xform2Variations} setVariations={setXform2Variations}
resetVariations={resetXform2Variations}/>
<VariationEditor title={"Transform 3"} variations={xform3Variations} setVariations={setXform3Variations}
resetVariations={resetXform3Variations}/>
</>
)
}

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

@ -28,6 +28,7 @@ export default function FlameFinal() {
const {width, height, setPainter} = useContext(PainterContext);
const [xformFinalCoefs, setXformFinalCoefs] = useState<Coefs>(xformFinalCoefsDefault);
const resetXformFinalCoefs = () => setXformFinalCoefs(xformFinalCoefsDefault);
const xformFinalVariationsDefault: VariationProps = {
linear: 0,
@ -36,8 +37,10 @@ export default function FlameFinal() {
pdj: 0
}
const [xformFinalVariations, setXformFinalVariations] = useState<VariationProps>(xformFinalVariationsDefault);
const resetXformFinalVariations = () => setXformFinalVariations(xformFinalVariationsDefault);
const [xformFinalCoefsPost, setXformFinalCoefsPost] = useState<Coefs>(xformFinalCoefsPostDefault);
const resetXformFinalCoefsPost = () => setXformFinalCoefsPost(xformFinalCoefsPostDefault);
useEffect(() => {
const transforms: [number, Transform][] = [
@ -55,10 +58,12 @@ export default function FlameFinal() {
return (
<>
<CoefEditor title={"Final Transform"} isPost={false} coefs={xformFinalCoefs} setCoefs={setXformFinalCoefs}/>
<CoefEditor title={"Final Transform"} isPost={false} coefs={xformFinalCoefs} setCoefs={setXformFinalCoefs}
resetCoefs={resetXformFinalCoefs}/>
<VariationEditor title={"Final Transform Variations"} variations={xformFinalVariations}
setVariations={setXformFinalVariations}/>
<CoefEditor title={"Final Transform Post"} isPost={true} coefs={xformFinalCoefsPost} setCoefs={setXformFinalCoefsPost}/>
setVariations={setXformFinalVariations} resetVariations={resetXformFinalVariations}/>
<CoefEditor title={"Final Transform Post"} isPost={true} coefs={xformFinalCoefsPost}
setCoefs={setXformFinalCoefsPost} resetCoefs={resetXformFinalCoefsPost}/>
</>
)
}

20
blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx
View File

@ -24,9 +24,14 @@ import {buildTransform} from "./buildTransform";
export default function FlamePost() {
const {width, height, setPainter} = useContext(PainterContext);
const [xform1CoefsPost, setXform1PostCoefs] = useState<Coefs>(xform1CoefsPostDefault);
const [xform2CoefsPost, setXform2PostCoefs] = useState<Coefs>(xform2CoefsPostDefault);
const [xform3CoefsPost, setXform3PostCoefs] = useState<Coefs>(xform3CoefsPostDefault);
const [xform1CoefsPost, setXform1CoefsPost] = useState<Coefs>(xform1CoefsPostDefault);
const resetXform1CoefsPost = () => setXform1CoefsPost(xform1CoefsPostDefault);
const [xform2CoefsPost, setXform2CoefsPost] = useState<Coefs>(xform2CoefsPostDefault);
const resetXform2CoefsPost = () => setXform2CoefsPost(xform2CoefsPostDefault);
const [xform3CoefsPost, setXform3CoefsPost] = useState<Coefs>(xform3CoefsPostDefault);
const resetXform3CoefsPost = () => setXform1CoefsPost(xform3CoefsPostDefault);
const identityXform: Transform = (x, y) => [x, y];
@ -38,9 +43,12 @@ export default function FlamePost() {
return (
<>
<CoefEditor title={"Transform 1 Post"} isPost={true} coefs={xform1CoefsPost} setCoefs={setXform1PostCoefs}/>
<CoefEditor title={"Transform 2 Post"} isPost={true} coefs={xform2CoefsPost} setCoefs={setXform2PostCoefs}/>
<CoefEditor title={"Transform 3 Post"} isPost={true} coefs={xform3CoefsPost} setCoefs={setXform3PostCoefs}/>
<CoefEditor title={"Transform 1 Post"} isPost={true} coefs={xform1CoefsPost} setCoefs={setXform1CoefsPost}
resetCoefs={resetXform1CoefsPost}/>
<CoefEditor title={"Transform 2 Post"} isPost={true} coefs={xform2CoefsPost} setCoefs={setXform2CoefsPost}
resetCoefs={resetXform2CoefsPost}/>
<CoefEditor title={"Transform 3 Post"} isPost={true} coefs={xform3CoefsPost} setCoefs={setXform3CoefsPost}
resetCoefs={resetXform3CoefsPost}/>
</>
)
}

7
blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx
View File

@ -11,12 +11,15 @@ export interface Props {
title: String;
variations: VariationProps;
setVariations: (variations: VariationProps) => void;
resetVariations: () => void;
}
export const VariationEditor = ({title, variations, setVariations}: Props) => {
export const VariationEditor = ({title, variations, setVariations, resetVariations}: Props) => {
const resetButton = <button className={styles.inputReset} onClick={resetVariations}>Reset</button>
return (
<div className={styles.inputGroup} style={{display: 'grid', gridTemplateColumns: 'auto auto auto auto'}}>
<p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title}</p>
<p className={styles.inputTitle} style={{gridColumn: '1/-1'}}>{title} {resetButton}</p>
<div className={styles.inputElement}>
<span>Linear: {variations.linear}</span>
<input type={'range'} min={0} max={1} step={0.01} style={{width: '100%'}} value={variations.linear}

12
blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
View File

@ -146,9 +146,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
import Canvas from "../src/Canvas";
import FlameBlend from "./FlameBlend";
<Canvas width={500} height={500}>
<BrowserOnly>{() => <FlameBlend/>}</BrowserOnly>
</Canvas>
<Canvas><BrowserOnly>{() => <FlameBlend/>}</BrowserOnly></Canvas>
## Post transforms
@ -163,14 +161,10 @@ $$
import FlamePost from "./FlamePost";
<Canvas width={500} height={500}>
<BrowserOnly>{() => <FlamePost/>}</BrowserOnly>
</Canvas>
<Canvas><BrowserOnly>{() => <FlamePost/>}</BrowserOnly></Canvas>
## Final transform
import FlameFinal from "./FlameFinal";
<Canvas width={500} height={500}>
<BrowserOnly>{() => <FlameFinal/>}</BrowserOnly>
</Canvas>
<Canvas><BrowserOnly>{() => <FlameFinal/>}</BrowserOnly></Canvas>

4
blog/2024-11-15-playing-with-fire/params.flame
View File

@ -2,7 +2,7 @@
<flame name="post xform" version="Apophysis 2.08 beta" size="600 600" center="0 0" scale="150" oversample="1" filter="0.2" quality="1" background="0 0 0" brightness="4" gamma="4" >
<xform weight="0.422330042096567" color="0" pdj="1" coefs="1.51523 0.740356 -3.048677 -1.455964 0.724135 -0.362059" pdj_a="1.09358" pdj_b="2.13048" pdj_c="2.54127" pdj_d="2.37267" />
<xform weight="0.564534951145298" color="0" julia="1" coefs="-1.381068 1.381068 -1.381068 -1.381068 0 0" />
<xform weight="0.0131350067581356" color="0" linear="1" popcorn="1" coefs="0.031393 -0.031367 0.031367 0.031393 0 0" post="1 0 0 1 0.241352 0.271521" />
<xform weight="0.0131350067581356" color="0" linear="1" popcorn="1" coefs="0.031393 -0.031367 0.031367 0.031393 0 0" post="1 0 0 1 0.24 0.27" />
<palette count="256" format="RGB">
3A78875998AA5E9DAC78B1C2599BAB36798A2252601B3438
1823270D1215080705010101000000000002080A090A0809
@ -80,7 +80,7 @@
<flame name="final xform" version="Apophysis 2.08 beta" size="600 600" center="0 0" scale="150" oversample="1" filter="0.2" quality="1" background="1 1 1" brightness="4" gamma="4" >
<xform weight="0.422330042096567" color="0.349" pdj="1" coefs="1.51523 0.740356 -3.048677 -1.455964 0.724135 -0.362059" pdj_a="1.09358" pdj_b="2.13048" pdj_c="2.54127" pdj_d="2.37267" />
<xform weight="0.564534951145298" color="0" julia="1" coefs="-1.381068 1.381068 -1.381068 -1.381068 0 0" />
<xform weight="0.0131350067581356" color="0.844" linear="1" popcorn="1" coefs="0.031393 -0.031367 0.031367 0.031393 0 0" post="1 0 0 1 0.241352 0.271521" />
<xform weight="0.0131350067581356" color="0.844" linear="1" popcorn="1" coefs="0.031393 -0.031367 0.031367 0.031393 0 0" post="1 0 0 1 0.24 0.27" />
<finalxform color="0" symmetry="1" julia="1" coefs="2 0 0 2 0 0" />
<palette count="256" format="RGB">
7E3037762C45722B496E2A4E6A2950672853652754632656

6
blog/2024-11-15-playing-with-fire/src/Canvas.tsx
View File

@ -14,8 +14,8 @@ export interface PainterProps {
export const PainterContext = createContext<PainterProps>(null);
interface CanvasProps {
width: number;
height: number;
width?: number;
height?: number;
children?: React.ReactNode;
}
@ -125,6 +125,8 @@ export default function Canvas({width, height, children}: CanvasProps) {
const [painter, setPainter] = useState<Iterator<ImageData>>(null);
useEffect(() => setAnimHolder({ painter }), [painter]);
width = width ?? 500;
height = height ?? 500;
return (
<>
<center>

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

@ -21,3 +21,8 @@
.inputElement > p {
margin: 0
}
.inputReset {
display: flex;
float: right;
}

4
blog/2024-11-15-playing-with-fire/src/params.ts
View File

@ -36,8 +36,8 @@ export const xform2Coefs = {
d: -0.031367, e: 0.031393, f: 0,
}
export const xform2CoefsPost = {
a: 1, b: 0, c: 0.241352,
d: 0, e: 1, f: 0.271521,
a: 1, b: 0, c: 0.24,
d: 0, e: 1, f: 0.27,
}
export const xform2Variations: VariationBlend = [
[1, linear],