git-hash-art 0.12.0 → 0.14.0

package/package.json

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

package/src/__tests__/custom-shapes.test.ts

@@ -0,0 +1,182 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createCanvas } from "@napi-rs/canvas";
+import * as render from "../lib/render";
+import * as affinity from "../lib/canvas/shapes/affinity";
+import type { CustomDrawFunction } from "../types";
+
+describe("Custom shapes", () => {
+  let ctx: CanvasRenderingContext2D;
+
+  beforeEach(() => {
+    const canvas = createCanvas(256, 256);
+    ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+  });
+
+  it("should render with custom shapes without crashing", () => {
+    const drawSpy = vi.fn<CustomDrawFunction>((ctx, size, rng) => {
+      const r = size / 2;
+      ctx.beginPath();
+      ctx.arc(0, 0, r, 0, Math.PI * 2);
+      ctx.closePath();
+    });
+
+    expect(() => {
+      render.renderHashArt(ctx, "abcdef1234567890", {
+        width: 256,
+        height: 256,
+        customShapes: {
+          myCircle: { draw: drawSpy },
+        },
+      });
+    }).not.toThrow();
+  });
+
+  it("should pass deterministic RNG to custom draw function", () => {
+    const rngValues: number[] = [];
+    const makeDraw = (collector: number[]): CustomDrawFunction => (ctx, size, rng) => {
+      collector.push(rng());
+      ctx.beginPath();
+      ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+      ctx.closePath();
+    };
+
+    render.renderHashArt(ctx, "deadbeefdeadbeef", {
+      width: 256,
+      height: 256,
+      customShapes: {
+        onlyShape: {
+          draw: makeDraw(rngValues),
+          profile: { tier: 1, heroCandidate: true, affinities: ["onlyShape"] },
+        },
+      },
+    });
+
+    if (rngValues.length > 0) {
+      const rngValues2: number[] = [];
+      const canvas2 = createCanvas(256, 256);
+      const ctx2 = canvas2.getContext("2d") as unknown as CanvasRenderingContext2D;
+
+      render.renderHashArt(ctx2, "deadbeefdeadbeef", {
+        width: 256,
+        height: 256,
+        customShapes: {
+          onlyShape: {
+            draw: makeDraw(rngValues2),
+            profile: { tier: 1, heroCandidate: true, affinities: ["onlyShape"] },
+          },
+        },
+      });
+
+      expect(rngValues).toEqual(rngValues2);
+    }
+  });
+
+  it("should not crash with empty customShapes", () => {
+    expect(() => {
+      render.renderHashArt(ctx, "1111111111111111", {
+        width: 256,
+        height: 256,
+        customShapes: {},
+      });
+    }).not.toThrow();
+  });
+
+  it("should not crash with undefined customShapes", () => {
+    expect(() => {
+      render.renderHashArt(ctx, "2222222222222222", {
+        width: 256,
+        height: 256,
+      });
+    }).not.toThrow();
+  });
+
+  it("should clean up custom profiles after render", () => {
+    render.renderHashArt(ctx, "3333333333333333", {
+      width: 256,
+      height: 256,
+      customShapes: {
+        tempShape: {
+          draw: (ctx, size) => {
+            ctx.beginPath();
+            ctx.rect(-size / 2, -size / 2, size, size);
+            ctx.closePath();
+          },
+        },
+      },
+    });
+
+    expect(affinity.SHAPE_PROFILES["tempShape"]).toBeUndefined();
+  });
+
+  it("should apply custom profile overrides", () => {
+    affinity.registerCustomProfile("testShape", {
+      tier: 1,
+      minSizeFraction: 0.1,
+      maxSizeFraction: 0.5,
+      affinities: ["circle", "triangle"],
+      heroCandidate: true,
+      bestStyles: ["stroke-only"],
+    });
+
+    const profile = affinity.SHAPE_PROFILES["testShape"];
+    expect(profile).toBeDefined();
+    expect(profile.tier).toBe(1);
+    expect(profile.minSizeFraction).toBe(0.1);
+    expect(profile.maxSizeFraction).toBe(0.5);
+    expect(profile.heroCandidate).toBe(true);
+    expect(profile.bestStyles).toEqual(["stroke-only"]);
+    expect(profile.category).toBe("procedural");
+
+    affinity.unregisterCustomProfile("testShape");
+    expect(affinity.SHAPE_PROFILES["testShape"]).toBeUndefined();
+  });
+
+  it("should use sensible defaults for missing profile fields", () => {
+    affinity.registerCustomProfile("defaultsShape", {});
+
+    const profile = affinity.SHAPE_PROFILES["defaultsShape"];
+    expect(profile.tier).toBe(2);
+    expect(profile.minSizeFraction).toBe(0.05);
+    expect(profile.maxSizeFraction).toBe(1.0);
+    expect(profile.affinities).toEqual(["circle", "square"]);
+    expect(profile.heroCandidate).toBe(false);
+    expect(profile.bestStyles).toEqual(["fill-and-stroke", "watercolor"]);
+
+    affinity.unregisterCustomProfile("defaultsShape");
+  });
+
+  it("should render with multiple custom shapes", () => {
+    const diamond: CustomDrawFunction = (ctx, size, rng) => {
+      const half = size / 2;
+      ctx.beginPath();
+      ctx.moveTo(0, -half);
+      ctx.lineTo(half * rng(), 0);
+      ctx.lineTo(0, half);
+      ctx.lineTo(-half * rng(), 0);
+      ctx.closePath();
+    };
+
+    const cross: CustomDrawFunction = (ctx, size, rng) => {
+      const arm = size * 0.15;
+      const half = size / 2 * (0.8 + rng() * 0.2);
+      ctx.beginPath();
+      ctx.rect(-arm, -half, arm * 2, size);
+      ctx.rect(-half, -arm, size, arm * 2);
+      ctx.closePath();
+    };
+
+    expect(() => {
+      render.renderHashArt(ctx, "cafebabe12345678", {
+        width: 256,
+        height: 256,
+        customShapes: {
+          customDiamond: { draw: diamond },
+          customCross: {
+            draw: cross,
+            profile: { tier: 1, heroCandidate: true },
+          },
+        },
+      });
+    }).not.toThrow();
+  });
+});

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/browser.ts

