git-hash-art 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-hash-art",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "author": "gfargo <ghfargo@gmail.com>",
   "scripts": {
     "watch": "parcel watch",
@@ -14,6 +14,9 @@
     "test:publish": "npm publish --dry-run",
     "prepublishOnly": "yarn build"
   },
+  "bin": {
+    "git-hash-art": "bin/cli.js"
+  },
   "source": "src/index.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",

package/src/lib/archetypes.ts

@@ -0,0 +1,248 @@
+/**
+ * Visual archetypes — fundamentally different rendering personalities
+ * selected deterministically from the hash.
+ *
+ * Each archetype overrides key rendering parameters to produce images
+ * that look like they came from different generators entirely.
+ */
+import type { RenderStyle } from "./canvas/draw";
+
+// ── Background types ────────────────────────────────────────────────
+
+export type BackgroundStyle =
+  | "radial-dark"       // current default: dark radial gradient
+  | "radial-light"      // light center, medium edges
+  | "linear-horizontal" // left-to-right gradient
+  | "linear-diagonal"   // corner-to-corner gradient
+  | "solid-dark"        // flat dark color
+  | "solid-light"       // flat light/white color
+  | "multi-stop";       // 3-4 color gradient
+
+// ── Palette modes ───────────────────────────────────────────────────
+
+export type PaletteMode =
+  | "harmonious"    // current default: full palette
+  | "monochrome"    // single hue, varying lightness
+  | "duotone"       // two colors only
+  | "neon"          // high saturation on dark
+  | "pastel-light"  // soft pastels on light background
+  | "earth"         // muted warm naturals
+  | "high-contrast"; // black + white + one accent
+
+// ── Archetype definition ────────────────────────────────────────────
+
+export interface Archetype {
+  name: string;
+  /** Override gridSize (controls shape count) */
+  gridSize: number;
+  /** Override layer count */
+  layers: number;
+  /** Override base opacity */
+  baseOpacity: number;
+  /** Override opacity reduction per layer */
+  opacityReduction: number;
+  /** Override min shape size */
+  minShapeSize: number;
+  /** Override max shape size */
+  maxShapeSize: number;
+  /** Background rendering style */
+  backgroundStyle: BackgroundStyle;
+  /** Color palette mode */
+  paletteMode: PaletteMode;
+  /** Preferred render styles (weighted toward these) */
+  preferredStyles: RenderStyle[];
+  /** Flow line count multiplier (1 = default) */
+  flowLineMultiplier: number;
+  /** Whether to draw the hero shape */
+  heroShape: boolean;
+  /** Glow probability multiplier */
+  glowMultiplier: number;
+  /** Shape size power curve exponent (higher = more small shapes) */
+  sizePower: number;
+  /** Whether to invert colors (light shapes on dark, or dark on light) */
+  invertForeground: boolean;
+}
+
+// ── Archetype definitions ───────────────────────────────────────────
+
+const ARCHETYPES: Archetype[] = [
+  {
+    name: "dense-chaotic",
+    gridSize: 9,
+    layers: 5,
+    baseOpacity: 0.5,
+    opacityReduction: 0.06,
+    minShapeSize: 10,
+    maxShapeSize: 200,
+    backgroundStyle: "radial-dark",
+    paletteMode: "harmonious",
+    preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    flowLineMultiplier: 2.5,
+    heroShape: false,
+    glowMultiplier: 0.5,
+    sizePower: 1.2,
+    invertForeground: false,
+  },
+  {
+    name: "minimal-spacious",
+    gridSize: 2,
+    layers: 2,
+    baseOpacity: 0.85,
+    opacityReduction: 0.05,
+    minShapeSize: 150,
+    maxShapeSize: 600,
+    backgroundStyle: "solid-light",
+    paletteMode: "duotone",
+    preferredStyles: ["fill-and-stroke", "stroke-only", "incomplete"],
+    flowLineMultiplier: 0.3,
+    heroShape: true,
+    glowMultiplier: 0,
+    sizePower: 0.8,
+    invertForeground: false,
+  },
+  {
+    name: "organic-flow",
+    gridSize: 4,
+    layers: 3,
+    baseOpacity: 0.4,
+    opacityReduction: 0.08,
+    minShapeSize: 20,
+    maxShapeSize: 250,
+    backgroundStyle: "radial-dark",
+    paletteMode: "earth",
+    preferredStyles: ["watercolor", "fill-only", "incomplete"],
+    flowLineMultiplier: 4,
+    heroShape: false,
+    glowMultiplier: 0.3,
+    sizePower: 1.5,
+    invertForeground: false,
+  },
+  {
+    name: "geometric-precision",
+    gridSize: 6,
+    layers: 3,
+    baseOpacity: 0.9,
+    opacityReduction: 0.15,
+    minShapeSize: 40,
+    maxShapeSize: 300,
+    backgroundStyle: "solid-dark",
+    paletteMode: "high-contrast",
+    preferredStyles: ["stroke-only", "dashed", "double-stroke", "hatched"],
+    flowLineMultiplier: 0,
+    heroShape: false,
+    glowMultiplier: 0,
+    sizePower: 1.0,
+    invertForeground: false,
+  },
+  {
+    name: "ethereal",
+    gridSize: 7,
+    layers: 5,
+    baseOpacity: 0.3,
+    opacityReduction: 0.03,
+    minShapeSize: 50,
+    maxShapeSize: 500,
+    backgroundStyle: "radial-light",
+    paletteMode: "pastel-light",
+    preferredStyles: ["watercolor", "incomplete", "fill-only"],
+    flowLineMultiplier: 1.5,
+    heroShape: true,
+    glowMultiplier: 2,
+    sizePower: 1.4,
+    invertForeground: false,
+  },
+  {
+    name: "bold-graphic",
+    gridSize: 2,
+    layers: 2,
+    baseOpacity: 0.95,
+    opacityReduction: 0.1,
+    minShapeSize: 200,
+    maxShapeSize: 800,
+    backgroundStyle: "linear-diagonal",
+    paletteMode: "duotone",
+    preferredStyles: ["fill-and-stroke", "double-stroke"],
+    flowLineMultiplier: 0,
+    heroShape: true,
+    glowMultiplier: 0,
+    sizePower: 0.5,
+    invertForeground: false,
+  },
+  {
+    name: "neon-glow",
+    gridSize: 5,
+    layers: 4,
+    baseOpacity: 0.6,
+    opacityReduction: 0.1,
+    minShapeSize: 20,
+    maxShapeSize: 350,
+    backgroundStyle: "solid-dark",
+    paletteMode: "neon",
+    preferredStyles: ["stroke-only", "double-stroke", "dashed"],
+    flowLineMultiplier: 2,
+    heroShape: true,
+    glowMultiplier: 3,
+    sizePower: 1.6,
+    invertForeground: false,
+  },
+  {
+    name: "monochrome-ink",
+    gridSize: 6,
+    layers: 3,
+    baseOpacity: 0.7,
+    opacityReduction: 0.15,
+    minShapeSize: 15,
+    maxShapeSize: 350,
+    backgroundStyle: "solid-light",
+    paletteMode: "monochrome",
+    preferredStyles: ["hatched", "incomplete", "stroke-only", "dashed"],
+    flowLineMultiplier: 1.5,
+    heroShape: false,
+    glowMultiplier: 0,
+    sizePower: 1.8,
+    invertForeground: false,
+  },
+  {
+    name: "cosmic",
+    gridSize: 8,
+    layers: 5,
+    baseOpacity: 0.5,
+    opacityReduction: 0.06,
+    minShapeSize: 5,
+    maxShapeSize: 300,
+    backgroundStyle: "radial-dark",
+    paletteMode: "neon",
+    preferredStyles: ["fill-only", "watercolor", "fill-and-stroke"],
+    flowLineMultiplier: 3,
+    heroShape: true,
+    glowMultiplier: 2.5,
+    sizePower: 2.5,
+    invertForeground: false,
+  },
+  {
+    name: "classic",
+    gridSize: 5,
+    layers: 4,
+    baseOpacity: 0.7,
+    opacityReduction: 0.12,
+    minShapeSize: 30,
+    maxShapeSize: 400,
+    backgroundStyle: "radial-dark",
+    paletteMode: "harmonious",
+    preferredStyles: ["fill-and-stroke", "watercolor", "fill-only"],
+    flowLineMultiplier: 1,
+    heroShape: true,
+    glowMultiplier: 1,
+    sizePower: 1.8,
+    invertForeground: false,
+  },
+];
+
+/**
+ * Select an archetype deterministically from the hash.
+ * The "classic" archetype preserves the original look for backward compat
+ * but only gets ~10% of hashes.
+ */
+export function selectArchetype(rng: () => number): Archetype {
+  return ARCHETYPES[Math.floor(rng() * ARCHETYPES.length)];
+}

