git-hash-art 0.10.0 → 0.11.0

package/package.json

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

package/src/lib/archetypes.ts

@@ -27,10 +27,21 @@ export type PaletteMode =
   | "neon"          // high saturation on dark
   | "pastel-light"  // soft pastels on light background
   | "earth"         // muted warm naturals
-  | "high-contrast"; // black + white + one accent
+  | "high-contrast" // black + white + one accent
+  | "split-complementary" // base hue + two flanking complements
+  | "analogous-accent"    // tight analogous cluster + one distant accent
+  | "limited-palette";    // 3 colors only, risograph-print feel
 
 // ── Archetype definition ────────────────────────────────────────────
 
+export type CompositionMode =
+  | "radial"
+  | "flow-field"
+  | "spiral"
+  | "grid-subdivision"
+  | "clustered"
+  | "golden-spiral";
+
 export interface Archetype {
   name: string;
   /** Override gridSize (controls shape count) */
@@ -51,6 +62,8 @@ export interface Archetype {
   paletteMode: PaletteMode;
   /** Preferred render styles (weighted toward these) */
   preferredStyles: RenderStyle[];
+  /** Preferred composition modes (70% chance of using one of these) */
+  preferredCompositions: CompositionMode[];
   /** Flow line count multiplier (1 = default) */
   flowLineMultiplier: number;
   /** Whether to draw the hero shape */
@@ -77,6 +90,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "harmonious",
     preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    preferredCompositions: ["clustered", "flow-field", "radial"],
     flowLineMultiplier: 2.5,
     heroShape: false,
     glowMultiplier: 0.5,
@@ -94,6 +108,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "stroke-only", "incomplete"],
+    preferredCompositions: ["golden-spiral", "grid-subdivision"],
     flowLineMultiplier: 0.3,
     heroShape: true,
     glowMultiplier: 0,
@@ -111,6 +126,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "earth",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["flow-field", "golden-spiral", "spiral"],
     flowLineMultiplier: 4,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -128,6 +144,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "high-contrast",
     preferredStyles: ["stroke-only", "dashed", "double-stroke", "hatched"],
+    preferredCompositions: ["grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -145,6 +162,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "pastel-light",
     preferredStyles: ["watercolor", "incomplete", "fill-only"],
+    preferredCompositions: ["golden-spiral", "radial", "spiral"],
     flowLineMultiplier: 1.5,
     heroShape: true,
     glowMultiplier: 2,
@@ -162,6 +180,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "linear-diagonal",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "double-stroke"],
+    preferredCompositions: ["grid-subdivision", "golden-spiral"],
     flowLineMultiplier: 0,
     heroShape: true,
     glowMultiplier: 0,
@@ -179,6 +198,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "neon",
     preferredStyles: ["stroke-only", "double-stroke", "dashed"],
+    preferredCompositions: ["radial", "spiral", "clustered"],
     flowLineMultiplier: 2,
     heroShape: true,
     glowMultiplier: 3,
@@ -196,6 +216,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "monochrome",
     preferredStyles: ["hatched", "incomplete", "stroke-only", "dashed"],
+    preferredCompositions: ["flow-field", "grid-subdivision", "clustered"],
     flowLineMultiplier: 1.5,
     heroShape: false,
     glowMultiplier: 0,
@@ -213,6 +234,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "neon",
     preferredStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+    preferredCompositions: ["radial", "spiral", "golden-spiral"],
     flowLineMultiplier: 3,
     heroShape: true,
     glowMultiplier: 2.5,
@@ -230,6 +252,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "harmonious",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["golden-spiral", "flow-field", "radial"],
     flowLineMultiplier: 0.5,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -247,6 +270,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "high-contrast",
     preferredStyles: ["fill-and-stroke", "stroke-only", "dashed"],
+    preferredCompositions: ["grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -264,6 +288,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "duotone",
     preferredStyles: ["fill-and-stroke", "fill-only", "double-stroke"],
+    preferredCompositions: ["grid-subdivision", "clustered"],
     flowLineMultiplier: 0,
     heroShape: true,
     glowMultiplier: 0,
@@ -281,6 +306,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "harmonious",
     preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    preferredCompositions: ["radial", "golden-spiral", "flow-field"],
     flowLineMultiplier: 1,
     heroShape: true,
     glowMultiplier: 1,
@@ -298,6 +324,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-dark",
     paletteMode: "high-contrast",
     preferredStyles: ["fill-and-stroke", "stroke-only", "fill-only"],
+    preferredCompositions: ["clustered", "grid-subdivision", "radial"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0.3,
@@ -315,6 +342,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-light",
     paletteMode: "earth",
     preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    preferredCompositions: ["flow-field", "golden-spiral", "spiral"],
     flowLineMultiplier: 3,
     heroShape: true,
     glowMultiplier: 0.2,
@@ -332,6 +360,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "solid-light",
     paletteMode: "monochrome",
     preferredStyles: ["stipple", "fill-only", "hatched"],
+    preferredCompositions: ["radial", "clustered", "flow-field"],
     flowLineMultiplier: 0,
     heroShape: false,
     glowMultiplier: 0,
@@ -349,6 +378,7 @@ const ARCHETYPES: Archetype[] = [
     backgroundStyle: "radial-dark",
     paletteMode: "neon",
     preferredStyles: ["fill-only", "watercolor", "stroke-only", "incomplete"],
+    preferredCompositions: ["spiral", "radial", "golden-spiral"],
     flowLineMultiplier: 2,
     heroShape: true,
     glowMultiplier: 2.5,
@@ -371,6 +401,7 @@ function lerpNum(a: number, b: number, t: number): number {
 function blendArchetypes(a: Archetype, b: Archetype, t: number): Archetype {
   // Merge preferred styles — unique union, primary archetype first
   const mergedStyles = [...new Set([...a.preferredStyles, ...b.preferredStyles])] as RenderStyle[];
+  const mergedCompositions = [...new Set([...a.preferredCompositions, ...b.preferredCompositions])] as CompositionMode[];
 
   return {
     name: `${a.name}+${b.name}`,
@@ -383,6 +414,7 @@ function blendArchetypes(a: Archetype, b: Archetype, t: number): Archetype {
     backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
     paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
     preferredStyles: mergedStyles,
+    preferredCompositions: mergedCompositions,
     flowLineMultiplier: lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
     heroShape: t < 0.5 ? a.heroShape : b.heroShape,
     glowMultiplier: lerpNum(a.glowMultiplier, b.glowMultiplier, t),

package/src/lib/canvas/colors.ts

@@ -194,6 +194,45 @@ export class SacredColorScheme {
         const accent = hslToHex(baseHue, 0.9, 0.5);
         return ["#111111", "#eeeeee", accent, hslToHex(baseHue, 0.7, 0.35)];
       }
+      case "split-complementary": {
+        // Base hue + two colors flanking the complement (±30°)
+        const comp = (baseHue + 180) % 360;
+        const split1 = (comp - 30 + 360) % 360;
+        const split2 = (comp + 30) % 360;
+        const sat = 0.55 + this.rng() * 0.25;
+        return [
+          hslToHex(baseHue, sat, 0.5),
+          hslToHex(baseHue, sat * 0.8, 0.65),
+          hslToHex(split1, sat, 0.5),
+          hslToHex(split2, sat, 0.5),
+          hslToHex(split1, sat * 0.7, 0.7),
+        ];
+      }
+      case "analogous-accent": {
+        // Tight cluster of 3 analogous hues + 1 distant accent
+        const step = 15 + this.rng() * 20; // 15-35° apart
+        const h1 = (baseHue - step + 360) % 360;
+        const h2 = (baseHue + step) % 360;
+        const accentHue = (baseHue + 150 + this.rng() * 60) % 360;
+        const sat = 0.5 + this.rng() * 0.3;
+        return [
+          hslToHex(baseHue, sat, 0.5),
+          hslToHex(h1, sat, 0.55),
+          hslToHex(h2, sat, 0.45),
+          hslToHex(accentHue, sat + 0.15, 0.5),
+        ];
+      }
+      case "limited-palette": {
+        // Only 3 colors — like a risograph print
+        const h2 = (baseHue + 120 + this.rng() * 40) % 360;
+        const h3 = (baseHue + 220 + this.rng() * 40) % 360;
+        const sat = 0.6 + this.rng() * 0.2;
+        return [
+          hslToHex(baseHue, sat, 0.5),
+          hslToHex(h2, sat, 0.5),
+          hslToHex(h3, sat * 0.9, 0.55),
+        ];
+      }
       case "harmonious":
       default:
         return this.getColors();
@@ -210,6 +249,11 @@ export class SacredColorScheme {
       case "high-contrast":
       case "monochrome-ink":
         return ["#f5f5f0", "#e8e8e0"];
+      case "split-complementary":
+      case "analogous-accent":
+        return this.getBackgroundColors();
+      case "limited-palette":
+        return [hslToHex(this.seed % 360, 0.08, 0.94), hslToHex((this.seed + 20) % 360, 0.06, 0.90)];
       case "neon":
         return ["#0a0a12", "#050510"];
       case "earth":
@@ -344,14 +388,16 @@ export function buildColorHierarchy(colors: string[], rng: () => number): ColorH
       all: colors,
     };
   }
-  // Pick dominant as the color closest to the palette's average hue
+  // Pick dominant as the color with the highest chroma (saturation × distance from gray)
+  // This selects the most visually prominent color rather than the average
   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;
+  let maxChroma = -1;
   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; }
+    // Chroma approximation: saturation × how far lightness is from 50% (gray)
+    const lightnessVibrancy = 1 - Math.abs(hsls[i][2] - 0.5) * 2; // peaks at L=0.5
+    const chroma = hsls[i][1] * lightnessVibrancy;
+    if (chroma > maxChroma) { maxChroma = chroma; dominantIdx = i; }
   }
   // Accent is the color most distant from dominant in hue
   let accentIdx = 0;
@@ -533,5 +579,6 @@ export function evolveHierarchy(
     dominant: hueRotate(base.dominant, shift),
     secondary: hueRotate(base.secondary, shift * 0.7),
     accent: hueRotate(base.accent, shift * 0.5),
+    all: base.all.map(c => hueRotate(c, shift * 0.6)),
   };
 }

package/src/lib/canvas/draw.ts

@@ -91,6 +91,10 @@ interface EnhanceShapeConfig extends DrawShapeConfig {
   renderStyle?: RenderStyle;
   /** RNG for watercolor jitter (required for "watercolor" style). */
   rng?: () => number;
+  /** Light direction angle in radians — used for shadow & highlight. */
+  lightAngle?: number;
+  /** Scale factor for resolution-independent sizing. */
+  scaleFactor?: number;
 }
 
 export function drawShape(
@@ -209,6 +213,28 @@ function applyRenderStyle(
       ctx.fillStyle = origFill;
       ctx.restore();
 
+      // Pass 4: Organic edge erosion — irregular bites along the boundary
+      if (rng && size > 20) {
+        const erosionBites = 6 + Math.floor(rng() * 8);
+        const edgeRadius = size * 0.45;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.globalAlpha = 0.6 + rng() * 0.3;
+        for (let eb = 0; eb < erosionBites; eb++) {
+          const biteAngle = rng() * Math.PI * 2;
+          const biteDist = edgeRadius * (0.85 + rng() * 0.25);
+          const biteR = size * (0.02 + rng() * 0.04);
+          ctx.beginPath();
+          ctx.arc(
+            Math.cos(biteAngle) * biteDist,
+            Math.sin(biteAngle) * biteDist,
+            biteR, 0, Math.PI * 2,
+          );
+          ctx.fill();
+        }
+        ctx.restore();
+      }
+
       ctx.globalAlpha = savedAlpha;
       // Soft stroke on top — thinner than normal for delicacy
       ctx.globalAlpha *= 0.25;
@@ -532,6 +558,29 @@ function applyRenderStyle(
         ctx.stroke();
         ctx.restore();
       }
+
+      // Organic edge erosion — small irregular bites for rough paper feel
+      if (rng && size > 20) {
+        const erosionBites = 4 + Math.floor(rng() * 6);
+        const edgeRadius = size * 0.42;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.globalAlpha = 0.5 + rng() * 0.3;
+        for (let eb = 0; eb < erosionBites; eb++) {
+          const biteAngle = rng() * Math.PI * 2;
+          const biteDist = edgeRadius * (0.9 + rng() * 0.2);
+          const biteR = size * (0.015 + rng() * 0.03);
+          ctx.beginPath();
+          ctx.arc(
+            Math.cos(biteAngle) * biteDist,
+            Math.sin(biteAngle) * biteDist,
+            biteR, 0, Math.PI * 2,
+          );
+          ctx.fill();
+        }
+        ctx.restore();
+      }
+
       ctx.globalAlpha = savedAlphaHD;
       break;
     }
@@ -570,14 +619,24 @@ export function enhanceShapeGeneration(
     gradientFillEnd,
     renderStyle = "fill-and-stroke",
     rng,
+    lightAngle,
+    scaleFactor = 1,
   } = config;
 
   ctx.save();
   ctx.translate(x, y);
   ctx.rotate((rotation * Math.PI) / 180);
 
-  // Glow / shadow effect
-  if (glowRadius > 0) {
+  // ── Drop shadow — soft colored shadow offset along light direction ──
+  if (lightAngle !== undefined && size > 10) {
+    const shadowDist = size * 0.035;
+    const shadowBlurR = size * 0.06;
+    ctx.shadowOffsetX = Math.cos(lightAngle + Math.PI) * shadowDist;
+    ctx.shadowOffsetY = Math.sin(lightAngle + Math.PI) * shadowDist;
+    ctx.shadowBlur = shadowBlurR;
+    ctx.shadowColor = "rgba(0,0,0,0.12)";
+  } else if (glowRadius > 0) {
+    // Glow / shadow effect (legacy path)
     ctx.shadowBlur = glowRadius;
     ctx.shadowColor = glowColor || fillColor;
     ctx.shadowOffsetX = 0;
@@ -603,9 +662,39 @@ export function enhanceShapeGeneration(
     applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
   }
 
-  // Reset shadow so patterns aren't double-glowed
-  if (glowRadius > 0) {
-    ctx.shadowBlur = 0;
+  // Reset shadow so patterns and highlight aren't double-shadowed
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+  ctx.shadowColor = "transparent";
+
+  // ── Specular highlight — tinted arc on the light-facing side ──
+  if (lightAngle !== undefined && size > 15 && rng) {
+    const hlRadius = size * 0.35;
+    const hlDist = size * 0.15;
+    const hlX = Math.cos(lightAngle) * hlDist;
+    const hlY = Math.sin(lightAngle) * hlDist;
+    const hlGrad = ctx.createRadialGradient(hlX, hlY, 0, hlX, hlY, hlRadius);
+    // Tint highlight warm/cool based on fill color for cohesion
+    // Parse fill to detect warmth — fallback to white for non-parseable
+    let hlBase = "255,255,255";
+    if (typeof fillColor === "string" && fillColor.startsWith("#") && fillColor.length >= 7) {
+      const r = parseInt(fillColor.slice(1, 3), 16);
+      const g = parseInt(fillColor.slice(3, 5), 16);
+      const b = parseInt(fillColor.slice(5, 7), 16);
+      // Blend toward white but keep a hint of the fill's warmth
+      hlBase = `${Math.round(r * 0.15 + 255 * 0.85)},${Math.round(g * 0.15 + 255 * 0.85)},${Math.round(b * 0.15 + 255 * 0.85)}`;
+    }
+    hlGrad.addColorStop(0, `rgba(${hlBase},0.18)`);
+    hlGrad.addColorStop(0.5, `rgba(${hlBase},0.05)`);
+    hlGrad.addColorStop(1, `rgba(${hlBase},0)`);
+    const savedOp = ctx.globalCompositeOperation;
+    ctx.globalCompositeOperation = "soft-light";
+    ctx.fillStyle = hlGrad;
+    ctx.beginPath();
+    ctx.arc(hlX, hlY, hlRadius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.globalCompositeOperation = savedOp;
   }
 
   // Layer additional patterns if specified