git-hash-art 0.6.0 → 0.8.0

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

@@ -0,0 +1,479 @@
+/**
+ * Shape affinity system — controls which shapes look good together,
+ * quality tiers for different rendering contexts, and size preferences.
+ *
+ * This replaces the naive "pick any shape" approach with intentional
+ * curation that produces more cohesive compositions.
+ */
+
+// ── Quality tiers ───────────────────────────────────────────────────
+// Not all shapes render equally well at all sizes or in all contexts.
+// Tier 1 shapes are visually strong at any size; Tier 3 shapes need
+// specific conditions to look good.
+
+export type ShapeTier = 1 | 2 | 3;
+
+export interface ShapeProfile {
+  /** Visual quality tier (1 = always good, 3 = situational) */
+  tier: ShapeTier;
+  /** Minimum size (as fraction of maxShapeSize) before shape looks bad */
+  minSizeFraction: number;
+  /** Maximum size fraction — some shapes look bad when huge */
+  maxSizeFraction: number;
+  /** Which shapes this one composes well with */
+  affinities: string[];
+  /** Category for grouping */
+  category: "basic" | "complex" | "sacred" | "procedural";
+  /** Whether this shape works well as a hero/focal element */
+  heroCandidate: boolean;
+  /** Best render styles for this shape */
+  bestStyles: string[];
+}
+
+export const SHAPE_PROFILES: Record<string, ShapeProfile> = {
+  // ── Basic shapes ──────────────────────────────────────────────
+  circle: {
+    tier: 1,
+    minSizeFraction: 0.05,
+    maxSizeFraction: 1.0,
+    affinities: ["circle", "blob", "hexagon", "flowerOfLife", "seedOfLife"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+  },
+  square: {
+    tier: 2,
+    minSizeFraction: 0.08,
+    maxSizeFraction: 0.7,
+    affinities: ["square", "diamond", "superellipse", "islamicPattern"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-and-stroke", "stroke-only", "hatched"],
+  },
+  triangle: {
+    tier: 1,
+    minSizeFraction: 0.06,
+    maxSizeFraction: 0.9,
+    affinities: ["triangle", "diamond", "hexagon", "merkaba", "sriYantra"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-and-stroke", "fill-only", "watercolor"],
+  },
+  hexagon: {
+    tier: 1,
+    minSizeFraction: 0.05,
+    maxSizeFraction: 1.0,
+    affinities: ["hexagon", "circle", "flowerOfLife", "metatronsCube", "triangle"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-only", "fill-and-stroke", "watercolor"],
+  },
+  star: {
+    tier: 2,
+    minSizeFraction: 0.08,
+    maxSizeFraction: 0.6,
+    affinities: ["star", "circle", "mandala", "spirograph"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-and-stroke", "stroke-only", "dashed"],
+  },
+  "jacked-star": {
+    tier: 3,
+    minSizeFraction: 0.1,
+    maxSizeFraction: 0.4,
+    affinities: ["star", "circle"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "dashed"],
+  },
+  heart: {
+    tier: 3,
+    minSizeFraction: 0.1,
+    maxSizeFraction: 0.5,
+    affinities: ["circle", "blob"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-only", "watercolor"],
+  },
+  diamond: {
+    tier: 2,
+    minSizeFraction: 0.06,
+    maxSizeFraction: 0.8,
+    affinities: ["diamond", "triangle", "square", "merkaba"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["fill-and-stroke", "fill-only", "double-stroke"],
+  },
+  cube: {
+    tier: 3,
+    minSizeFraction: 0.08,
+    maxSizeFraction: 0.5,
+    affinities: ["square", "diamond"],
+    category: "basic",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "fill-and-stroke"],
+  },
+
+  // ── Complex shapes ────────────────────────────────────────────
+  platonicSolid: {
+    tier: 2,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.8,
+    affinities: ["metatronsCube", "merkaba", "hexagon", "triangle"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "double-stroke", "dashed"],
+  },
+  fibonacciSpiral: {
+    tier: 1,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 1.0,
+    affinities: ["circle", "rose", "spirograph", "flowerOfLife"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "incomplete", "watercolor"],
+  },
+  islamicPattern: {
+    tier: 2,
+    minSizeFraction: 0.25,
+    maxSizeFraction: 0.9,
+    affinities: ["square", "hexagon", "star", "mandala"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "dashed", "hatched"],
+  },
+  celticKnot: {
+    tier: 2,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 0.7,
+    affinities: ["circle", "lissajous", "spirograph"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "double-stroke"],
+  },
+  merkaba: {
+    tier: 1,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 1.0,
+    affinities: ["triangle", "diamond", "sriYantra", "metatronsCube"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "fill-and-stroke", "double-stroke"],
+  },
+  mandala: {
+    tier: 1,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 1.0,
+    affinities: ["circle", "flowerOfLife", "spirograph", "rose"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "dashed", "incomplete"],
+  },
+  fractal: {
+    tier: 2,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 0.8,
+    affinities: ["blob", "lissajous", "circle"],
+    category: "complex",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "incomplete"],
+  },
+
+  // ── Sacred shapes ─────────────────────────────────────────────
+  flowerOfLife: {
+    tier: 1,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 1.0,
+    affinities: ["circle", "hexagon", "seedOfLife", "eggOfLife", "metatronsCube"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "watercolor", "incomplete"],
+  },
+  treeOfLife: {
+    tier: 2,
+    minSizeFraction: 0.25,
+    maxSizeFraction: 0.9,
+    affinities: ["circle", "flowerOfLife", "metatronsCube"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "double-stroke"],
+  },
+  metatronsCube: {
+    tier: 1,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 1.0,
+    affinities: ["hexagon", "flowerOfLife", "platonicSolid", "merkaba"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "dashed", "incomplete"],
+  },
+  sriYantra: {
+    tier: 1,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 1.0,
+    affinities: ["triangle", "merkaba", "mandala", "diamond"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "fill-and-stroke", "double-stroke"],
+  },
+  seedOfLife: {
+    tier: 1,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.9,
+    affinities: ["circle", "flowerOfLife", "eggOfLife", "hexagon"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "watercolor", "fill-only"],
+  },
+  vesicaPiscis: {
+    tier: 2,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.7,
+    affinities: ["circle", "seedOfLife", "flowerOfLife"],
+    category: "sacred",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "watercolor"],
+  },
+  torus: {
+    tier: 3,
+    minSizeFraction: 0.2,
+    maxSizeFraction: 0.6,
+    affinities: ["circle", "spirograph", "waveRing"],
+    category: "sacred",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "dashed"],
+  },
+  eggOfLife: {
+    tier: 2,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.8,
+    affinities: ["circle", "seedOfLife", "flowerOfLife"],
+    category: "sacred",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "watercolor"],
+  },
+
+  // ── Procedural shapes ─────────────────────────────────────────
+  blob: {
+    tier: 1,
+    minSizeFraction: 0.05,
+    maxSizeFraction: 1.0,
+    affinities: ["blob", "circle", "superellipse", "waveRing"],
+    category: "procedural",
+    heroCandidate: false,
+    bestStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+  },
+  ngon: {
+    tier: 2,
+    minSizeFraction: 0.06,
+    maxSizeFraction: 0.8,
+    affinities: ["hexagon", "triangle", "diamond", "superellipse"],
+    category: "procedural",
+    heroCandidate: false,
+    bestStyles: ["fill-and-stroke", "fill-only", "hatched"],
+  },
+  lissajous: {
+    tier: 2,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.8,
+    affinities: ["spirograph", "rose", "celticKnot", "fibonacciSpiral"],
+    category: "procedural",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "incomplete", "dashed"],
+  },
+  superellipse: {
+    tier: 1,
+    minSizeFraction: 0.05,
+    maxSizeFraction: 1.0,
+    affinities: ["circle", "square", "blob", "hexagon"],
+    category: "procedural",
+    heroCandidate: false,
+    bestStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+  },
+  spirograph: {
+    tier: 1,
+    minSizeFraction: 0.15,
+    maxSizeFraction: 0.9,
+    affinities: ["rose", "lissajous", "mandala", "flowerOfLife"],
+    category: "procedural",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "incomplete", "dashed"],
+  },
+  waveRing: {
+    tier: 2,
+    minSizeFraction: 0.1,
+    maxSizeFraction: 0.8,
+    affinities: ["circle", "blob", "torus", "spirograph"],
+    category: "procedural",
+    heroCandidate: false,
+    bestStyles: ["stroke-only", "dashed", "incomplete"],
+  },
+  rose: {
+    tier: 1,
+    minSizeFraction: 0.1,
+    maxSizeFraction: 0.9,
+    affinities: ["spirograph", "mandala", "flowerOfLife", "circle"],
+    category: "procedural",
+    heroCandidate: true,
+    bestStyles: ["stroke-only", "fill-only", "watercolor"],
+  },
+};
+
+// ── Shape palette: curated sets of shapes that work well together ────
+
+export interface ShapePalette {
+  /** Primary shapes — used most often */
+  primary: string[];
+  /** Supporting shapes — used less frequently */
+  supporting: string[];
+  /** Accent shapes — rare, for visual punctuation */
+  accents: string[];
+}
+
+/**
+ * Build a curated shape palette from a seed shape.
+ * Uses affinity data to select shapes that compose well together,
+ * filtering out low-tier shapes that don't work at the current scale.
+ */
+export function buildShapePalette(
+  rng: () => number,
+  shapeNames: string[],
+  archetypeName: string,
+): ShapePalette {
+  const available = shapeNames.filter((s) => SHAPE_PROFILES[s]);
+
+  // Pick a seed shape — tier 1 shapes that are hero candidates
+  const heroPool = available.filter(
+    (s) => SHAPE_PROFILES[s].tier === 1 && SHAPE_PROFILES[s].heroCandidate,
+  );
+  const seedShape = heroPool.length > 0
+    ? heroPool[Math.floor(rng() * heroPool.length)]
+    : available[Math.floor(rng() * available.length)];
+
+  const seedProfile = SHAPE_PROFILES[seedShape];
+
+  // Primary: seed shape + its direct affinities (tier 1-2 only)
+  const primaryCandidates = [seedShape, ...seedProfile.affinities]
+    .filter((s) => available.includes(s))
+    .filter((s) => SHAPE_PROFILES[s].tier <= 2);
+  const primary = [...new Set(primaryCandidates)].slice(0, 5);
+
+  // Supporting: affinities of affinities, plus same-category shapes
+  const supportingSet = new Set<string>();
+  for (const p of primary) {
+    const profile = SHAPE_PROFILES[p];
+    if (!profile) continue;
+    for (const aff of profile.affinities) {
+      if (available.includes(aff) && !primary.includes(aff)) {
+        supportingSet.add(aff);
+      }
+    }
+  }
+  // Add same-category tier 1-2 shapes
+  for (const s of available) {
+    const p = SHAPE_PROFILES[s];
+    if (p.category === seedProfile.category && p.tier <= 2 && !primary.includes(s)) {
+      supportingSet.add(s);
+    }
+  }
+  const supporting = [...supportingSet].slice(0, 6);
+
+  // Accents: tier 1 shapes from other categories for contrast
+  const usedCategories = new Set(
+    [...primary, ...supporting].map((s) => SHAPE_PROFILES[s]?.category),
+  );
+  const accentCandidates = available.filter(
+    (s) =>
+      !primary.includes(s) &&
+      !supporting.includes(s) &&
+      SHAPE_PROFILES[s].tier <= 2 &&
+      !usedCategories.has(SHAPE_PROFILES[s].category),
+  );
+  // Shuffle and take a few
+  const accents: string[] = [];
+  const shuffled = [...accentCandidates];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  accents.push(...shuffled.slice(0, 3));
+
+  // For certain archetypes, bias the palette
+  if (archetypeName === "geometric-precision") {
+    // Remove blobs and organic shapes from primary
+    return {
+      primary: primary.filter((s) => SHAPE_PROFILES[s]?.category !== "procedural" || s === "ngon"),
+      supporting: supporting.filter((s) => s !== "blob"),
+      accents,
+    };
+  }
+  if (archetypeName === "organic-flow") {
+    // Boost procedural/organic shapes
+    const organicBoost = available.filter(
+      (s) => ["blob", "superellipse", "waveRing", "rose"].includes(s) && !primary.includes(s),
+    );
+    return {
+      primary: [...primary, ...organicBoost.slice(0, 2)],
+      supporting,
+      accents,
+    };
+  }
+
+  return { primary, supporting, accents };
+}
+
+/**
+ * Pick a shape from the palette with weighted probability.
+ * Primary: ~60%, Supporting: ~30%, Accent: ~10%.
+ * Also respects size constraints from the shape profile.
+ */
+export function pickShapeFromPalette(
+  palette: ShapePalette,
+  rng: () => number,
+  sizeFraction: number,
+): string {
+  // Filter each tier by size constraints
+  const validPrimary = palette.primary.filter((s) => {
+    const p = SHAPE_PROFILES[s];
+    return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+  });
+  const validSupporting = palette.supporting.filter((s) => {
+    const p = SHAPE_PROFILES[s];
+    return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+  });
+  const validAccents = palette.accents.filter((s) => {
+    const p = SHAPE_PROFILES[s];
+    return p && sizeFraction >= p.minSizeFraction && sizeFraction <= p.maxSizeFraction;
+  });
+
+  const roll = rng();
+  if (roll < 0.60 && validPrimary.length > 0) {
+    return validPrimary[Math.floor(rng() * validPrimary.length)];
+  }
+  if (roll < 0.90 && validSupporting.length > 0) {
+    return validSupporting[Math.floor(rng() * validSupporting.length)];
+  }
+  if (validAccents.length > 0) {
+    return validAccents[Math.floor(rng() * validAccents.length)];
+  }
+  // Fallback: any valid primary or supporting
+  const fallback = [...validPrimary, ...validSupporting];
+  if (fallback.length > 0) return fallback[Math.floor(rng() * fallback.length)];
+  // Ultimate fallback
+  return palette.primary[0] || "circle";
+}
+
+/**
+ * Get the best render style for a shape, with some randomness.
+ * 70% chance of using one of the shape's best styles,
+ * 30% chance of using the layer's style.
+ */
+export function pickStyleForShape(
+  shapeName: string,
+  layerStyle: string,
+  rng: () => number,
+): string {
+  const profile = SHAPE_PROFILES[shapeName];
+  if (!profile || rng() > 0.7) return layerStyle;
+  return profile.bestStyles[Math.floor(rng() * profile.bestStyles.length)];
+}

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

