git-hash-art 0.6.0 → 0.8.0

package/package.json

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

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,

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,
@@ -357,3 +435,78 @@ export function shiftTemperature(hex: string, target: "warm" | "cool", amount: n
   const [h, s, l] = hexToHsl(hex);
   return hslToHex(shiftHueToward(h, target, amount), s, l);
 }
+
+/**
+ * Compute relative luminance of a hex color (0 = black, 1 = white).
+ * Uses the sRGB luminance formula from WCAG.
+ */
+export function luminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Enforce minimum contrast between a foreground color and a background
+ * luminance. On light backgrounds, darkens/saturates the foreground.
+ * On dark backgrounds, lightens/saturates the foreground.
+ *
+ * `bgLuminance` is 0-1 (pre-computed from the background color).
+ * `minContrast` is the minimum luminance difference to enforce (default 0.15).
+ */
+export function enforceContrast(
+  fgHex: string,
+  bgLuminance: number,
+  minContrast = 0.15,
+): string {
+  const fgLum = luminance(fgHex);
+  const diff = Math.abs(fgLum - bgLuminance);
+
+  if (diff >= minContrast) return fgHex;
+
+  const [h, s, l] = hexToHsl(fgHex);
+
+  if (bgLuminance > 0.5) {
+    // Light background — darken and boost saturation
+    const targetL = Math.max(0.08, l - (minContrast - diff) * 1.5);
+    const targetS = Math.min(1, s + 0.2);
+    return hslToHex(h, targetS, targetL);
+  } else {
+    // Dark background — lighten and boost saturation
+    const targetL = Math.min(0.92, l + (minContrast - diff) * 1.5);
+    const targetS = Math.min(1, s + 0.15);
+    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

@@ -151,23 +151,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;
     }
 
@@ -304,7 +337,7 @@ export function enhanceShapeGeneration(
 
   const drawFunction = shapes[shape];
   if (drawFunction) {
-    drawFunction(ctx, size);
+    drawFunction(ctx, size, { rng });
     applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
   }