@@ -96,5 +96,5 @@ function generateDataURL(
 
 export { renderToCanvas, generateImageBlob, generateDataURL, renderHashArt };
 export { PRESETS } from "./lib/constants";
-export type { GenerationConfig } from "./types";
+export type { GenerationConfig, CustomShapeDefinition, CustomDrawFunction } from "./types";
 export { DEFAULT_CONFIG } from "./types";

package/src/index.ts

@@ -66,5 +66,5 @@ function saveImageToFile(
 
 export { generateImageFromHash, saveImageToFile, renderHashArt };
 export { PRESETS } from "./lib/constants";
-export type { GenerationConfig } from "./types";
+export type { GenerationConfig, CustomShapeDefinition, CustomDrawFunction } from "./types";
 export { DEFAULT_CONFIG } from "./types";

package/src/lib/canvas/draw.ts

@@ -134,6 +134,8 @@ interface EnhanceShapeConfig extends DrawShapeConfig {
   lightAngle?: number;
   /** Scale factor for resolution-independent sizing. */
   scaleFactor?: number;
+  /** Optional combined shapes registry (includes custom shapes). Falls back to built-in shapes. */
+  activeShapes?: Record<string, (ctx: CanvasRenderingContext2D, size: number, config?: any) => void>;
 }
 
 export function drawShape(
@@ -141,9 +143,9 @@ export function drawShape(
   shape: string,
   x: number,
   y: number,
-  config: DrawShapeConfig,
+  config: DrawShapeConfig & { activeShapes?: Record<string, (ctx: CanvasRenderingContext2D, size: number, config?: any) => void> },
 ) {
-  const { fillColor, strokeColor, strokeWidth, size, rotation } = config;
+  const { fillColor, strokeColor, strokeWidth, size, rotation, activeShapes } = config;
   ctx.save();
   ctx.translate(x, y);
   ctx.rotate((rotation * Math.PI) / 180);
@@ -151,7 +153,8 @@ export function drawShape(
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
 
-  const drawFunction = shapes[shape];
+  const registry = activeShapes ?? shapes;
+  const drawFunction = registry[shape];
   if (drawFunction) {
     drawFunction(ctx, size);
     ctx.fill();
@@ -746,7 +749,8 @@ export function enhanceShapeGeneration(
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
 
-  const drawFunction = shapes[shape];
+  const registry = config.activeShapes ?? shapes;
+  const drawFunction = registry[shape];
   if (drawFunction) {
     drawFunction(ctx, size, { rng });
     applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);

package/src/lib/canvas/shapes/affinity.ts

@@ -420,6 +420,39 @@ export const SHAPE_PROFILES: Record<string, ShapeProfile> = {
   },
 };
 
+/**
+ * Register a custom shape profile into SHAPE_PROFILES.
+ * Merges user-provided partial profile with sensible defaults.
+ */
+export function registerCustomProfile(
+  name: string,
+  partial?: {
+    tier?: 1 | 2 | 3;
+    minSizeFraction?: number;
+    maxSizeFraction?: number;
+    affinities?: string[];
+    heroCandidate?: boolean;
+    bestStyles?: string[];
+  },
+): void {
+  SHAPE_PROFILES[name] = {
+    tier: partial?.tier ?? 2,
+    minSizeFraction: partial?.minSizeFraction ?? 0.05,
+    maxSizeFraction: partial?.maxSizeFraction ?? 1.0,
+    affinities: partial?.affinities ?? ["circle", "square"],
+    category: "procedural",
+    heroCandidate: partial?.heroCandidate ?? false,
+    bestStyles: partial?.bestStyles ?? ["fill-and-stroke", "watercolor"],
+  };
+}
+
+/**
+ * Remove a custom shape profile from SHAPE_PROFILES.
+ */
+export function unregisterCustomProfile(name: string): void {
+  delete SHAPE_PROFILES[name];
+}
+
 // ── Shape palette: curated sets of shapes that work well together ────
 
 export interface ShapePalette {