@@ -1,6 +1,7 @@
 import { basicShapes } from "./basic";
 import { complexShapes } from "./complex";
 import { sacredShapes } from "./sacred";
+import { proceduralShapes } from "./procedural";
 
 type DrawFunction = (
   ctx: CanvasRenderingContext2D,
@@ -12,4 +13,5 @@ export const shapes: Record<string, DrawFunction> = {
   ...basicShapes,
   ...complexShapes,
   ...sacredShapes,
+  ...proceduralShapes,
 };

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

@@ -0,0 +1,209 @@
+/**
+ * Procedural shape generators — hash-derived shapes that are unique
+ * per generation. Unlike the fixed shape library, these produce geometry
+ * that doesn't repeat across hashes.
+ *
+ * All draw functions accept an RNG via the config parameter so the
+ * shapes are deterministic from the hash.
+ */
+
+type DrawFunction = (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  config?: any,
+) => void;
+
+// ── Blob: organic closed curve via cubic bezier ─────────────────────
+// Generates 5-9 control points around a circle with hash-derived
+// radius jitter, then connects them with smooth cubic beziers.
+
+export const drawBlob: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  const numPoints = 5 + Math.floor(rng() * 5); // 5-9 lobes
+  const points: Array<{ x: number; y: number }> = [];
+
+  for (let i = 0; i < numPoints; i++) {
+    const angle = (i / numPoints) * Math.PI * 2;
+    const jitter = 0.5 + rng() * 0.5; // radius varies 50-100%
+    points.push({
+      x: Math.cos(angle) * r * jitter,
+      y: Math.sin(angle) * r * jitter,
+    });
+  }
+
+  ctx.beginPath();
+  // Start at midpoint between last and first point
+  const last = points[points.length - 1];
+  const first = points[0];
+  ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
+
+  for (let i = 0; i < numPoints; i++) {
+    const curr = points[i];
+    const next = points[(i + 1) % numPoints];
+    const midX = (curr.x + next.x) / 2;
+    const midY = (curr.y + next.y) / 2;
+    ctx.quadraticCurveTo(curr.x, curr.y, midX, midY);
+  }
+  ctx.closePath();
+};
+
+// ── Ngon: irregular polygon with hash-controlled vertices ───────────
+// Vertex count 3-12, each vertex has independent radius jitter
+// producing irregular, organic polygons.
+
+export const drawNgon: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  const sides = 3 + Math.floor(rng() * 10); // 3-12 sides
+  const jitterAmount = 0.1 + rng() * 0.4; // 10-50% vertex displacement
+
+  ctx.beginPath();
+  for (let i = 0; i < sides; i++) {
+    const angle = (i / sides) * Math.PI * 2 - Math.PI / 2;
+    const radiusJitter = 1 - jitterAmount + rng() * jitterAmount * 2;
+    const x = Math.cos(angle) * r * radiusJitter;
+    const y = Math.sin(angle) * r * radiusJitter;
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+// ── Lissajous: parametric curves with hash-derived frequency ratios ─
+// Produces figure-8s, knots, and complex looping curves.
+
+export const drawLissajous: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  // Frequency ratios — small integers produce recognizable patterns
+  const freqA = 1 + Math.floor(rng() * 5); // 1-5
+  const freqB = 1 + Math.floor(rng() * 5); // 1-5
+  const phase = rng() * Math.PI; // phase offset
+  const steps = 120;
+
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const t = (i / steps) * Math.PI * 2;
+    const x = Math.sin(freqA * t + phase) * r;
+    const y = Math.sin(freqB * t) * r;
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+// ── Superellipse: |x|^n + |y|^n = 1 with hash-derived exponent ─────
+// n=2 is circle, n>2 is squircle, n<1 is astroid/star-like.
+
+export const drawSuperellipse: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  // Exponent range: 0.3 (spiky astroid) to 5 (rounded rectangle)
+  const n = 0.3 + rng() * 4.7;
+  const steps = 120;
+
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const t = (i / steps) * Math.PI * 2;
+    const cosT = Math.cos(t);
+    const sinT = Math.sin(t);
+    // Superellipse parametric form
+    const x = Math.sign(cosT) * Math.pow(Math.abs(cosT), 2 / n) * r;
+    const y = Math.sign(sinT) * Math.pow(Math.abs(sinT), 2 / n) * r;
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+// ── Spirograph: hypotrochoid curves ─────────────────────────────────
+// Inner/outer radius ratios from hash produce unique looping patterns.
+
+export const drawSpirograph: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const scale = size / 2;
+  // R = outer radius, r = inner radius, d = pen distance from inner center
+  const R = 1;
+  const r = 0.2 + rng() * 0.6; // 0.2-0.8
+  const d = 0.3 + rng() * 0.7; // 0.3-1.0
+  // Number of full rotations needed to close the curve
+  const gcd = (a: number, b: number): number => {
+    const ai = Math.round(a * 1000);
+    const bi = Math.round(b * 1000);
+    const g = (x: number, y: number): number => (y === 0 ? x : g(y, x % y));
+    return g(ai, bi) / 1000;
+  };
+  const period = r / gcd(R, r);
+  const maxT = Math.min(period, 10) * Math.PI * 2; // cap at 10 rotations
+  const steps = Math.min(600, Math.floor(maxT * 20));
+
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const t = (i / steps) * maxT;
+    const x = ((R - r) * Math.cos(t) + d * Math.cos(((R - r) / r) * t)) * scale / (1 + d);
+    const y = ((R - r) * Math.sin(t) - d * Math.sin(((R - r) / r) * t)) * scale / (1 + d);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+// ── Wave ring: concentric ring with sinusoidal displacement ─────────
+// Hash controls frequency, amplitude, and number of rings.
+
+export const drawWaveRing: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  const rings = 2 + Math.floor(rng() * 4); // 2-5 rings
+  const freq = 3 + Math.floor(rng() * 12); // 3-14 waves per ring
+  const amp = 0.05 + rng() * 0.15; // 5-20% of radius
+
+  ctx.beginPath();
+  for (let ring = 0; ring < rings; ring++) {
+    const baseR = r * (0.3 + (ring / rings) * 0.7);
+    const steps = 80;
+    for (let i = 0; i <= steps; i++) {
+      const t = (i / steps) * Math.PI * 2;
+      const wave = Math.sin(t * freq + ring * 1.5) * baseR * amp;
+      const x = Math.cos(t) * (baseR + wave);
+      const y = Math.sin(t) * (baseR + wave);
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+  }
+};
+
+// ── Rose curve: polar rose r = cos(k*theta) ────────────────────────
+// k determines petal count. Integer k = k petals (odd) or 2k petals (even).
+
+export const drawRose: DrawFunction = (ctx, size, config) => {
+  const rng: () => number = config?.rng ?? Math.random;
+  const r = size / 2;
+  const k = 2 + Math.floor(rng() * 6); // 2-7 petal parameter
+  const steps = 200;
+
+  ctx.beginPath();
+  for (let i = 0; i <= steps; i++) {
+    const theta = (i / steps) * Math.PI * 2 * (k % 2 === 0 ? 1 : 2);
+    const rr = Math.cos(k * theta) * r;
+    const x = rr * Math.cos(theta);
+    const y = rr * Math.sin(theta);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+
+// ── Shape registry ──────────────────────────────────────────────────
+
+export const proceduralShapes: Record<string, DrawFunction> = {
+  blob: drawBlob,
+  ngon: drawNgon,
+  lissajous: drawLissajous,
+  superellipse: drawSuperellipse,
+  spirograph: drawSpirograph,
+  waveRing: drawWaveRing,
+  rose: drawRose,
+};