Log density visualization

blog/2024-11-15-playing-with-fire/1-introduction/GasketWeighted.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState, useContext} from "react";
 import {PainterContext} from "../src/Canvas";
-import {chaosGameWeighted } from "./chaosGameWeighted";
+import {chaosGameWeighted} from "./chaosGameWeighted";
 import TeX from '@matejmazur/react-katex';
 
 import styles from "../src/css/styles.module.css"
@@ -16,14 +16,15 @@ export default function GasketWeighted() {
     const f1: Transform = (x, y) => [(x + 1) / 2, y / 2];
     const f2: Transform = (x, y) => [x / 2, (y + 1) / 2];
 
-    const {setPainter} = useContext(PainterContext);
+    const {width, height, setPainter} = useContext(PainterContext);
 
     useEffect(() => {
-        setPainter(chaosGameWeighted([
+        const transforms: [number, Transform][] = [
             [f0Weight, f0],
             [f1Weight, f1],
             [f2Weight, f2]
-        ]));
+        ];
+        setPainter(chaosGameWeighted({width, height, transforms}));
     }, [f0Weight, f1Weight, f2Weight]);
 
     const weightInput = (title, weight, setWeight) => (

blog/2024-11-15-playing-with-fire/1-introduction/chaosGameWeighted.ts

@@ -6,8 +6,13 @@ import {Transform} from "../src/transform";
 const iterations = 50_000;
 const step = 1000;
 // hidden-end
-export function* chaosGameWeighted(transforms: [number, Transform][]) {
-    let image = new ImageData(500, 500);
+export type ChaosGameWeightedProps = {
+    width: number,
+    height: number,
+    transforms: [number, Transform][]
+}
+export function* chaosGameWeighted({width, height, transforms}: ChaosGameWeightedProps) {
+    let image = new ImageData(width, height);
     var [x, y] = [randomBiUnit(), randomBiUnit()];
 
     for (let i = 0; i < iterations; i++) {