git-hash-art 0.6.0 → 0.7.0

package/ALGORITHM.md

@@ -11,12 +11,13 @@ Hash String
   │
   ├─► Archetype Selection (1 of 10 visual personalities)
   │
-  ├─► Color Scheme (palette mode from archetype + temperature mode)
+  ├─► Color Scheme (palette mode from archetype + temperature mode + contrast enforcement)
   │
   └─► Rendering Pipeline (parameters overridden by archetype)
        │
        0.  Archetype Override (gridSize, layers, opacity, sizes, styles)
        1.  Background Layer (7 styles: radial, linear, solid, multi-stop)
+       1a. Background Luminance → contrast enforcement threshold
        1b. Layered Background (faint shapes + concentric rings)
        2.  Composition Mode Selection
        2b. Symmetry Mode Selection (none / bilateral / quad)
@@ -27,7 +28,8 @@ Hash String
        │   ├─ Blend Mode (per-layer compositing)
        │   ├─ Render Style (archetype-preferred + random mix)
        │   ├─ Position (composition mode + focal bias + density check)
-       │   ├─ Shape Selection (layer-weighted)
+       │   ├─ Shape Selection (4 categories: basic, complex, sacred, procedural)
+       │   ├─ Contrast Enforcement (ensure readability vs background)
        │   ├─ Atmospheric Depth (desaturation on later layers)
        │   ├─ Temperature Contrast (foreground opposite to background)
        │   ├─ Styling (transparency, glow, gradients, color jitter)
