Add a reset button

Probably overkill, but I kinda like it.

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}>
+<Canvas><BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly></Canvas>
-    <BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>
-</Canvas>

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}

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 1"} variations={xform1Variations} setVariations={setXform1Variations}
-            <VariationEditor title={"Transform 2"} variations={xform2Variations} setVariations={setXform2Variations}/>
+                             resetVariations={resetXform1Variations}/>
-            <VariationEditor title={"Transform 3"} variations={xform3Variations} setVariations={setXform3Variations}/>
+            <VariationEditor title={"Transform 2"} variations={xform2Variations} setVariations={setXform2Variations}
+                             resetVariations={resetXform2Variations}/>
+            <VariationEditor title={"Transform 3"} variations={xform3Variations} setVariations={setXform3Variations}
+                             resetVariations={resetXform3Variations}/>
         </>
     )
 }

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}/>
+                             setVariations={setXformFinalVariations} resetVariations={resetXformFinalVariations}/>
-            <CoefEditor title={"Final Transform Post"} isPost={true} coefs={xformFinalCoefsPost} setCoefs={setXformFinalCoefsPost}/>
+            <CoefEditor title={"Final Transform Post"} isPost={true} coefs={xformFinalCoefsPost}
+                        setCoefs={setXformFinalCoefsPost} resetCoefs={resetXformFinalCoefsPost}/>
         </>
     )
 }

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 [xform1CoefsPost, setXform1CoefsPost] = useState<Coefs>(xform1CoefsPostDefault);
-    const [xform2CoefsPost, setXform2PostCoefs] = useState<Coefs>(xform2CoefsPostDefault);
+    const resetXform1CoefsPost = () => setXform1CoefsPost(xform1CoefsPostDefault);
-    const [xform3CoefsPost, setXform3PostCoefs] = useState<Coefs>(xform3CoefsPostDefault);
+
+    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 1 Post"} isPost={true} coefs={xform1CoefsPost} setCoefs={setXform1CoefsPost}
-            <CoefEditor title={"Transform 2 Post"} isPost={true} coefs={xform2CoefsPost} setCoefs={setXform2PostCoefs}/>
+                        resetCoefs={resetXform1CoefsPost}/>
-            <CoefEditor title={"Transform 3 Post"} isPost={true} coefs={xform3CoefsPost} setCoefs={setXform3PostCoefs}/>
+            <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}/>
         </>
     )
 }

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}

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

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

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;
+    width?: number;
-    height: 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>

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

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

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,
+    a: 1, b: 0, c: 0.24,
-    d: 0, e: 1, f: 0.271521,
+    d: 0, e: 1, f: 0.27,
 }
 export const xform2Variations: VariationBlend = [
     [1, linear],