mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-07-02 22:34:56 -04: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
Download Patch File Download Diff File Expand all files Collapse all files

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>