Log density visualization

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

@@ -4,7 +4,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 
 function invertImage(sourceImage: ImageData): ImageData {
     const image = new ImageData(sourceImage.width, sourceImage.height);
-    image.data.forEach((value, index) =>
+    sourceImage.data.forEach((value, index) =>
         image.data[index] = index % 4 === 3 ? value : 0xff - value)
 
     return image;
@@ -13,7 +13,6 @@ function invertImage(sourceImage: ImageData): ImageData {
 type InvertibleCanvasProps = {
     width: number,
     height: number,
-    hidden?: boolean,
     // NOTE: Images are provided as a single-element array
     //so we can allow re-painting with the same (modified) ImageData reference.
     image?: [ImageData],
@@ -27,7 +26,7 @@ type InvertibleCanvasProps = {
  * @param hidden Hide the canvas element
  * @param image Image data to draw on the canvas
  */
-const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height, hidden, image}) => {
+const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height, image}) => {
     const [canvasCtx, setCanvasCtx] = useState<CanvasRenderingContext2D>(null);
     const canvasRef = useCallback(node => {
         if (node !== null) {
@@ -54,7 +53,6 @@ const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height, hidde
             ref={canvasRef}
             width={width}
             height={height}
-            hidden={hidden ?? false}
             style={{
                 aspectRatio: width / height,
                 width: '75%'
@@ -73,7 +71,6 @@ export const PainterContext = createContext<PainterProps>(null);
 interface CanvasProps {
     width?: number;
     height?: number;
-    hidden?: boolean;
     children?: React.ReactElement;
 }
 
@@ -105,7 +102,7 @@ interface CanvasProps {
  * but we rely on contexts to manage the iterator, and I can't find
  * a good way to make those generic.
  */
-export default function Canvas({width, height, hidden, children}: CanvasProps) {
+export default function Canvas({width, height, children}: CanvasProps) {
     const [image, setImage] = useState<[ImageData]>(null);
     const [painterHolder, setPainterHolder] = useState<[Iterator<ImageData>]>(null);
     useEffect(() => {
@@ -135,7 +132,7 @@ export default function Canvas({width, height, hidden, children}: CanvasProps) {
     return (
         <>
             <center>
-                <InvertibleCanvas width={width} height={height} hidden={hidden} image={image}/>
+                <InvertibleCanvas width={width} height={height} image={image}/>
             </center>
             <PainterContext.Provider value={{width, height, setPainter}}>
                 <BrowserOnly>{() => children}</BrowserOnly>

blog/2024-11-15-playing-with-fire/src/applyTransform.ts

@@ -0,0 +1,9 @@
+import {Transform} from "./transform";
+import {applyCoefs, Coefs} from "./coefs";
+import {blend, VariationBlend} from "./blend";
+
+export const applyTransform = (coefs: Coefs, variations: VariationBlend): Transform =>
+    (x, y) => blend(...applyCoefs(x, y, coefs), variations);
+
+export const applyPost = (coefsPost: Coefs, transform: Transform): Transform =>
+    (x, y) => applyCoefs(...transform(x, y), coefsPost);

blog/2024-11-15-playing-with-fire/src/blend.ts

@@ -0,0 +1,18 @@
+// hidden-start
+import {Variation} from "./variation";
+// hidden-end
+export type VariationBlend = [number, Variation][];
+export function blend(
+    x: number,
+    y: number,
+    variations: VariationBlend): [number, number] {
+    let [finalX, finalY] = [0, 0];
+
+    for (const [weight, variation] of variations) {
+        const [varX, varY] = variation(x, y);
+        finalX += weight * varX;
+        finalY += weight * varY;
+    }
+
+    return [finalX, finalY];
+}

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

@@ -4,11 +4,13 @@
  */
 
 import { Coefs } from './coefs';
-import {VariationBlend} from "./variationBlend";
+import {VariationBlend} from "./blend";
 import { linear } from './linear'
 import { julia } from './julia'
 import { popcorn } from './popcorn'
 import {pdj, PdjParams} from './pdj'
+import {Transform} from "./transform";
+import {applyPost, applyTransform} from "./applyTransform";
 
 export const identityCoefs: Coefs = {
     a: 1, b: 0, c: 0,
@@ -66,6 +68,14 @@ export const xformFinalVariations: VariationBlend = [
 ]
 export const xformFinalColor = 0;
 
+export const xforms: [number, Transform][] = [
+    [xform1Weight, applyPost(xform1CoefsPost, applyTransform(xform1Coefs, xform1Variations))],
+    [xform2Weight, applyPost(xform2CoefsPost, applyTransform(xform2Coefs, xform2Variations))],
+    [xform3Weight, applyPost(xform3CoefsPost, applyTransform(xform3Coefs, xform3Variations))],
+]
+
+export const xformFinal: Transform = applyPost(xformFinalCoefsPost, applyTransform(xformFinalCoefs, xformFinalVariations));
+
 export const palette =
     "7E3037762C45722B496E2A4E6A2950672853652754632656" +
     "5C265C5724595322574D2155482153462050451F4E441E4D" +

blog/2024-11-15-playing-with-fire/src/variationBlend.ts

@@ -1,2 +0,0 @@
-import {Variation} from "./variation";
-export type VariationBlend = [number, Variation][];