git-hash-art 0.9.0 → 0.10.0

package/package.json

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

package/src/lib/archetypes.ts

@@ -357,11 +357,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

@@ -510,3 +510,28 @@ 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),
+  };
+}

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 {
@@ -506,6 +508,34 @@ 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();
+      }
+      ctx.globalAlpha = savedAlphaHD;
+      break;
+    }
+
     case "fill-and-stroke":
     default:
       ctx.fill();

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,

package/src/lib/render.ts

@@ -31,7 +31,7 @@ import {
     enforceContrast,
     buildColorHierarchy,
     pickHierarchyColor, pickColorGrade,
-    type ColorHierarchy
+    evolveHierarchy, type ColorHierarchy
 } from "./canvas/colors";
 import {
     enhanceShapeGeneration,
@@ -409,6 +409,9 @@ export function renderHashArt(
   // ── 0e. Light direction — consistent shadow angle ──────────────
   const lightAngle = rng() * Math.PI * 2;
 
+  // ── 0f. Palette evolution — hue drift direction across layers ──
+  const paletteHueShift = (rng() - 0.5) * 40; // -20° to +20° total drift
+
   const scaleFactor = Math.min(width, height) / 1024;
   const adjustedMinSize = minShapeSize * scaleFactor;
   const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -598,6 +601,48 @@ export function renderHashArt(
     return [rx + (nearest.x - rx) * pull, ry + (nearest.y - ry) * pull];
   }
 
+  // ── 3b. Void zone decoration — intentional negative space ────
+  for (const zone of voidZones) {
+    // Subtle halo ring around void zones
+    ctx.globalAlpha = 0.04 + rng() * 0.04;
+    ctx.strokeStyle = hexWithAlpha(colorHierarchy.accent, 0.2);
+    ctx.lineWidth = 1.5 * scaleFactor;
+    ctx.beginPath();
+    ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // ~50% chance: scatter tiny dots inside the void
+    if (rng() < 0.5) {
+      const dotCount = 3 + Math.floor(rng() * 6);
+      ctx.globalAlpha = 0.06 + rng() * 0.04;
+      ctx.fillStyle = hexWithAlpha(colorHierarchy.secondary, 0.15);
+      for (let d = 0; d < dotCount; d++) {
+        const angle = rng() * Math.PI * 2;
+        const dist = rng() * zone.radius * 0.7;
+        const dotR = (1 + rng() * 3) * scaleFactor;
+        ctx.beginPath();
+        ctx.arc(
+          zone.x + Math.cos(angle) * dist,
+          zone.y + Math.sin(angle) * dist,
+          dotR, 0, Math.PI * 2,
+        );
+        ctx.fill();
+      }
+    }
+
+    // ~30% chance: thin concentric ring inside
+    if (rng() < 0.3) {
+      ctx.globalAlpha = 0.03 + rng() * 0.03;
+      ctx.strokeStyle = hexWithAlpha(colorHierarchy.dominant, 0.1);
+      ctx.lineWidth = 0.5 * scaleFactor;
+      const innerR = zone.radius * (0.4 + rng() * 0.3);
+      ctx.beginPath();
+      ctx.arc(zone.x, zone.y, innerR, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+  }
+  ctx.globalAlpha = 1;
+
   // ── 4. Flow field seed values ──────────────────────────────────
   const fieldAngleBase = rng() * Math.PI * 2;
   const fieldFreq = 0.5 + rng() * 2;
@@ -690,6 +735,20 @@ export function renderHashArt(
     const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
     const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
 
+    // Color palette evolution — hue-rotate the hierarchy per layer
+    const layerHierarchy = evolveHierarchy(colorHierarchy, layerRatio, paletteHueShift);
+
+    // Focal depth: shapes near focal points get more detail
+    const focalDetailBoost = (px: number, py: number): number => {
+      let minFocalDist = Infinity;
+      for (const fp of focalPoints) {
+        const d = Math.hypot(px - fp.x, py - fp.y);
+        if (d < minFocalDist) minFocalDist = d;
+      }
+      const maxDist = Math.hypot(width, height) * 0.5;
+      return Math.max(0, 1 - minFocalDist / maxDist); // 1.0 at focal, 0.0 at edges
+    };
+
     for (let i = 0; i < numShapes; i++) {
       // Position from composition mode, then focal bias
       const rawPos = getCompositionPosition(
@@ -741,9 +800,9 @@ export function renderHashArt(
         }
       }
 
-      // Positional color from hierarchy + jitter
-      let fillBase = getPositionalColor(x, y, width, height, colorHierarchy, rng);
-      const strokeBase = pickHierarchyColor(colorHierarchy, rng);
+      // Positional color from hierarchy + jitter (using evolved layer palette)
+      let fillBase = getPositionalColor(x, y, width, height, layerHierarchy, rng);
+      const strokeBase = pickHierarchyColor(layerHierarchy, rng);
 
       // Desaturate colors on later layers for depth
       if (atmosphericDesat > 0) {
@@ -853,6 +912,26 @@ export function renderHashArt(
         enhanceShapeGeneration(ctx, shape, finalX, finalY, shapeConfig);
       }
 
+      // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
+      if (rng() < 0.2 && size > adjustedMinSize * 2) {
+        const glazePasses = 2 + Math.floor(rng() * 2);
+        for (let g = 0; g < glazePasses; g++) {
+          const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
+          const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
+          ctx.globalAlpha = glazeAlpha;
+          enhanceShapeGeneration(ctx, shape, finalX, finalY, {
+            fillColor: hexWithAlpha(fillColor, 0.15 + g * 0.1),
+            strokeColor: "rgba(0,0,0,0)",
+            strokeWidth: 0,
+            size: size * glazeScale,
+            rotation,
+            proportionType: "GOLDEN_RATIO",
+            renderStyle: "fill-only",
+            rng,
+          });
+        }
+      }
+
       shapePositions.push({ x: finalX, y: finalY, size, shape });
 
       // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
@@ -884,7 +963,10 @@ export function renderHashArt(
       }
 
       // ── 5d. Recursive nesting ──────────────────────────────────
-      if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+      // Focal depth: shapes near focal points get more detail
+      const focalProximity = focalDetailBoost(finalX, finalY);
+      const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
+      if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
         const innerCount = 1 + Math.floor(rng() * 3);
         for (let n = 0; n < innerCount; n++) {
           // Pick inner shape from palette affinities
@@ -920,7 +1002,8 @@ export function renderHashArt(
       }
 
       // ── 5e. Shape constellations — pre-composed groups ─────────
-      if (size > adjustedMaxSize * 0.35 && rng() < 0.12) {
+      const constellationChance = 0.12 + focalProximity * 0.1; // 12-22% near focal
+      if (size > adjustedMaxSize * 0.35 && rng() < constellationChance) {
         const constellation = CONSTELLATIONS[Math.floor(rng() * CONSTELLATIONS.length)];
         const members = constellation.build(rng, size);
         const groupRotation = rng() * Math.PI * 2;
@@ -1047,7 +1130,41 @@ export function renderHashArt(
     }
   }
 
-  // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+  // ── 6b. Motion/energy lines — short directional bursts ─────────
+  const energyArchetypes = ["dense-chaotic", "cosmic", "neon-glow", "bold-graphic"];
+  const hasEnergyLines = energyArchetypes.some(a => archetype.name.includes(a)) || rng() < 0.25;
+  if (hasEnergyLines && shapePositions.length > 0) {
+    const energyCount = 5 + Math.floor(rng() * 10);
+    ctx.lineCap = "round";
+    for (let e = 0; e < energyCount; e++) {
+      // Pick a random shape to radiate from
+      const source = shapePositions[Math.floor(rng() * shapePositions.length)];
+      const burstCount = 2 + Math.floor(rng() * 4);
+      const baseAngle = flowAngle(source.x, source.y);
+
+      for (let b = 0; b < burstCount; b++) {
+        const angle = baseAngle + (rng() - 0.5) * 1.2;
+        const lineLen = (source.size * 0.3 + rng() * source.size * 0.5) * scaleFactor * 0.3;
+        const startDist = source.size * 0.5;
+        const sx = source.x + Math.cos(angle) * startDist;
+        const sy = source.y + Math.sin(angle) * startDist;
+        const ex = sx + Math.cos(angle) * lineLen;
+        const ey = sy + Math.sin(angle) * lineLen;
+
+        ctx.globalAlpha = 0.04 + rng() * 0.06;
+        ctx.strokeStyle = hexWithAlpha(
+          enforceContrast(pickHierarchyColor(colorHierarchy, rng), bgLum), 0.3,
+        );
+        ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
+        ctx.beginPath();
+        ctx.moveTo(sx, sy);
+        ctx.lineTo(ex, ey);
+        ctx.stroke();
+      }
+    }
+  }
+
+  // ── 6c. Apply symmetry mirroring ─────────────────────────────────
   if (symmetryMode !== "none") {
     const canvas = ctx.canvas;
     ctx.save();
@@ -1170,6 +1287,50 @@ export function renderHashArt(
     ctx.globalCompositeOperation = "source-over";
   }
 
+  // ── 11. Signature mark — unique geometric chop from hash prefix ──
+  {
+    const sigRng = createRng(seedFromHash(gitHash, 42));
+    const sigSize = Math.min(width, height) * 0.025;
+    // Bottom-right corner with padding
+    const sigX = width - sigSize * 2.5;
+    const sigY = height - sigSize * 2.5;
+    const sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
+    const sigColor = hexWithAlpha(colorHierarchy.accent, 0.15);
+
+    ctx.save();
+    ctx.globalAlpha = 0.12 + sigRng() * 0.08;
+    ctx.translate(sigX, sigY);
+    ctx.strokeStyle = sigColor;
+    ctx.fillStyle = hexWithAlpha(colorHierarchy.dominant, 0.06);
+    ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+
+    // Outer ring
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.fill();
+
+    // Inner geometric pattern — unique per hash
+    ctx.beginPath();
+    for (let s = 0; s < sigSegments; s++) {
+      const angle1 = sigRng() * Math.PI * 2;
+      const angle2 = sigRng() * Math.PI * 2;
+      const r1 = sigSize * (0.2 + sigRng() * 0.6);
+      const r2 = sigSize * (0.2 + sigRng() * 0.6);
+      ctx.moveTo(Math.cos(angle1) * r1, Math.sin(angle1) * r1);
+      ctx.lineTo(Math.cos(angle2) * r2, Math.sin(angle2) * r2);
+    }
+    ctx.stroke();
+
+    // Center dot
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize * 0.12, 0, Math.PI * 2);
+    ctx.fillStyle = sigColor;
+    ctx.fill();
+
+    ctx.restore();
+  }
+
   ctx.globalAlpha = 1;
 
 }