git-hash-art 0.7.0 → 0.9.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "git-hash-art",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "author": "gfargo <ghfargo@gmail.com>",
   "scripts": {
     "watch": "parcel watch",
     "prebuild": "rm -rf .parcel-cache",
     "build": "parcel build",
     "build:examples": "node bin/generateExamples.js",
+    "build:versions": "node bin/generateVersionComparison.js",
     "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,md}'",
     "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,json,css,md}'",
     "release": "release-it",

package/src/lib/archetypes.ts

@@ -219,6 +219,57 @@ const ARCHETYPES: Archetype[] = [
     sizePower: 2.5,
     invertForeground: false,
   },
+  {
+    name: "watercolor-wash",
+    gridSize: 3,
+    layers: 3,
+    baseOpacity: 0.25,
+    opacityReduction: 0.03,
+    minShapeSize: 200,
+    maxShapeSize: 700,
+    backgroundStyle: "radial-light",
+    paletteMode: "harmonious",
+    preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    flowLineMultiplier: 0.5,
+    heroShape: false,
+    glowMultiplier: 0.3,
+    sizePower: 0.6,
+    invertForeground: false,
+  },
+  {
+    name: "op-art",
+    gridSize: 8,
+    layers: 2,
+    baseOpacity: 0.95,
+    opacityReduction: 0.05,
+    minShapeSize: 20,
+    maxShapeSize: 200,
+    backgroundStyle: "solid-light",
+    paletteMode: "high-contrast",
+    preferredStyles: ["fill-and-stroke", "stroke-only", "dashed"],
+    flowLineMultiplier: 0,
+    heroShape: false,
+    glowMultiplier: 0,
+    sizePower: 0.4,
+    invertForeground: false,
+  },
+  {
+    name: "collage",
+    gridSize: 4,
+    layers: 3,
+    baseOpacity: 0.9,
+    opacityReduction: 0.08,
+    minShapeSize: 80,
+    maxShapeSize: 500,
+    backgroundStyle: "solid-light",
+    paletteMode: "duotone",
+    preferredStyles: ["fill-and-stroke", "fill-only", "double-stroke"],
+    flowLineMultiplier: 0,
+    heroShape: true,
+    glowMultiplier: 0,
+    sizePower: 0.7,
+    invertForeground: false,
+  },
   {
     name: "classic",
     gridSize: 5,
@@ -236,6 +287,74 @@ const ARCHETYPES: Archetype[] = [
     sizePower: 1.8,
     invertForeground: false,
   },
+  {
+    name: "shattered-glass",
+    gridSize: 8,
+    layers: 3,
+    baseOpacity: 0.85,
+    opacityReduction: 0.1,
+    minShapeSize: 15,
+    maxShapeSize: 250,
+    backgroundStyle: "solid-dark",
+    paletteMode: "high-contrast",
+    preferredStyles: ["fill-and-stroke", "stroke-only", "fill-only"],
+    flowLineMultiplier: 0,
+    heroShape: false,
+    glowMultiplier: 0.3,
+    sizePower: 1.0,
+    invertForeground: false,
+  },
+  {
+    name: "botanical",
+    gridSize: 4,
+    layers: 4,
+    baseOpacity: 0.5,
+    opacityReduction: 0.06,
+    minShapeSize: 30,
+    maxShapeSize: 400,
+    backgroundStyle: "radial-light",
+    paletteMode: "earth",
+    preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    flowLineMultiplier: 3,
+    heroShape: true,
+    glowMultiplier: 0.2,
+    sizePower: 1.6,
+    invertForeground: false,
+  },
+  {
+    name: "stipple-portrait",
+    gridSize: 9,
+    layers: 2,
+    baseOpacity: 0.8,
+    opacityReduction: 0.05,
+    minShapeSize: 5,
+    maxShapeSize: 120,
+    backgroundStyle: "solid-light",
+    paletteMode: "monochrome",
+    preferredStyles: ["stipple", "fill-only", "hatched"],
+    flowLineMultiplier: 0,
+    heroShape: false,
+    glowMultiplier: 0,
+    sizePower: 2.8,
+    invertForeground: false,
+  },
+  {
+    name: "celestial",
+    gridSize: 7,
+    layers: 5,
+    baseOpacity: 0.45,
+    opacityReduction: 0.04,
+    minShapeSize: 8,
+    maxShapeSize: 450,
+    backgroundStyle: "radial-dark",
+    paletteMode: "neon",
+    preferredStyles: ["fill-only", "watercolor", "stroke-only", "incomplete"],
+    flowLineMultiplier: 2,
+    heroShape: true,
+    glowMultiplier: 2.5,
+    sizePower: 2.2,
+    invertForeground: false,
+  },
 ];
 
 /**

package/src/lib/canvas/colors.ts

@@ -325,9 +325,87 @@ export function hexWithAlpha(hex: string, alpha: number): string {
 }
 
 /**
- * Apply slight hue/saturation/lightness jitter to a hex color.
- * `rng` should return a float in [0,1). `amount` controls intensity (0-1, default 0.1).
+ * Color hierarchy — assigns dominant/secondary/accent roles to a palette.
+ * Dominant gets ~60% of usage, secondary ~25%, accent ~15%.
  */
+export interface ColorHierarchy {
+  dominant: string;
+  secondary: string;
+  accent: string;
+  all: string[];
+}
+
+export function buildColorHierarchy(colors: string[], rng: () => number): ColorHierarchy {
+  if (colors.length < 3) {
+    return {
+      dominant: colors[0] || "#888888",
+      secondary: colors[1] || colors[0] || "#888888",
+      accent: colors[colors.length - 1] || "#888888",
+      all: colors,
+    };
+  }
+  // Pick dominant as the color closest to the palette's average hue
+  const hsls = colors.map((c) => hexToHsl(c));
+  const avgHue = hsls.reduce((s, h) => s + h[0], 0) / hsls.length;
+  let dominantIdx = 0;
+  let minDist = 360;
+  for (let i = 0; i < hsls.length; i++) {
+    const d = Math.min(Math.abs(hsls[i][0] - avgHue), 360 - Math.abs(hsls[i][0] - avgHue));
+    if (d < minDist) { minDist = d; dominantIdx = i; }
+  }
+  // Accent is the color most distant from dominant in hue
+  let accentIdx = 0;
+  let maxDist = 0;
+  for (let i = 0; i < hsls.length; i++) {
+    if (i === dominantIdx) continue;
+    const d = Math.min(Math.abs(hsls[i][0] - hsls[dominantIdx][0]), 360 - Math.abs(hsls[i][0] - hsls[dominantIdx][0]));
+    if (d > maxDist) { maxDist = d; accentIdx = i; }
+  }
+  // Secondary is the remaining color with highest saturation
+  let secondaryIdx = 0;
+  let maxSat = -1;
+  for (let i = 0; i < hsls.length; i++) {
+    if (i === dominantIdx || i === accentIdx) continue;
+    if (hsls[i][1] > maxSat) { maxSat = hsls[i][1]; secondaryIdx = i; }
+  }
+  if (secondaryIdx === dominantIdx) secondaryIdx = accentIdx === 0 ? 1 : 0;
+
+  return {
+    dominant: colors[dominantIdx],
+    secondary: colors[secondaryIdx],
+    accent: colors[accentIdx],
+    all: colors,
+  };
+}
+
+/**
+ * Pick a color from the hierarchy with weighted probability.
+ * ~60% dominant, ~25% secondary, ~15% accent.
+ */
+export function pickHierarchyColor(hierarchy: ColorHierarchy, rng: () => number): string {
+  const roll = rng();
+  if (roll < 0.60) return hierarchy.dominant;
+  if (roll < 0.85) return hierarchy.secondary;
+  return hierarchy.accent;
+}
+
+/**
+ * HSL-space color jitter — preserves vibrancy better than RGB jitter.
+ * Applies small hue wobble + saturation/lightness variation.
+ */
+export function jitterColorHSL(
+  hex: string,
+  rng: () => number,
+  hueAmount = 8,
+  slAmount = 0.06,
+): string {
+  const [h, s, l] = hexToHsl(hex);
+  const newH = (h + (rng() - 0.5) * hueAmount * 2 + 360) % 360;
+  const newS = Math.max(0, Math.min(1, s + (rng() - 0.5) * slAmount * 2));
+  const newL = Math.max(0, Math.min(1, l + (rng() - 0.5) * slAmount * 2));
+  return hslToHex(newH, newS, newL);
+}
+
 export function jitterColor(
   hex: string,
   rng: () => number,
@@ -402,3 +480,33 @@ export function enforceContrast(
     return hslToHex(h, targetS, targetL);
   }
 }
+
+/**
+ * Apply a unified color grade to a hex color — shifts the entire image
+ * toward a cohesive tone. This is the "Instagram filter" effect.
+ */
+export function applyColorGrade(
+  hex: string,
+  gradeHue: number,
+  intensity: number,
+): string {
+  const [h, s, l] = hexToHsl(hex);
+  // Blend hue toward the grade hue
+  const hueDiff = ((gradeHue - h + 540) % 360) - 180;
+  const newH = (h + hueDiff * intensity * 0.3 + 360) % 360;
+  // Slightly unify saturation
+  const newS = Math.max(0, Math.min(1, s + (0.5 - s) * intensity * 0.15));
+  return hslToHex(newH, newS, l);
+}
+
+/**
+ * Compute a deterministic color grade from the hash.
+ * Returns a hue (0-360) and intensity (0.15-0.4).
+ */
+export function pickColorGrade(rng: () => number): { hue: number; intensity: number } {
+  // Warm golden, cool blue, rosy, teal, amber
+  const GRADE_HUES = [40, 220, 340, 175, 30];
+  const hue = GRADE_HUES[Math.floor(rng() * GRADE_HUES.length)] + (rng() - 0.5) * 20;
+  const intensity = 0.15 + rng() * 0.25;
+  return { hue: (hue + 360) % 360, intensity };
+}

package/src/lib/canvas/draw.ts

@@ -35,7 +35,13 @@ export type RenderStyle =
   | "dashed"           // dashed outline
   | "watercolor"       // multiple offset passes at low opacity
   | "hatched"          // cross-hatch texture fill
-  | "incomplete";      // draw only 60-85% of the stroke path
+  | "incomplete"       // draw only 60-85% of the stroke path
+  | "stipple"          // dot-fill texture
+  | "stencil"          // negative-space cutout effect
+  | "noise-grain"      // procedural noise grain texture clipped to shape
+  | "wood-grain"       // parallel wavy lines simulating wood
+  | "marble-vein"      // branching vein lines on a soft fill
+  | "fabric-weave";    // interlocking horizontal/vertical threads
 
 const RENDER_STYLES: RenderStyle[] = [
   "fill-and-stroke",
@@ -47,6 +53,12 @@ const RENDER_STYLES: RenderStyle[] = [
   "watercolor",
   "hatched",
   "incomplete",
+  "stipple",
+  "stencil",
+  "noise-grain",
+  "wood-grain",
+  "marble-vein",
+  "fabric-weave",
 ];
 
 export function pickRenderStyle(rng: () => number): RenderStyle {
@@ -151,23 +163,56 @@ function applyRenderStyle(
       break;
 
     case "watercolor": {
-      // Draw 3-4 slightly offset passes at low opacity for a bleed effect
-      const passes = 3 + (rng ? Math.floor(rng() * 2) : 0);
+      // Improved watercolor: edge darkening + radial bleed + layered washes
+      const passes = 4 + (rng ? Math.floor(rng() * 2) : 0);
       const savedAlpha = ctx.globalAlpha;
-      ctx.globalAlpha = savedAlpha * (0.3 / passes * 2);
+
+      // Pass 1: Base wash — large, soft fill at low opacity
+      ctx.globalAlpha = savedAlpha * 0.15;
+      ctx.save();
+      const baseScale = 1.08 + (rng ? rng() * 0.04 : 0);
+      ctx.scale(baseScale, baseScale);
+      ctx.fill();
+      ctx.restore();
+
+      // Pass 2: Multiple offset washes with radial displacement
+      ctx.globalAlpha = savedAlpha * (0.25 / passes * 2);
       for (let p = 0; p < passes; p++) {
-        const jx = rng ? (rng() - 0.5) * size * 0.06 : 0;
-        const jy = rng ? (rng() - 0.5) * size * 0.06 : 0;
+        // Radial outward displacement (not uniform) for organic bleed
+        const angle = rng ? rng() * Math.PI * 2 : p * Math.PI / 2;
+        const dist = rng ? rng() * size * 0.05 : size * 0.02;
+        const jx = Math.cos(angle) * dist;
+        const jy = Math.sin(angle) * dist;
         ctx.save();
         ctx.translate(jx, jy);
         ctx.fill();
         ctx.restore();
       }
+
+      // Pass 3: Edge darkening — draw a slightly smaller shape with lighter fill
+      // to simulate pigment pooling at boundaries
+      ctx.globalAlpha = savedAlpha * 0.35;
+      ctx.save();
+      const innerScale = 0.85 + (rng ? rng() * 0.08 : 0);
+      ctx.scale(innerScale, innerScale);
+      // Lighten the fill for the inner area
+      const origFill = ctx.fillStyle;
+      if (typeof fillColor === "string") {
+        ctx.fillStyle = fillColor.replace(/[\d.]+\)$/, (m) => {
+          const v = parseFloat(m);
+          return Math.min(1, v * 1.4).toFixed(2) + ")";
+        });
+      }
+      ctx.fill();
+      ctx.fillStyle = origFill;
+      ctx.restore();
+
       ctx.globalAlpha = savedAlpha;
-      // Light stroke on top
-      ctx.globalAlpha *= 0.4;
+      // Soft stroke on top — thinner than normal for delicacy
+      ctx.globalAlpha *= 0.25;
+      ctx.lineWidth = strokeWidth * 0.6;
       ctx.stroke();
-      ctx.globalAlpha /= 0.4;
+      ctx.globalAlpha /= 0.25;
       break;
     }
 
@@ -241,6 +286,226 @@ function applyRenderStyle(
       break;
     }
 
+    case "stipple": {
+      // Dot-fill texture — clip to shape, then scatter dots
+      const savedAlphaS = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaS * 0.15;
+      ctx.fill(); // ghost fill
+      ctx.globalAlpha = savedAlphaS;
+
+      ctx.save();
+      ctx.clip();
+      const dotSpacing = Math.max(2, size * 0.03);
+      const extent = size * 0.55;
+      ctx.globalAlpha = savedAlphaS * 0.7;
+      for (let dx = -extent; dx <= extent; dx += dotSpacing) {
+        for (let dy = -extent; dy <= extent; dy += dotSpacing) {
+          // Jitter each dot position for organic feel
+          const jx = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+          const jy = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
+          const dotR = rng ? dotSpacing * (0.15 + rng() * 0.2) : dotSpacing * 0.2;
+          ctx.beginPath();
+          ctx.arc(dx + jx, dy + jy, dotR, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      ctx.restore();
+      ctx.globalAlpha = savedAlphaS;
+      // Outline
+      ctx.globalAlpha *= 0.4;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.4;
+      break;
+    }
+
+    case "stencil": {
+      // Negative-space cutout — fill a rectangle, then erase the shape
+      const savedAlphaSt = ctx.globalAlpha;
+      // Fill a bounding area with the stroke color
+      ctx.globalAlpha = savedAlphaSt * 0.5;
+      ctx.fillStyle = strokeColor;
+      ctx.fillRect(-size * 0.6, -size * 0.6, size * 1.2, size * 1.2);
+      // Cut out the shape using destination-out
+      ctx.globalCompositeOperation = "destination-out";
+      ctx.globalAlpha = 1;
+      ctx.fill();
+      ctx.globalCompositeOperation = "source-over";
+      ctx.globalAlpha = savedAlphaSt;
+      // Subtle outline of the cutout
+      ctx.globalAlpha *= 0.3;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.3;
+      break;
+    }
+
+    case "noise-grain": {
+      // Procedural noise grain texture clipped to shape boundary
+      const savedAlphaN = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaN * 0.25;
+      ctx.fill(); // base tint
+      ctx.globalAlpha = savedAlphaN;
+
+      ctx.save();
+      ctx.clip();
+      const grainSpacing = Math.max(1.5, size * 0.015);
+      const extentN = size * 0.55;
+      ctx.globalAlpha = savedAlphaN * 0.6;
+      for (let gx = -extentN; gx <= extentN; gx += grainSpacing) {
+        for (let gy = -extentN; gy <= extentN; gy += grainSpacing) {
+          if (!rng) break;
+          const jx = (rng() - 0.5) * grainSpacing * 1.2;
+          const jy = (rng() - 0.5) * grainSpacing * 1.2;
+          const brightness = rng() > 0.5 ? 255 : 0;
+          const dotAlpha = 0.15 + rng() * 0.35;
+          ctx.globalAlpha = savedAlphaN * dotAlpha;
+          ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
+          const dotSize = grainSpacing * (0.3 + rng() * 0.5);
+          ctx.fillRect(gx + jx, gy + jy, dotSize, dotSize);
+        }
+      }
+      ctx.restore();
+      ctx.fillStyle = fillColor;
+      ctx.globalAlpha = savedAlphaN;
+      ctx.globalAlpha *= 0.4;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.4;
+      break;
+    }
+
+    case "wood-grain": {
+      // Parallel wavy lines simulating wood grain, clipped to shape
+      const savedAlphaW = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaW * 0.2;
+      ctx.fill(); // base tint
+      ctx.globalAlpha = savedAlphaW;
+
+      ctx.save();
+      ctx.clip();
+      const grainLineSpacing = Math.max(2, size * 0.035);
+      const extentW = size * 0.55;
+      const waveFreq = rng ? 3 + rng() * 5 : 5;
+      const waveAmp = rng ? size * (0.01 + rng() * 0.03) : size * 0.02;
+      const grainAngle = rng ? rng() * Math.PI : Math.PI * 0.25;
+      ctx.lineWidth = Math.max(0.5, strokeWidth * 0.3);
+      ctx.globalAlpha = savedAlphaW * 0.5;
+
+      const cosG = Math.cos(grainAngle);
+      const sinG = Math.sin(grainAngle);
+      for (let d = -extentW; d <= extentW; d += grainLineSpacing) {
+        ctx.beginPath();
+        for (let t = -extentW; t <= extentW; t += 2) {
+          const wave = Math.sin((t / extentW) * waveFreq * Math.PI) * waveAmp;
+          const px = t * cosG - (d + wave) * sinG;
+          const py = t * sinG + (d + wave) * cosG;
+          if (t === -extentW) ctx.moveTo(px, py);
+          else ctx.lineTo(px, py);
+        }
+        ctx.stroke();
+      }
+      ctx.restore();
+      ctx.globalAlpha = savedAlphaW;
+      ctx.globalAlpha *= 0.35;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.35;
+      break;
+    }
+
+    case "marble-vein": {
+      // Branching vein lines on a soft fill, clipped to shape
+      const savedAlphaM = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaM * 0.35;
+      ctx.fill(); // soft base
+      ctx.globalAlpha = savedAlphaM;
+
+      ctx.save();
+      ctx.clip();
+      const veinCount = rng ? 2 + Math.floor(rng() * 3) : 3;
+      const extentM = size * 0.45;
+      ctx.lineWidth = Math.max(0.5, strokeWidth * 0.5);
+      ctx.globalAlpha = savedAlphaM * 0.4;
+
+      for (let v = 0; v < veinCount; v++) {
+        const startX = rng ? (rng() - 0.5) * extentM * 2 : 0;
+        const startY = rng ? -extentM + rng() * extentM * 0.5 : -extentM;
+        let vx = startX;
+        let vy = startY;
+        const steps = 15 + (rng ? Math.floor(rng() * 15) : 10);
+        const stepLen = size * 0.04;
+
+        ctx.beginPath();
+        ctx.moveTo(vx, vy);
+        for (let s = 0; s < steps; s++) {
+          const drift = rng ? (rng() - 0.5) * stepLen * 1.5 : 0;
+          vx += drift;
+          vy += stepLen;
+          ctx.lineTo(vx, vy);
+          // Branch ~20% of the time
+          if (rng && rng() < 0.2 && s > 2 && s < steps - 3) {
+            const branchDir = rng() < 0.5 ? -1 : 1;
+            let bx = vx;
+            let by = vy;
+            const bSteps = 3 + Math.floor(rng() * 5);
+            ctx.moveTo(bx, by);
+            for (let bs = 0; bs < bSteps; bs++) {
+              bx += branchDir * stepLen * (0.5 + rng() * 0.5);
+              by += stepLen * 0.6;
+              ctx.lineTo(bx, by);
+            }
+            ctx.moveTo(vx, vy); // return to main vein
+          }
+        }
+        ctx.stroke();
+      }
+      ctx.restore();
+      ctx.globalAlpha = savedAlphaM;
+      ctx.globalAlpha *= 0.3;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.3;
+      break;
+    }
+
+    case "fabric-weave": {
+      // Interlocking horizontal/vertical threads clipped to shape
+      const savedAlphaF = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaF * 0.15;
+      ctx.fill(); // ghost base
+      ctx.globalAlpha = savedAlphaF;
+
+      ctx.save();
+      ctx.clip();
+      const threadSpacing = Math.max(2, size * 0.04);
+      const extentF = size * 0.55;
+      ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
+      ctx.globalAlpha = savedAlphaF * 0.55;
+
+      // Horizontal threads
+      for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
+        ctx.beginPath();
+        ctx.moveTo(-extentF, y);
+        ctx.lineTo(extentF, y);
+        ctx.stroke();
+      }
+      // Vertical threads (offset by half spacing for weave effect)
+      ctx.globalAlpha = savedAlphaF * 0.45;
+      ctx.strokeStyle = fillColor;
+      for (let x = -extentF; x <= extentF; x += threadSpacing * 2) {
+        ctx.beginPath();
+        for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
+          // Over-under: draw segment, skip segment
+          ctx.moveTo(x, y);
+          ctx.lineTo(x, y + threadSpacing);
+        }
+        ctx.stroke();
+      }
+      ctx.strokeStyle = strokeColor;
+      ctx.restore();
+      ctx.globalAlpha = savedAlphaF;
+      ctx.globalAlpha *= 0.3;
+      ctx.stroke();
+      ctx.globalAlpha /= 0.3;
+      break;
+    }
+
     case "fill-and-stroke":
     default:
       ctx.fill();
@@ -325,3 +590,88 @@ export function enhanceShapeGeneration(
 
   ctx.restore();
 }
+
+// ── Shape mirroring effect ──────────────────────────────────────────
+// Draws a shape and its mirror (reflected across an axis) for visual
+// symmetry. Works especially well with basic shapes like triangles,
+// crescents, and penrose tiles.
+
+export type MirrorAxis = "horizontal" | "vertical" | "diagonal" | "radial-4";
+
+/**
+ * Draw a shape with a mirrored reflection.
+ * The mirror is drawn at reduced opacity with optional offset.
+ */
+export function drawMirroredShape(
+  ctx: CanvasRenderingContext2D,
+  shape: string,
+  x: number,
+  y: number,
+  config: EnhanceShapeConfig & { mirrorAxis?: MirrorAxis; mirrorGap?: number },
+): void {
+  const { mirrorAxis = "horizontal", mirrorGap = 0 } = config;
+
+  // Draw the primary shape
+  enhanceShapeGeneration(ctx, shape, x, y, config);
+
+  // Draw the mirrored copy
+  ctx.save();
+  const savedAlpha = ctx.globalAlpha;
+  ctx.globalAlpha = savedAlpha * 0.7; // mirror is slightly softer
+
+  switch (mirrorAxis) {
+    case "horizontal":
+      // Reflect across vertical axis at shape position
+      enhanceShapeGeneration(ctx, shape, x, y + mirrorGap, {
+        ...config,
+        rotation: -(config.rotation || 0),
+        size: config.size * 0.95,
+      });
+      break;
+    case "vertical":
+      enhanceShapeGeneration(ctx, shape, x + mirrorGap, y, {
+        ...config,
+        rotation: 180 - (config.rotation || 0),
+        size: config.size * 0.95,
+      });
+      break;
+    case "diagonal":
+      // Reflect across 45° axis
+      enhanceShapeGeneration(ctx, shape, x + mirrorGap * 0.7, y + mirrorGap * 0.7, {
+        ...config,
+        rotation: 90 - (config.rotation || 0),
+        size: config.size * 0.9,
+      });
+      break;
+    case "radial-4":
+      // Four-way radial mirror
+      for (let i = 1; i < 4; i++) {
+        const angle = (i / 4) * Math.PI * 2;
+        const mx = x + Math.cos(angle) * mirrorGap;
+        const my = y + Math.sin(angle) * mirrorGap;
+        ctx.globalAlpha = savedAlpha * (0.7 - i * 0.1);
+        enhanceShapeGeneration(ctx, shape, mx, my, {
+          ...config,
+          rotation: (config.rotation || 0) + i * 90,
+          size: config.size * (0.95 - i * 0.05),
+        });
+      }
+      break;
+  }
+
+  ctx.globalAlpha = savedAlpha;
+  ctx.restore();
+}
+
+/**
+ * Pick a mirror axis deterministically.
+ * Returns null ~60% of the time (no mirroring).
+ */
+export function pickMirrorAxis(rng: () => number): MirrorAxis | null {
+  const roll = rng();
+  if (roll < 0.60) return null;
+  if (roll < 0.75) return "horizontal";
+  if (roll < 0.87) return "vertical";
+  if (roll < 0.95) return "diagonal";
+  return "radial-4";
+}