Mass formatting, fix mobile display, fix issues with image wrap-around

blog/2024-11-15-playing-with-fire/3-log-density/chaosGameHistogram.ts

@@ -1,45 +1,78 @@
 // hidden-start
-import {randomBiUnit} from "../src/randomBiUnit";
-import {randomChoice} from "../src/randomChoice";
-import {Props as ChaosGameFinalProps} from "../2-transforms/chaosGameFinal";
-import {camera, histIndex} from "../src/camera";
+import { randomBiUnit } from "../src/randomBiUnit";
+import { randomChoice } from "../src/randomChoice";
+import { Props as ChaosGameFinalProps } from "../2-transforms/chaosGameFinal";
+import { camera, histIndex } from "../src/camera";
 
 const quality = 10;
 const step = 100_000;
 // hidden-end
-export type Props = ChaosGameFinalProps & {
-    paint: (width: number, height: number, histogram: number[]) => ImageData;
+type Props = ChaosGameFinalProps & {
+  paint: (
+    width: number,
+    height: number,
+    histogram: number[]
+  ) => ImageData;
 }
-export function* chaosGameHistogram({width, height, transforms, final, paint}: Props) {
-    let iterations = quality * width * height;
 
-    // highlight-start
-    const histogram = Array<number>(width * height).fill(0);
-    // highlight-end
+export function* chaosGameHistogram(
+  {
+    width,
+    height,
+    transforms,
+    final,
+    paint
+  }: Props
+) {
+  const pixels = width * height;
+  const iterations = quality * pixels;
 
-    let [x, y] = [randomBiUnit(), randomBiUnit()];
+  // highlight-start
+  const hist = Array<number>(pixels)
+    .fill(0);
 
-    for (let i = 0; i < iterations; i++) {
-        const [_, transform] = randomChoice(transforms);
-        [x, y] = transform(x, y);
-        const [finalX, finalY] = final(x, y);
+  const plotHist = (
+    x: number,
+    y: number
+  ) => {
+    const [pixelX, pixelY] =
+      camera(x, y, width);
 
-        if (i > 20) {
-            // highlight-start
-            const [pixelX, pixelY] = camera(finalX, finalY, width);
-            const hIndex = histIndex(pixelX, pixelY, width, 1);
+    if (
+      pixelX < 0 ||
+      pixelX >= width ||
+      pixelY < 0 ||
+      pixelY >= height
+    )
+      return;
 
-            if (hIndex < 0 || hIndex >= histogram.length) {
-                continue;
-            }
+    const hIndex =
+      histIndex(pixelX, pixelY, width, 1);
 
-            histogram[hIndex] += 1;
-            // highlight-end
-        }
+    hist[hIndex] += 1;
+  };
+  // highlight-end
 
-        if (i % step === 0)
-            yield paint(width, height, histogram);
+  let [x, y] = [
+    randomBiUnit(),
+    randomBiUnit()
+  ];
+
+  for (let i = 0; i < iterations; i++) {
+    const [_, transform] =
+      randomChoice(transforms);
+    [x, y] = transform(x, y);
+    const [finalX, finalY] = final(x, y);
+
+    if (i > 20) {
+      // highlight-start
+      plotHist(finalX, finalY);
+      // highlight-end
     }
 
-    yield paint(width, height, histogram);
+    if (i % step === 0)
+      yield paint(width, height, hist);
+  }
+
+  yield paint(width, height, hist);
 }