diff --git a/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx b/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx index 67181ea..ed60823 100644 --- a/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx +++ b/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx @@ -202,6 +202,4 @@ import BrowserOnly from "@docusaurus/BrowserOnly"; import GasketWeighted from "./GasketWeighted"; import Canvas from "../src/Canvas"; - - {() => } - \ No newline at end of file +{() => } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx index 8536381..1eeeb86 100644 --- a/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx +++ b/blog/2024-11-15-playing-with-fire/2-transforms/CoefEditor.tsx @@ -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 = + return (
-

{title}

+

{title} {resetButton}

{isPost ? \alpha : 'a'}: {coefs.a}

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 ( <> - - - + + + ) } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/FlameFinal.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/FlameFinal.tsx index ade4637..f9365b8 100644 --- a/blog/2024-11-15-playing-with-fire/2-transforms/FlameFinal.tsx +++ b/blog/2024-11-15-playing-with-fire/2-transforms/FlameFinal.tsx @@ -28,6 +28,7 @@ export default function FlameFinal() { const {width, height, setPainter} = useContext(PainterContext); const [xformFinalCoefs, setXformFinalCoefs] = useState(xformFinalCoefsDefault); + const resetXformFinalCoefs = () => setXformFinalCoefs(xformFinalCoefsDefault); const xformFinalVariationsDefault: VariationProps = { linear: 0, @@ -36,8 +37,10 @@ export default function FlameFinal() { pdj: 0 } const [xformFinalVariations, setXformFinalVariations] = useState(xformFinalVariationsDefault); + const resetXformFinalVariations = () => setXformFinalVariations(xformFinalVariationsDefault); const [xformFinalCoefsPost, setXformFinalCoefsPost] = useState(xformFinalCoefsPostDefault); + const resetXformFinalCoefsPost = () => setXformFinalCoefsPost(xformFinalCoefsPostDefault); useEffect(() => { const transforms: [number, Transform][] = [ @@ -55,10 +58,12 @@ export default function FlameFinal() { return ( <> - + - + setVariations={setXformFinalVariations} resetVariations={resetXformFinalVariations}/> + ) } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx index 9b5a6a4..8d1590c 100644 --- a/blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx +++ b/blog/2024-11-15-playing-with-fire/2-transforms/FlamePost.tsx @@ -24,9 +24,14 @@ import {buildTransform} from "./buildTransform"; export default function FlamePost() { const {width, height, setPainter} = useContext(PainterContext); - const [xform1CoefsPost, setXform1PostCoefs] = useState(xform1CoefsPostDefault); - const [xform2CoefsPost, setXform2PostCoefs] = useState(xform2CoefsPostDefault); - const [xform3CoefsPost, setXform3PostCoefs] = useState(xform3CoefsPostDefault); + const [xform1CoefsPost, setXform1CoefsPost] = useState(xform1CoefsPostDefault); + const resetXform1CoefsPost = () => setXform1CoefsPost(xform1CoefsPostDefault); + + const [xform2CoefsPost, setXform2CoefsPost] = useState(xform2CoefsPostDefault); + const resetXform2CoefsPost = () => setXform2CoefsPost(xform2CoefsPostDefault); + + const [xform3CoefsPost, setXform3CoefsPost] = useState(xform3CoefsPostDefault); + const resetXform3CoefsPost = () => setXform1CoefsPost(xform3CoefsPostDefault); const identityXform: Transform = (x, y) => [x, y]; @@ -38,9 +43,12 @@ export default function FlamePost() { return ( <> - - - + + + ) } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx index 212ffcf..1785ea7 100644 --- a/blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx +++ b/blog/2024-11-15-playing-with-fire/2-transforms/VariationEditor.tsx @@ -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 = + return (
-

{title}

+

{title} {resetButton}

Linear: {variations.linear} - {() => } - +{() => } ## Post transforms @@ -163,14 +161,10 @@ $$ import FlamePost from "./FlamePost"; - - {() => } - +{() => } ## Final transform import FlameFinal from "./FlameFinal"; - - {() => } - \ No newline at end of file +{() => } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/params.flame b/blog/2024-11-15-playing-with-fire/params.flame index 2bc531b..b13e1c3 100644 --- a/blog/2024-11-15-playing-with-fire/params.flame +++ b/blog/2024-11-15-playing-with-fire/params.flame @@ -2,7 +2,7 @@ - + 3A78875998AA5E9DAC78B1C2599BAB36798A2252601B3438 1823270D1215080705010101000000000002080A090A0809 @@ -80,7 +80,7 @@ - + 7E3037762C45722B496E2A4E6A2950672853652754632656 diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx index 85e152f..16f694d 100644 --- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx +++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx @@ -14,8 +14,8 @@ export interface PainterProps { export const PainterContext = createContext(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>(null); useEffect(() => setAnimHolder({ painter }), [painter]); + width = width ?? 500; + height = height ?? 500; return ( <>
diff --git a/blog/2024-11-15-playing-with-fire/src/css/styles.module.css b/blog/2024-11-15-playing-with-fire/src/css/styles.module.css index f6fe4d3..4ceecaf 100644 --- a/blog/2024-11-15-playing-with-fire/src/css/styles.module.css +++ b/blog/2024-11-15-playing-with-fire/src/css/styles.module.css @@ -20,4 +20,9 @@ .inputElement > p { margin: 0 +} + +.inputReset { + display: flex; + float: right; } \ No newline at end of file diff --git a/blog/2024-11-15-playing-with-fire/src/params.ts b/blog/2024-11-15-playing-with-fire/src/params.ts index 6b0acd4..1688eec 100644 --- a/blog/2024-11-15-playing-with-fire/src/params.ts +++ b/blog/2024-11-15-playing-with-fire/src/params.ts @@ -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],