From b7eed2297ae36e97f553689ad3d9da2ca98abc5b Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Sat, 30 Nov 2024 18:01:29 -0500
Subject: [PATCH] Add a reset button

Probably overkill, but I kinda like it.
---
 .../1-introduction/index.mdx                  |  4 +--
 .../2-transforms/CoefEditor.tsx               |  7 ++++--
 .../2-transforms/FlameBlend.tsx               | 25 +++++++++++--------
 .../2-transforms/FlameFinal.tsx               | 11 +++++---
 .../2-transforms/FlamePost.tsx                | 20 ++++++++++-----
 .../2-transforms/VariationEditor.tsx          |  7 ++++--
 .../2-transforms/index.mdx                    | 12 +++------
 .../2024-11-15-playing-with-fire/params.flame |  4 +--
 .../src/Canvas.tsx                            |  6 +++--
 .../src/css/styles.module.css                 |  5 ++++
 .../src/params.ts                             |  4 +--
 11 files changed, 64 insertions(+), 41 deletions(-)

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";
 
-<Canvas width={500} height={500}>
-    <BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>
-</Canvas>
\ No newline at end of file
+<Canvas><BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly></Canvas>
\ 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 = <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}
diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx b/blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx
index b54db96..f569844 100644
--- a/blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx
+++ b/blog/2024-11-15-playing-with-fire/2-transforms/FlameBlend.tsx
@@ -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}/>
         </>
     )
 }
\ 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<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}/>
         </>
     )
 }
\ 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<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}/>
         </>
     )
 }
\ 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 = <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}
diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx b/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
index 5209003..59e24cd 100644
--- a/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
+++ b/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
@@ -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>
\ No newline at end of file
+<Canvas><BrowserOnly>{() => <FlameFinal/>}</BrowserOnly></Canvas>
\ 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 @@
 <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
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<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>
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],