Update documentation

blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx

@@ -0,0 +1,5 @@
+import {VictoryArea} from "victory";
+
+function F() {
+    return <VictoryArea data={}
+}

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

@@ -0,0 +1,35 @@
+// hidden-start
+import {VictoryChart} from "victory";
+import {camera, histIndex} from "../src/camera";
+// hidden-end
+export class PlotHistogram {
+    public readonly pixels: Uint32Array;
+
+    public constructor(private readonly width: number, height: number) {
+        this.pixels = new Uint32Array(width * height);
+    }
+
+    public plot(x: number, y: number) {
+        const [pixelX, pixelY] = camera(x, y, this.width);
+        const pixelIndex = histIndex(pixelX, pixelY, this.width, 1);
+        this.pixels[pixelIndex] += 1;
+    }
+
+    public getHistogram() {
+        const data = new Map<number, number>();
+        this.pixels.forEach(value => {
+            const bucket = 32 - Math.clz32(value);
+
+            if (bucket in data) {
+                data[bucket] += 1;
+            } else {
+                data[bucket] = 1;
+            }
+        })
+
+        const output: {x: number, y: number}[] = [];
+        data.forEach((bucket, value) =>
+            output.push({x: Math.pow(bucket, 2), y: value}));
+        return output;
+    }
+}

blog/2024-11-15-playing-with-fire/3-log-density/index.mdx

@@ -0,0 +1,28 @@
+---
+slug: 2024/11/playing-with-fire-log-density
+title: "Playing with fire: Log-density display"
+date: 2024-11-15 14:00:00
+authors: [bspeice]
+tags: []
+---
+
+So far, our `plot()` function has been fairly simple; map an input coordinate
+to a specific pixel, and color in that pixel.
+This works well for simple function systems (like Sierpinski's Gasket),
+but more complex systems (like our reference parameters) produce grainy images.
+
+Every time we "turn on" pixels that have already been enabled, we're wasting work.
+Can we do something more intelligent with that information?
+
+<!-- truncate -->
+
+## Image histograms
+
+To start with, it's worth demonstrating how much work is actually "wasted."
+We'll render the reference image again, but this time, counting the times
+we tried to turn on a pixel.
+
+import CodeBlock from "@theme/CodeBlock";
+import plotHistogramSource from "!!raw-loader!./PlotHistogram";
+
+<CodeBlock language="typescript">{plotHistogramSource}</CodeBlock>