git-hash-art 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-hash-art",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "author": "gfargo <ghfargo@gmail.com>",
   "scripts": {
     "watch": "parcel watch",

package/src/__tests__/performance.test.ts

@@ -0,0 +1,243 @@
+import { describe, it, expect } from "vitest";
+import { createCanvas } from "@napi-rs/canvas";
+import { renderHashArt } from "../lib/render";
+import * as utils from "../lib/utils";
+import * as affinity from "../lib/canvas/shapes/affinity";
+import * as colors from "../lib/canvas/colors";
+import * as draw from "../lib/canvas/draw";
+import { shapes } from "../lib/canvas/shapes";
+import * as archetypes from "../lib/archetypes";
+
+const TEST_HASH = "46192e59d42f741c761cbea79462a8b3815dd905";
+const HASH_B = "deadbeefdeadbeefdeadbeefdeadbeefdeadbeef";
+
+function timeMs(fn: () => void, iterations = 1): number {
+  const start = performance.now();
+  for (let i = 0; i < iterations; i++) fn();
+  return performance.now() - start;
+}
+
+function createTestCtx(width = 512, height = 512) {
+  const canvas = createCanvas(width, height);
+  return canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+}
+
+// ── 1. Full pipeline benchmarks ─────────────────────────────────────
+
+describe("Full pipeline timing", () => {
+  const sizes: Array<[number, number, string]> = [
+    [128, 128, "128×128 (tiny)"],
+    [512, 512, "512×512 (small)"],
+    [1024, 1024, "1024×1024 (medium)"],
+    [2048, 2048, "2048×2048 (default)"],
+  ];
+
+  for (const [w, h, label] of sizes) {
+    it(`renders ${label} within budget`, () => {
+      const canvas = createCanvas(w, h);
+      const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+      const ms = timeMs(() => renderHashArt(ctx, TEST_HASH, { width: w, height: h }));
+      console.log(`  ${label}: ${ms.toFixed(1)} ms`);
+      expect(ms).toBeLessThan(30_000);
+    });
+  }
+
+  it("renders 512×512 with gridSize=9 layers=5 (dense worst case)", () => {
+    const ctx = createTestCtx(512, 512);
+    const ms = timeMs(() =>
+      renderHashArt(ctx, TEST_HASH, { width: 512, height: 512, gridSize: 9, layers: 5 }),
+    );
+    console.log(`  512×512 grid=9 layers=5: ${ms.toFixed(1)} ms`);
+    expect(ms).toBeLessThan(15_000);
+  });
+
+  it("renders 1024×1024 with multiple hashes consistently", () => {
+    const hashes = [
+      TEST_HASH,
+      HASH_B,
+      "ff00ff00ff00ff00ff00ff00ff00ff00ff00ff0",
+      "7777777777777777777777777777777777777777",
+    ];
+    const times: number[] = [];
+    for (const hash of hashes) {
+      const canvas = createCanvas(1024, 1024);
+      const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+      const ms = timeMs(() => renderHashArt(ctx, hash, { width: 1024, height: 1024 }));
+      times.push(ms);
+      console.log(`  1024×1024 hash=${hash.slice(0, 8)}: ${ms.toFixed(1)} ms`);
+    }
+    const min = Math.min(...times);
+    const max = Math.max(...times);
+    console.log(`  Variance: fastest=${min.toFixed(1)} ms, slowest=${max.toFixed(1)} ms, ratio=${(max / min).toFixed(2)}×`);
+    expect(max / min).toBeLessThan(8);
+  });
+});
+
+// ── 2. Color pipeline micro-benchmarks ──────────────────────────────
+
+describe("Color pipeline timing", () => {
+  it("SacredColorScheme construction + getColorsByMode", () => {
+    const iterations = 1000;
+    const ms = timeMs(() => {
+      const scheme = new colors.SacredColorScheme(TEST_HASH);
+      scheme.getColorsByMode("harmonious");
+    }, iterations);
+    console.log(`  SacredColorScheme: ${(ms / iterations).toFixed(3)} ms/call (${iterations} iterations)`);
+    expect(ms / iterations).toBeLessThan(5);
+  });
+
+  it("buildColorHierarchy", () => {
+    const scheme = new colors.SacredColorScheme(TEST_HASH);
+    const palette = scheme.getColors();
+    const iterations = 10_000;
+    const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+    const ms = timeMs(() => colors.buildColorHierarchy(palette, rng), iterations);
+    console.log(`  buildColorHierarchy: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(1);
+  });
+
+  it("jitterColorHSL (hot path — called 2-3× per shape)", () => {
+    const iterations = 50_000;
+    const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+    const ms = timeMs(() => colors.jitterColorHSL("#4a7fc1", rng, 6, 0.05), iterations);
+    console.log(`  jitterColorHSL: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.1);
+  });
+
+  it("enforceContrast (called per shape fill + stroke)", () => {
+    const iterations = 50_000;
+    const ms = timeMs(() => colors.enforceContrast("#4a7fc1", 0.15), iterations);
+    console.log(`  enforceContrast: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.1);
+  });
+
+  it("luminance (called inside enforceContrast)", () => {
+    const iterations = 100_000;
+    const ms = timeMs(() => colors.luminance("#4a7fc1"), iterations);
+    console.log(`  luminance: ${(ms / iterations).toFixed(5)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.05);
+  });
+
+  it("evolveHierarchy (called per layer)", () => {
+    const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+    const scheme = new colors.SacredColorScheme(TEST_HASH);
+    const palette = scheme.getColors();
+    const hierarchy = colors.buildColorHierarchy(palette, rng);
+    const iterations = 10_000;
+    const ms = timeMs(() => colors.evolveHierarchy(hierarchy, 0.5, 20), iterations);
+    console.log(`  evolveHierarchy: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.5);
+  });
+
+  it("hexWithAlpha (called many times per shape)", () => {
+    const iterations = 100_000;
+    const ms = timeMs(() => colors.hexWithAlpha("#4a7fc1", 0.5), iterations);
+    console.log(`  hexWithAlpha: ${(ms / iterations).toFixed(5)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.01);
+  });
+});
+
+// ── 3. Noise / flow field micro-benchmarks ──────────────────────────
+
+describe("Noise and flow field timing", () => {
+  it("createSimplexNoise setup", () => {
+    const iterations = 1000;
+    const ms = timeMs(() => {
+      const rng = utils.createRng(utils.seedFromHash(TEST_HASH, 333));
+      utils.createSimplexNoise(rng);
+    }, iterations);
+    console.log(`  createSimplexNoise: ${(ms / iterations).toFixed(3)} ms/call`);
+    expect(ms / iterations).toBeLessThan(2);
+  });
+
+  it("FBM noise sampling (3 octaves — used for flow field)", () => {
+    const rng = utils.createRng(utils.seedFromHash(TEST_HASH, 333));
+    const noise = utils.createSimplexNoise(rng);
+    const fbm = utils.createFBM(noise, 3, 2.0, 0.5);
+    const iterations = 100_000;
+    let sink = 0;
+    const ms = timeMs(() => {
+      sink += fbm(Math.random() * 5, Math.random() * 5);
+    }, iterations);
+    console.log(`  FBM (3 octaves): ${(ms / iterations).toFixed(5)} ms/call (sink=${sink.toFixed(2)})`);
+    expect(ms / iterations).toBeLessThan(0.02);
+  });
+});
+
+// ── 4. Shape palette and selection ──────────────────────────────────
+
+describe("Shape palette timing", () => {
+  it("buildShapePalette", () => {
+    const shapeNames = Object.keys(shapes);
+    const iterations = 5000;
+    const ms = timeMs(() => {
+      const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+      affinity.buildShapePalette(rng, shapeNames, "classic");
+    }, iterations);
+    console.log(`  buildShapePalette: ${(ms / iterations).toFixed(3)} ms/call`);
+    expect(ms / iterations).toBeLessThan(2);
+  });
+
+  it("pickShapeFromPalette (called per shape)", () => {
+    const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+    const shapeNames = Object.keys(shapes);
+    const palette = affinity.buildShapePalette(rng, shapeNames, "classic");
+    const iterations = 50_000;
+    const ms = timeMs(() => affinity.pickShapeFromPalette(palette, rng, 0.5), iterations);
+    console.log(`  pickShapeFromPalette: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.1);
+  });
+});
+
+// ── 5. Archetype selection ──────────────────────────────────────────
+
+describe("Archetype selection timing", () => {
+  it("selectArchetype (including ~15% blend chance)", () => {
+    const iterations = 10_000;
+    const ms = timeMs(() => {
+      const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+      archetypes.selectArchetype(rng);
+    }, iterations);
+    console.log(`  selectArchetype: ${(ms / iterations).toFixed(4)} ms/call`);
+    expect(ms / iterations).toBeLessThan(0.5);
+  });
+});
+
+// ── 6. Canvas draw operations (shape rendering) ─────────────────────
+
+describe("Shape rendering timing", () => {
+  const renderStyles = [
+    ["fill-and-stroke", 5000, 2],
+    ["watercolor", 2000, 5],
+    ["stipple", 1000, 10],
+    ["hatched", 2000, 5],
+    ["noise-grain", 500, 15],
+    ["fabric-weave", 1000, 5],
+    ["hand-drawn", 2000, 5],
+    ["marble-vein", 1000, 5],
+    ["wood-grain", 1000, 5],
+  ] as const;
+
+  for (const [style, iterations, maxMs] of renderStyles) {
+    it(`enhanceShapeGeneration — ${style}`, () => {
+      const ctx = createTestCtx(512, 512);
+      const rng = utils.createRng(utils.seedFromHash(TEST_HASH));
+      const size = style === "noise-grain" ? 200 : style === "stipple" ? 120 : 80;
+      const ms = timeMs(() => {
+        draw.enhanceShapeGeneration(ctx, "circle", 256, 256, {
+          fillColor: "rgba(74,127,193,0.5)",
+          strokeColor: "#333333",
+          strokeWidth: 2,
+          size,
+          rotation: 45,
+          renderStyle: style,
+          rng,
+          lightAngle: 1.2,
+          scaleFactor: 0.5,
+        });
+      }, iterations);
+      console.log(`  enhanceShape (${style}): ${(ms / iterations).toFixed(3)} ms/call`);
+      expect(ms / iterations).toBeLessThan(maxMs);
+    });
+  }
+});

package/src/__tests__/phase-breakdown.test.ts

@@ -0,0 +1,44 @@
+/**
+ * Per-phase timing breakdown using _debugTiming instrumentation.
+ * This gives exact cost of each pipeline section inside renderHashArt.
+ */
+import { describe, it, expect } from "vitest";
+import { createCanvas } from "@napi-rs/canvas";
+import { renderHashArt } from "../lib/render";
+import type { GenerationConfig } from "../types";
+
+const HASHES = [
+  { label: "46192e59", hash: "46192e59d42f741c761cbea79462a8b3815dd905" },
+  { label: "deadbeef", hash: "deadbeefdeadbeefdeadbeefdeadbeefdeadbeef" },
+  { label: "ff00ff00", hash: "ff00ff00ff00ff00ff00ff00ff00ff00ff00ff0" },
+  { label: "77777777", hash: "7777777777777777777777777777777777777777" },
+];
+
+function fmt(ms: number): string {
+  return ms < 1 ? `${(ms * 1000).toFixed(0)}µs` : `${ms.toFixed(1)}ms`;
+}
+
+describe("Phase breakdown via _debugTiming", () => {
+  for (const { label, hash } of HASHES) {
+    it(`${label} at 1024×1024`, () => {
+      const canvas = createCanvas(1024, 1024);
+      const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+      const timing: GenerationConfig["_debugTiming"] = { phases: {}, shapeCount: 0, extraCount: 0 };
+      const config: Partial<GenerationConfig> = { width: 1024, height: 1024, _debugTiming: timing };
+
+      const start = performance.now();
+      renderHashArt(ctx, hash, config);
+      const total = performance.now() - start;
+
+      console.log(`\n  ═══ ${label} (${total.toFixed(0)}ms total, ${timing!.shapeCount} shapes, ${timing!.extraCount} extras) ═══`);
+      const phases = timing!.phases;
+      // Sort by cost descending
+      const sorted = Object.entries(phases).sort((a, b) => b[1] - a[1]);
+      for (const [name, ms] of sorted) {
+        const pct = ((ms / total) * 100).toFixed(1);
+        console.log(`  ${name.padEnd(25)} ${fmt(ms).padStart(10)}  (${pct}%)`);
+      }
+      expect(total).toBeLessThan(5_000); // was 30s, now targeting <5s
+    });
+  }
+});

package/src/__tests__/phase-timing.test.ts

@@ -0,0 +1,260 @@
+/**
+ * Phase-level timing profiler — measures cost of each pipeline section
+ * by running the full pipeline with instrumented timing hooks.
+ *
+ * Strategy: We can't easily instrument inside renderHashArt without
+ * modifying it, so instead we measure the cost of individual subsystems
+ * in isolation at realistic scales, then compare to full pipeline time.
+ */
+import { describe, it, expect } from "vitest";
+import { createCanvas } from "@napi-rs/canvas";
+import { renderHashArt } from "../lib/render";
+import * as utils from "../lib/utils";
+import * as colors from "../lib/canvas/colors";
+
+const HASHES = [
+  { label: "46192e59", hash: "46192e59d42f741c761cbea79462a8b3815dd905" },
+  { label: "deadbeef", hash: "deadbeefdeadbeefdeadbeefdeadbeefdeadbeef" },
+  { label: "ff00ff00", hash: "ff00ff00ff00ff00ff00ff00ff00ff00ff00ff0" },
+  { label: "77777777", hash: "7777777777777777777777777777777777777777" },
+];
+
+function fmt(ms: number): string {
+  return ms < 1 ? `${(ms * 1000).toFixed(0)}µs` : `${ms.toFixed(1)}ms`;
+}
+
+describe("Phase cost breakdown", () => {
+  it("measures noise texture (phase 7) cost in isolation", () => {
+    // Phase 7 does getImageData → pixel loop → putImageData
+    // At 1024×1024 that's ~1.3M noise dots
+    const sizes = [512, 1024, 2048];
+    console.log("\n  ═══ Noise texture (phase 7) cost ═══");
+    for (const size of sizes) {
+      const canvas = createCanvas(size, size);
+      const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+      // Fill with something so getImageData has data
+      ctx.fillStyle = "#333";
+      ctx.fillRect(0, 0, size, size);
+
+      const noiseDensity = Math.floor((size * size) / 800);
+      const noiseRng = utils.createRng(utils.seedFromHash("test", 777));
+
+      const start = performance.now();
+      const imageData = ctx.getImageData(0, 0, size, size);
+      const getTime = performance.now() - start;
+
+      const data = imageData.data;
+      const loopStart = performance.now();
+      for (let i = 0; i < noiseDensity; i++) {
+        const nx = Math.floor(noiseRng() * size);
+        const ny = Math.floor(noiseRng() * size);
+        const brightness = noiseRng() > 0.5 ? 255 : 0;
+        const alpha = Math.floor((0.01 + noiseRng() * 0.03) * 255);
+        const idx = (ny * size + nx) * 4;
+        const srcA = alpha / 255;
+        const invA = 1 - srcA;
+        data[idx] = Math.round(data[idx] * invA + brightness * srcA);
+        data[idx + 1] = Math.round(data[idx + 1] * invA + brightness * srcA);
+        data[idx + 2] = Math.round(data[idx + 2] * invA + brightness * srcA);
+      }
+      const loopTime = performance.now() - loopStart;
+
+      const putStart = performance.now();
+      ctx.putImageData(imageData, 0, 0);
+      const putTime = performance.now() - putStart;
+
+      console.log(`  ${size}×${size}: getImageData=${fmt(getTime)}, loop(${noiseDensity} dots)=${fmt(loopTime)}, putImageData=${fmt(putTime)}, total=${fmt(getTime + loopTime + putTime)}`);
+    }
+    expect(true).toBe(true);
+  });
+
+  it("measures flow line cost (phase 6) — per-segment stroke vs batched", () => {
+    console.log("\n  ═══ Flow line (phase 6) cost: per-segment vs batched ═══");
+    const size = 1024;
+    const canvas = createCanvas(size, size);
+    const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+
+    // Simulate realistic flow line parameters
+    const numLines = 15;
+    const stepsPerLine = 50;
+    const totalSegments = numLines * stepsPerLine;
+
+    // Current approach: beginPath/moveTo/lineTo/stroke per segment
+    const start1 = performance.now();
+    for (let line = 0; line < numLines; line++) {
+      let px = Math.random() * size;
+      let py = Math.random() * size;
+      for (let s = 0; s < stepsPerLine; s++) {
+        const nx = px + (Math.random() - 0.5) * 10;
+        const ny = py + (Math.random() - 0.5) * 10;
+        ctx.globalAlpha = 0.1 * (1 - s / stepsPerLine);
+        ctx.strokeStyle = `rgba(100,150,200,0.3)`;
+        ctx.lineWidth = 2 * (1 - s / stepsPerLine * 0.8);
+        ctx.beginPath();
+        ctx.moveTo(px, py);
+        ctx.lineTo(nx, ny);
+        ctx.stroke();
+        px = nx;
+        py = ny;
+      }
+    }
+    const perSegTime = performance.now() - start1;
+
+    // Batched approach: group segments by quantized state
+    const start2 = performance.now();
+    // Quantize into alpha buckets (e.g. 5 buckets)
+    const ALPHA_BUCKETS = 5;
+    const buckets: Array<Array<[number, number, number, number]>> = [];
+    for (let i = 0; i < ALPHA_BUCKETS; i++) buckets.push([]);
+
+    for (let line = 0; line < numLines; line++) {
+      let px = Math.random() * size;
+      let py = Math.random() * size;
+      for (let s = 0; s < stepsPerLine; s++) {
+        const nx = px + (Math.random() - 0.5) * 10;
+        const ny = py + (Math.random() - 0.5) * 10;
+        const t = s / stepsPerLine;
+        const bucketIdx = Math.min(ALPHA_BUCKETS - 1, Math.floor(t * ALPHA_BUCKETS));
+        buckets[bucketIdx].push([px, py, nx, ny]);
+        px = nx;
+        py = ny;
+      }
+    }
+    for (let b = 0; b < ALPHA_BUCKETS; b++) {
+      const t = (b + 0.5) / ALPHA_BUCKETS;
+      ctx.globalAlpha = 0.1 * (1 - t);
+      ctx.strokeStyle = `rgba(100,150,200,0.3)`;
+      ctx.lineWidth = 2 * (1 - t * 0.8);
+      ctx.beginPath();
+      for (const [x1, y1, x2, y2] of buckets[b]) {
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.stroke();
+    }
+    const batchedTime = performance.now() - start2;
+
+    console.log(`  Per-segment (${totalSegments} segments): ${fmt(perSegTime)}`);
+    console.log(`  Batched (${ALPHA_BUCKETS} buckets): ${fmt(batchedTime)}`);
+    console.log(`  Speedup: ${(perSegTime / batchedTime).toFixed(1)}×`);
+    expect(true).toBe(true);
+  });
+
+  it("measures energy line cost (phase 6b)", () => {
+    console.log("\n  ═══ Energy lines (phase 6b) cost ═══");
+    const size = 1024;
+    const canvas = createCanvas(size, size);
+    const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+
+    // Worst case: 15 energy sources × 6 bursts = 90 line segments
+    const energyCount = 15;
+    const burstsPerSource = 6;
+
+    // Current: per-segment beginPath/stroke
+    const start1 = performance.now();
+    for (let e = 0; e < energyCount; e++) {
+      for (let b = 0; b < burstsPerSource; b++) {
+        ctx.globalAlpha = 0.06;
+        ctx.strokeStyle = "rgba(100,150,200,0.3)";
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(Math.random() * size, Math.random() * size);
+        ctx.lineTo(Math.random() * size, Math.random() * size);
+        ctx.stroke();
+      }
+    }
+    const perSegTime = performance.now() - start1;
+
+    // Batched: single path
+    const start2 = performance.now();
+    ctx.globalAlpha = 0.06;
+    ctx.strokeStyle = "rgba(100,150,200,0.3)";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    for (let e = 0; e < energyCount; e++) {
+      for (let b = 0; b < burstsPerSource; b++) {
+        ctx.moveTo(Math.random() * size, Math.random() * size);
+        ctx.lineTo(Math.random() * size, Math.random() * size);
+      }
+    }
+    ctx.stroke();
+    const batchedTime = performance.now() - start2;
+
+    console.log(`  Per-segment (${energyCount * burstsPerSource} lines): ${fmt(perSegTime)}`);
+    console.log(`  Batched (single path): ${fmt(batchedTime)}`);
+    console.log(`  Speedup: ${(perSegTime / batchedTime).toFixed(1)}×`);
+    expect(true).toBe(true);
+  });
+
+  it("measures connecting curves (phase 9) cost", () => {
+    console.log("\n  ═══ Connecting curves (phase 9) cost ═══");
+    const size = 1024;
+    const canvas = createCanvas(size, size);
+    const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+
+    const numCurves = 8; // typical for 1024×1024
+    // Current: per-curve beginPath/quadraticCurveTo/stroke
+    const start1 = performance.now();
+    for (let i = 0; i < numCurves; i++) {
+      ctx.globalAlpha = 0.08;
+      ctx.strokeStyle = "rgba(100,150,200,0.3)";
+      ctx.lineWidth = 0.8;
+      ctx.beginPath();
+      ctx.moveTo(Math.random() * size, Math.random() * size);
+      ctx.quadraticCurveTo(
+        Math.random() * size, Math.random() * size,
+        Math.random() * size, Math.random() * size,
+      );
+      ctx.stroke();
+    }
+    const perCurveTime = performance.now() - start1;
+    console.log(`  Per-curve (${numCurves} curves): ${fmt(perCurveTime)}`);
+    expect(true).toBe(true);
+  });
+
+  it("measures hexWithAlpha hot path cost", () => {
+    // hexWithAlpha is called thousands of times — check if caching helps
+    console.log("\n  ═══ hexWithAlpha caching potential ═══");
+    const iterations = 100_000;
+    const colors_list = ["#4a7fc1", "#c14a7f", "#7fc14a", "#f0e0d0", "#333333"];
+    const alphas = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8];
+
+    const start = performance.now();
+    for (let i = 0; i < iterations; i++) {
+      colors.hexWithAlpha(colors_list[i % colors_list.length], alphas[i % alphas.length]);
+    }
+    const uncachedTime = performance.now() - start;
+
+    // Simple cache simulation
+    const cache = new Map<string, string>();
+    const start2 = performance.now();
+    for (let i = 0; i < iterations; i++) {
+      const c = colors_list[i % colors_list.length];
+      const a = alphas[i % alphas.length];
+      const key = `${c}|${a}`;
+      if (!cache.has(key)) {
+        cache.set(key, colors.hexWithAlpha(c, a));
+      }
+      cache.get(key);
+    }
+    const cachedTime = performance.now() - start2;
+
+    console.log(`  Uncached: ${fmt(uncachedTime)} (${(uncachedTime / iterations * 1000).toFixed(2)}µs/call)`);
+    console.log(`  Cached:   ${fmt(cachedTime)} (${(cachedTime / iterations * 1000).toFixed(2)}µs/call)`);
+    console.log(`  Speedup:  ${(uncachedTime / cachedTime).toFixed(1)}×`);
+    expect(true).toBe(true);
+  });
+
+  it("full pipeline breakdown — before vs after", () => {
+    console.log("\n  ═══ Full pipeline timing (1024×1024) ═══");
+    for (const { label, hash } of HASHES) {
+      const canvas = createCanvas(1024, 1024);
+      const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+      const start = performance.now();
+      renderHashArt(ctx, hash, { width: 1024, height: 1024 });
+      const ms = performance.now() - start;
+      console.log(`  ${label}: ${fmt(ms)}`);
+    }
+    expect(true).toBe(true);
+  });
+});