git-hash-art 0.9.0 → 0.10.1

package/package.json

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

package/src/lib/archetypes.ts

@@ -27,7 +27,10 @@ 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 ────────────────────────────────────────────
 
@@ -357,11 +360,55 @@ const ARCHETYPES: Archetype[] = [
   },
 ];
 
+/**
+ * Linearly interpolate between two archetype numeric parameters.
+ */
+function lerpNum(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+/**
+ * Blend two archetypes by interpolating their numeric parameters
+ * and merging their style arrays.
+ */
+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[];
+
+  return {
+    name: `${a.name}+${b.name}`,
+    gridSize: Math.round(lerpNum(a.gridSize, b.gridSize, t)),
+    layers: Math.round(lerpNum(a.layers, b.layers, t)),
+    baseOpacity: lerpNum(a.baseOpacity, b.baseOpacity, t),
+    opacityReduction: lerpNum(a.opacityReduction, b.opacityReduction, t),
+    minShapeSize: Math.round(lerpNum(a.minShapeSize, b.minShapeSize, t)),
+    maxShapeSize: Math.round(lerpNum(a.maxShapeSize, b.maxShapeSize, t)),
+    backgroundStyle: t < 0.5 ? a.backgroundStyle : b.backgroundStyle,
+    paletteMode: t < 0.5 ? a.paletteMode : b.paletteMode,
+    preferredStyles: mergedStyles,
+    flowLineMultiplier: lerpNum(a.flowLineMultiplier, b.flowLineMultiplier, t),
+    heroShape: t < 0.5 ? a.heroShape : b.heroShape,
+    glowMultiplier: lerpNum(a.glowMultiplier, b.glowMultiplier, t),
+    sizePower: lerpNum(a.sizePower, b.sizePower, t),
+    invertForeground: t < 0.5 ? a.invertForeground : b.invertForeground,
+  };
+}
+
 /**
  * Select an archetype deterministically from the hash.
- * The "classic" archetype preserves the original look for backward compat
- * but only gets ~10% of hashes.
+ * ~15% of hashes produce a blended archetype (interpolation of two).
  */
 export function selectArchetype(rng: () => number): Archetype {
-  return ARCHETYPES[Math.floor(rng() * ARCHETYPES.length)];
+  const primary = ARCHETYPES[Math.floor(rng() * ARCHETYPES.length)];
+
+  // ~15% chance of blending with a second archetype
+  if (rng() < 0.15) {
+    const secondary = ARCHETYPES[Math.floor(rng() * ARCHETYPES.length)];
+    if (secondary.name !== primary.name) {
+      const blendT = 0.25 + rng() * 0.25; // 25-50% blend toward secondary
+      return blendArchetypes(primary, secondary, blendT);
+    }
+  }
+
+  return primary;
 }

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":
@@ -510,3 +554,29 @@ export function pickColorGrade(rng: () => number): { hue: number; intensity: num
   const intensity = 0.15 + rng() * 0.25;
   return { hue: (hue + 360) % 360, intensity };
 }
+
+/**
+ * Rotate the hue of a hex color by a given number of degrees.
+ */
+export function hueRotate(hex: string, degrees: number): string {
+  const [h, s, l] = hexToHsl(hex);
+  return hslToHex((h + degrees + 360) % 360, s, l);
+}
+
+/**
+ * Evolve a color hierarchy for a given layer — shifts hue progressively.
+ * Creates atmospheric color perspective (like distant mountains shifting blue).
+ */
+export function evolveHierarchy(
+  base: ColorHierarchy,
+  layerRatio: number,
+  hueShiftPerLayer: number,
+): ColorHierarchy {
+  const shift = layerRatio * hueShiftPerLayer;
+  return {
+    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

@@ -41,7 +41,8 @@ export type RenderStyle =
   | "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
+  | "fabric-weave"     // interlocking horizontal/vertical threads
+  | "hand-drawn";      // wobbly hand-drawn edge treatment
 
 const RENDER_STYLES: RenderStyle[] = [
   "fill-and-stroke",
@@ -59,6 +60,7 @@ const RENDER_STYLES: RenderStyle[] = [
   "wood-grain",
   "marble-vein",
   "fabric-weave",
+  "hand-drawn",
 ];
 
 export function pickRenderStyle(rng: () => number): RenderStyle {
@@ -89,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(
@@ -207,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;
@@ -506,6 +534,57 @@ function applyRenderStyle(
       break;
     }
 
+    case "hand-drawn": {
+      // Wobbly hand-drawn edge treatment — fill normally, then redraw
+      // the outline with perturbed control points for a sketchy feel
+      const savedAlphaHD = ctx.globalAlpha;
+      ctx.globalAlpha = savedAlphaHD * 0.85;
+      ctx.fill();
+      ctx.globalAlpha = savedAlphaHD;
+
+      // Draw 2-3 slightly offset wobbly strokes for a sketchy look
+      const wobblePasses = 2 + (rng ? Math.floor(rng() * 2) : 0);
+      ctx.lineWidth = strokeWidth * 0.8;
+      for (let wp = 0; wp < wobblePasses; wp++) {
+        ctx.globalAlpha = savedAlphaHD * (0.4 - wp * 0.1);
+        ctx.save();
+        // Slight random offset per pass
+        const wobbleX = rng ? (rng() - 0.5) * size * 0.02 : 0;
+        const wobbleY = rng ? (rng() - 0.5) * size * 0.02 : 0;
+        ctx.translate(wobbleX, wobbleY);
+        // Slightly different scale per pass for edge variation
+        const wobbleScale = 1 + (rng ? (rng() - 0.5) * 0.03 : 0);
+        ctx.scale(wobbleScale, wobbleScale);
+        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;
+    }
+
     case "fill-and-stroke":
     default:
       ctx.fill();
@@ -540,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;
@@ -573,9 +662,29 @@ 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 — bright 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);
+    hlGrad.addColorStop(0, "rgba(255,255,255,0.18)");
+    hlGrad.addColorStop(0.5, "rgba(255,255,255,0.05)");
+    hlGrad.addColorStop(1, "rgba(255,255,255,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

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

@@ -39,7 +39,7 @@ export const SHAPE_PROFILES: Record<string, ShapeProfile> = {
     affinities: ["circle", "blob", "hexagon", "flowerOfLife", "seedOfLife"],
     category: "basic",
     heroCandidate: false,
-    bestStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+    bestStyles: ["fill-only", "watercolor", "fill-and-stroke", "hand-drawn"],
   },
   square: {
     tier: 2,
@@ -57,7 +57,7 @@ export const SHAPE_PROFILES: Record<string, ShapeProfile> = {
     affinities: ["triangle", "diamond", "hexagon", "merkaba", "sriYantra"],
     category: "basic",
     heroCandidate: false,
-    bestStyles: ["fill-and-stroke", "fill-only", "watercolor"],
+    bestStyles: ["fill-and-stroke", "fill-only", "watercolor", "hand-drawn"],
   },
   hexagon: {
     tier: 1,
@@ -261,7 +261,7 @@ export const SHAPE_PROFILES: Record<string, ShapeProfile> = {
     affinities: ["blob", "circle", "superellipse", "waveRing"],
     category: "procedural",
     heroCandidate: false,
-    bestStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+    bestStyles: ["fill-only", "watercolor", "fill-and-stroke", "hand-drawn"],
   },
   ngon: {
     tier: 2,