package/src/lib/canvas/colors.ts

@@ -148,6 +148,77 @@ export class SacredColorScheme {
     return [...new Set(all)];
   }
 
+  /**
+   * Returns a palette shaped by the given palette mode.
+   * Falls back to getColors() for "harmonious".
+   */
+  getColorsByMode(mode: string): string[] {
+    const baseHue = this.seed % 360;
+    switch (mode) {
+      case "monochrome": {
+        // Single hue, 5 lightness steps
+        const s = 0.5 + this.rng() * 0.3;
+        return [0.15, 0.3, 0.45, 0.6, 0.75].map((l) =>
+          hslToHex(baseHue, s, l),
+        );
+      }
+      case "duotone": {
+        // Two contrasting colors + tints
+        const hue2 = (baseHue + 150 + this.rng() * 60) % 360;
+        return [
+          hslToHex(baseHue, 0.7, 0.5),
+          hslToHex(baseHue, 0.6, 0.7),
+          hslToHex(hue2, 0.7, 0.5),
+          hslToHex(hue2, 0.6, 0.7),
+        ];
+      }
+      case "neon": {
+        // High saturation, vivid colors
+        const hues = [baseHue, (baseHue + 90) % 360, (baseHue + 180) % 360, (baseHue + 270) % 360];
+        return hues.map((h) => hslToHex(h, 1.0, 0.55 + this.rng() * 0.1));
+      }
+      case "pastel-light": {
+        // Soft pastels
+        const hues = [baseHue, (baseHue + 60) % 360, (baseHue + 120) % 360, (baseHue + 200) % 360];
+        return hues.map((h) => hslToHex(h, 0.4 + this.rng() * 0.2, 0.75 + this.rng() * 0.1));
+      }
+      case "earth": {
+        // Warm muted naturals: browns, olives, terracotta, sage
+        const earthHues = [25, 35, 45, 80, 150]; // orange-brown to olive to sage
+        return earthHues.map((h) =>
+          hslToHex(h + this.rng() * 15, 0.25 + this.rng() * 0.2, 0.35 + this.rng() * 0.2),
+        );
+      }
+      case "high-contrast": {
+        // Black, white, and one accent color
+        const accent = hslToHex(baseHue, 0.9, 0.5);
+        return ["#111111", "#eeeeee", accent, hslToHex(baseHue, 0.7, 0.35)];
+      }
+      case "harmonious":
+      default:
+        return this.getColors();
+    }
+  }
+
+  /**
+   * Returns background colors appropriate for the given palette mode.
+   */
+  getBackgroundColorsByMode(mode: string): [string, string] {
+    switch (mode) {
+      case "pastel-light":
+        return [hslToHex(this.seed % 360, 0.15, 0.92), hslToHex((this.seed + 30) % 360, 0.1, 0.88)];
+      case "high-contrast":
+      case "monochrome-ink":
+        return ["#f5f5f0", "#e8e8e0"];
+      case "neon":
+        return ["#0a0a12", "#050510"];
+      case "earth":
+        return [this.darken(hslToHex(35, 0.3, 0.25), 0.8), this.darken(hslToHex(25, 0.25, 0.2), 0.7)];
+      default:
+        return this.getBackgroundColors();
+    }
+  }
+
   /**
    * Returns two background colors derived from the hash — darker variants
    * of the base scheme, temperature-shifted for warm/cool contrast.
@@ -286,3 +357,48 @@ 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);
+  }
+}

package/src/lib/canvas/draw.ts

@@ -304,7 +304,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);
   }
 

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,
+};