@@ -267,13 +269,25 @@ Later layers progressively desaturate their colors (0% on layer 0, up to 30% on
 
 ### Shape Selection (Layer-Weighted)
 
-Shapes are divided into three categories with weights that shift across layers:
+Shapes are divided into four categories with weights that shift across layers:
 
 | Category | Shapes | Early layers | Late layers |
 |----------|--------|-------------|-------------|
 | **Basic** | circle, square, triangle, hexagon, diamond, cube | High weight | Low weight |
 | **Complex** | star, platonic solid, fibonacci spiral, islamic pattern, celtic knot, merkaba, fractal | Medium | Medium-high |
 | **Sacred** | mandala, flower of life, tree of life, Metatron's cube, Sri Yantra, seed of life, vesica piscis, torus, egg of life | Low | High |
+| **Procedural** | blob, ngon, lissajous, superellipse, spirograph, waveRing, rose | Medium (always present) | Medium-high |
+
+Procedural shapes are hash-derived — their geometry is generated from the RNG, so every hash produces unique shapes that don't exist in any other generation. See the Procedural Shapes section below for details.
+
+### Contrast Enforcement
+
+After color selection, every foreground color (fills, strokes, flow lines, connecting curves) is checked against the average background luminance. If the luminance difference is below the minimum threshold (0.15), the color is adjusted:
+
+- **Light backgrounds** — foreground colors are darkened and saturated
+- **Dark backgrounds** — foreground colors are lightened and saturated
+
+This prevents the white-on-white and dark-on-dark readability problems that occur when light palette modes (pastel-light, high-contrast) combine with light background styles (solid-light, radial-light).
 
 ### Size Distribution
 
@@ -366,6 +380,19 @@ Mathematically precise sacred geometry patterns:
 - **Torus** — 2D projection of a torus via line segments
 - **Egg of Life** — 7 circles in tight hexagonal packing
 
+### Procedural Shapes
+Hash-derived shapes whose geometry is generated from the RNG. Every hash produces unique shapes that don't exist in any other generation:
+
+| Shape | Algorithm | Hash Controls |
+|-------|-----------|---------------|
+| **Blob** | Smooth closed curve via quadratic bezier through 5-9 control points arranged around a circle | Number of lobes (5-9), radius jitter per lobe (50-100%) |
+| **Ngon** | Irregular polygon with independent vertex displacement | Side count (3-12), vertex jitter amount (10-50%) |
+| **Lissajous** | Parametric curve `x = sin(a*t + φ), y = sin(b*t)` | Frequency ratios a,b (1-5 each), phase offset φ |
+| **Superellipse** | `|x|^n + |y|^n = 1` rendered parametrically | Exponent n: 0.3 (spiky astroid) → 2 (circle) → 5 (rounded rectangle) |
+| **Spirograph** | Hypotrochoid curve `(R-r)cos(t) + d*cos((R-r)t/r)` | Inner radius ratio r (0.2-0.8), pen distance d (0.3-1.0) |
+| **Wave Ring** | Concentric rings with sinusoidal radial displacement | Ring count (2-5), wave frequency (3-14), amplitude (5-20%) |
+| **Rose** | Polar rose curve `r = cos(k*θ)` | Petal parameter k (2-7), producing k or 2k petals |
+
 ## Configuration
 
 All parameters are exposed via `GenerationConfig`:

package/CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.7.0](https://github.com/gfargo/git-hash-art/compare/0.6.0...0.7.0)
+
+- feat: procedural shape generators and contrast enforcement [`#13`](https://github.com/gfargo/git-hash-art/pull/13)
+- feat: procedural shapes and contrast enforcement [`4f018ab`](https://github.com/gfargo/git-hash-art/commit/4f018abb4c89849954ccc941ee7e9ab468231f78)
+- docs: update ALGORITHM.md with procedural shapes and contrast enforcement [`3e044fd`](https://github.com/gfargo/git-hash-art/commit/3e044fd940fbc0f62e3a9696fa815145cf315f67)
+
 #### [0.6.0](https://github.com/gfargo/git-hash-art/compare/0.5.0...0.6.0)
 
+> 19 March 2026
+
 - feat: archetype system, palette modes, background variety, and CLI [`#12`](https://github.com/gfargo/git-hash-art/pull/12)
 - feat: archetype system for dramatically different visual personalities [`2a1b919`](https://github.com/gfargo/git-hash-art/commit/2a1b919c51d3bfbd9d5c7a381ea5e104f81df2f6)
 - feat: add CLI for generating art from terminal [`184372a`](https://github.com/gfargo/git-hash-art/commit/184372a584f68031bf44379f385f2e78691f98aa)

package/dist/browser.js

@@ -403,6 +403,30 @@ function $b5a262d09b87e373$export$51ea55f869b7e0d3(hex, target, amount) {
     const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
     return $b5a262d09b87e373$var$hslToHex($b5a262d09b87e373$var$shiftHueToward(h, target, amount), s, l);
 }
+function $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(hex) {
+    const [r, g, b] = $b5a262d09b87e373$var$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;
+}
+function $b5a262d09b87e373$export$90ad0e6170cf6af5(fgHex, bgLuminance, minContrast = 0.15) {
+    const fgLum = $b5a262d09b87e373$export$5c6e3c2b59b7fbbe(fgHex);
+    const diff = Math.abs(fgLum - bgLuminance);
+    if (diff >= minContrast) return fgHex;
+    const [h, s, l] = $b5a262d09b87e373$var$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 $b5a262d09b87e373$var$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 $b5a262d09b87e373$var$hslToHex(h, targetS, targetL);
+    }
+}
 
 
 
@@ -1183,10 +1207,172 @@ const $77711f013715e6da$export$c2fc138f94dd4b2a = {
 };
 
 
+/**
+ * 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.
+ */ const $2899cc29bfcdb86b$export$580f80cfb9de73bc = (ctx, size, config)=>{
+    const rng = config?.rng ?? Math.random;
+    const r = size / 2;
+    const numPoints = 5 + Math.floor(rng() * 5); // 5-9 lobes
+    const points = [];
+    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();
+};
+const $2899cc29bfcdb86b$export$7a6094023f0902a6 = (ctx, size, config)=>{
+    const rng = 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();
+};
+const $2899cc29bfcdb86b$export$ef56b4a8316e47d5 = (ctx, size, config)=>{
+    const rng = 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();
+};
+const $2899cc29bfcdb86b$export$1db9219b4f34658c = (ctx, size, config)=>{
+    const rng = 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();
+};
+const $2899cc29bfcdb86b$export$b027c64d22b01985 = (ctx, size, config)=>{
+    const rng = 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, b)=>{
+        const ai = Math.round(a * 1000);
+        const bi = Math.round(b * 1000);
+        const g = (x, y)=>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();
+};
+const $2899cc29bfcdb86b$export$7608ccd03bfb705d = (ctx, size, config)=>{
+    const rng = 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);
+        }
+    }
+};
+const $2899cc29bfcdb86b$export$11a377e7498bb523 = (ctx, size, config)=>{
+    const rng = 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();
+};
+const $2899cc29bfcdb86b$export$40cfb4c637f2fbb5 = {
+    blob: $2899cc29bfcdb86b$export$580f80cfb9de73bc,
+    ngon: $2899cc29bfcdb86b$export$7a6094023f0902a6,
+    lissajous: $2899cc29bfcdb86b$export$ef56b4a8316e47d5,
+    superellipse: $2899cc29bfcdb86b$export$1db9219b4f34658c,
+    spirograph: $2899cc29bfcdb86b$export$b027c64d22b01985,
+    waveRing: $2899cc29bfcdb86b$export$7608ccd03bfb705d,
+    rose: $2899cc29bfcdb86b$export$11a377e7498bb523
+};
+
+
 const $e41b41d8dcf837ad$export$4ff7fc6f1af248b5 = {
     ...(0, $44f5b87a40c9680b$export$492753207a5258e1),
     ...(0, $f0f1a7293548e501$export$dbe318a13ce51887),
-    ...(0, $77711f013715e6da$export$c2fc138f94dd4b2a)
+    ...(0, $77711f013715e6da$export$c2fc138f94dd4b2a),
+    ...(0, $2899cc29bfcdb86b$export$40cfb4c637f2fbb5)
 };
 
 
@@ -1390,7 +1576,9 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
     ctx.lineWidth = strokeWidth;
     const drawFunction = (0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5)[shape];
     if (drawFunction) {
-        drawFunction(ctx, size);
+        drawFunction(ctx, size, {
+            rng: rng
+        });
         $e0f99502ff383dd8$var$applyRenderStyle(ctx, renderStyle, fillColor, strokeColor, strokeWidth, size, rng);
     }
     // Reset shadow so patterns aren't double-glowed
@@ -1679,6 +1867,15 @@ const $1f63dc64b5593c73$var$SACRED_SHAPES = [
     "torus",
     "eggOfLife"
 ];
+const $1f63dc64b5593c73$var$PROCEDURAL_SHAPES = [
+    "blob",
+    "ngon",
+    "lissajous",
+    "superellipse",
+    "spirograph",
+    "waveRing",
+    "rose"
+];
 const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
     "radial",
     "flow-field",
@@ -1691,12 +1888,14 @@ function $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames) {
     const basicW = 1 - layerRatio * 0.6;
     const complexW = 0.3 + layerRatio * 0.3;
     const sacredW = 0.1 + layerRatio * 0.4;
-    const total = basicW + complexW + sacredW;
+    const proceduralW = 0.25 + layerRatio * 0.2; // always present, grows with depth
+    const total = basicW + complexW + sacredW + proceduralW;
     const roll = rng() * total;
     let pool;
     if (roll < basicW) pool = $1f63dc64b5593c73$var$BASIC_SHAPES;
     else if (roll < basicW + complexW) pool = $1f63dc64b5593c73$var$COMPLEX_SHAPES;
-    else pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
+    else if (roll < basicW + complexW + sacredW) pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
+    else pool = $1f63dc64b5593c73$var$PROCEDURAL_SHAPES;
     const available = pool.filter((s)=>shapeNames.includes(s));
     if (available.length === 0) return shapeNames[Math.floor(rng() * shapeNames.length)];
     return available[Math.floor(rng() * available.length)];
@@ -1879,6 +2078,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     // ── 1. Background ──────────────────────────────────────────────
     const bgRadius = Math.hypot(cx, cy);
     $1f63dc64b5593c73$var$drawBackground(ctx, archetype.backgroundStyle, bgStart, bgEnd, width, height, cx, cy, bgRadius, rng, colors);
+    // Compute average background luminance for contrast enforcement
+    const bgLum = ((0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgStart) + (0, $b5a262d09b87e373$export$5c6e3c2b59b7fbbe)(bgEnd)) / 2;
     // ── 1b. Layered background (Feature G) ─────────────────────────
     // Draw large, very faint shapes to give the background texture
     const bgShapeCount = 3 + Math.floor(rng() * 4);
@@ -1990,8 +2191,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const heroShape = heroPool.filter((s)=>shapeNames.includes(s))[Math.floor(rng() * heroPool.filter((s)=>shapeNames.includes(s)).length)] || shapeNames[Math.floor(rng() * shapeNames.length)];
         const heroSize = adjustedMaxSize * (0.8 + rng() * 0.5);
         const heroRotation = rng() * 360;
-        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), 0.15 + rng() * 0.2);
-        const heroStroke = (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05);
+        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum), 0.15 + rng() * 0.2);
+        const heroStroke = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), bgLum);
         ctx.globalAlpha = 0.5 + rng() * 0.2;
         (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, heroShape, heroFocal.x, heroFocal.y, {
             fillColor: heroFill,
@@ -2053,8 +2254,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             if (atmosphericDesat > 0) fillBase = (0, $b5a262d09b87e373$export$fb75607d98509d9)(fillBase, atmosphericDesat);
             // Temperature contrast: shift foreground shapes opposite to background
             if (fgTempTarget) fillBase = (0, $b5a262d09b87e373$export$51ea55f869b7e0d3)(fillBase, fgTempTarget, 0.15 + layerRatio * 0.1);
-            const fillColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06);
-            const strokeColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05);
+            const fillColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06), bgLum);
+            const strokeColor = (0, $b5a262d09b87e373$export$90ad0e6170cf6af5)((0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05), bgLum);
             // Semi-transparent fill
             const fillAlpha = 0.2 + rng() * 0.5;
             const transparentFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha);
@@ -2128,7 +2329,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         const steps = 30 + Math.floor(rng() * 40);
         const stepLen = (3 + rng() * 5) * scaleFactor;
         const startWidth = (1 + rng() * 3) * scaleFactor;
-        const lineColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.4);
+        const lineColor = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 0.4);
         const lineAlpha = 0.06 + rng() * 0.1;
         // Draw as individual segments with tapering width
         let prevX = fx;
@@ -2217,7 +2418,7 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const cpx = mx + -dy / (dist || 1) * bulge;
             const cpy = my + dx / (dist || 1) * bulge;
             ctx.globalAlpha = 0.06 + rng() * 0.1;
-            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.3);
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$90ad0e6170cf6af5)(colors[Math.floor(rng() * colors.length)], bgLum), 0.3);
             ctx.beginPath();
             ctx.moveTo(a.x, a.y);
             ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);