git-hash-art 0.0.4 → 0.2.0

package/src/lib/canvas/colors.ts

@@ -5,9 +5,6 @@ import { gitHashToSeed } from "../utils";
 
 /**
  * Generates a color scheme based on a given Git hash.
- *
- * @param {string} gitHash - The Git hash used to generate the color scheme.
- * @returns {string[]} An array of hex color codes representing the generated color scheme.
  */
 export function generateColorScheme(gitHash: string): string[] {
   const seed = gitHashToSeed(gitHash);
@@ -34,53 +31,24 @@ interface MetallicColors {
   bronze: string;
 }
 
-interface SacredPalette {
-  primary: string;
-  secondary: string;
-  accent: string;
-  metallic: string;
-}
-
-interface ElementalPalette {
-  earth: string;
-  water: string;
-  air: string;
-  fire: string;
-}
-
-interface ChakraPalette {
-  root: string;
-  sacral: string;
-  solar: string;
-  heart: string;
-  throat: string;
-  third_eye: string;
-  crown: string;
-}
-
-type ColorPalette = SacredPalette | ElementalPalette | ChakraPalette | string[];
-
 // Enhanced color scheme generation for sacred geometry
 export class SacredColorScheme {
   private seed: number;
   public baseScheme: string[];
   private complementaryScheme: string[];
+  private triadicScheme: string[];
   private metallic: MetallicColors;
 
   constructor(gitHash: string) {
-    this.seed = this.gitHashToSeed(gitHash);
+    this.seed = gitHashToSeed(gitHash);
     this.baseScheme = this.generateBaseScheme();
     this.complementaryScheme = this.generateComplementaryScheme();
+    this.triadicScheme = this.generateTriadicScheme();
     this.metallic = this.generateMetallicColors();
   }
 
-  private gitHashToSeed(hash: string): number {
-    return parseInt(hash.slice(0, 8), 16);
-  }
-
   private generateBaseScheme(): string[] {
     const scheme = new ColorScheme();
-    scheme;
     return scheme
       .from_hue(this.seed % 360)
       .scheme("analogic")
@@ -100,6 +68,17 @@ export class SacredColorScheme {
       .map((hex: string) => `#${hex}`);
   }
 
+  private generateTriadicScheme(): string[] {
+    const triadicHue = (this.seed + 120) % 360;
+    const scheme = new ColorScheme();
+    return scheme
+      .from_hue(triadicHue)
+      .scheme("triade")
+      .variation("soft")
+      .colors()
+      .map((hex: string) => `#${hex}`);
+  }
+
   private generateMetallicColors(): MetallicColors {
     return {
       gold: "#FFD700",
@@ -109,36 +88,81 @@ export class SacredColorScheme {
     };
   }
 
-  getColorPalette(
-    type: "sacred" | "elemental" | "chakra" | "default" = "sacred",
-  ): ColorPalette {
-    switch (type) {
-      case "sacred":
-        return {
-          primary: this.baseScheme[0],
-          secondary: this.baseScheme[1],
-          accent: this.complementaryScheme[0],
-          metallic: this.metallic.gold,
-        };
-      case "elemental":
-        return {
-          earth: this.baseScheme[0],
-          water: this.baseScheme[1],
-          air: this.baseScheme[2],
-          fire: this.complementaryScheme[0],
-        };
-      case "chakra":
-        return {
-          root: "#FF0000",
-          sacral: "#FF7F00",
-          solar: "#FFFF00",
-          heart: "#00FF00",
-          throat: "#0000FF",
-          third_eye: "#4B0082",
-          crown: "#8F00FF",
-        };
-      default:
-        return this.baseScheme;
-    }
+  /**
+   * Returns a flat array of hash-derived colors suitable for art generation.
+   * Combines base analogic, complementary, and triadic schemes for variety
+   * while maintaining color harmony.
+   */
+  getColors(): string[] {
+    // Deduplicate and return a rich palette
+    const all = [
+      ...this.baseScheme.slice(0, 4),
+      ...this.complementaryScheme.slice(0, 2),
+      ...this.triadicScheme.slice(0, 2),
+    ];
+    return [...new Set(all)];
   }
+
+  /**
+   * Returns two background colors derived from the hash — darker variants
+   * of the base scheme for gradient backgrounds.
+   */
+  getBackgroundColors(): [string, string] {
+    return [
+      this.darken(this.baseScheme[0], 0.65),
+      this.darken(this.baseScheme[1], 0.55),
+    ];
+  }
+
+  /**
+   * Simple hex color darkening by a factor (0 = black, 1 = unchanged).
+   */
+  private darken(hex: string, factor: number): string {
+    const c = hex.replace("#", "");
+    const r = Math.round(parseInt(c.substring(0, 2), 16) * factor);
+    const g = Math.round(parseInt(c.substring(2, 4), 16) * factor);
+    const b = Math.round(parseInt(c.substring(4, 6), 16) * factor);
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
+}
+
+// ── Standalone color utilities ──────────────────────────────────────
+
+/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. */
+function hexToRgb(hex: string): [number, number, number] {
+  const c = hex.replace("#", "");
+  return [
+    parseInt(c.substring(0, 2), 16),
+    parseInt(c.substring(2, 4), 16),
+    parseInt(c.substring(4, 6), 16),
+  ];
+}
+
+/** Format [r, g, b] back to #RRGGBB. */
+function rgbToHex(r: number, g: number, b: number): string {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
+}
+
+/**
+ * Return a hex color with an alpha component as an rgba() CSS string.
+ * `alpha` is 0-1.
+ */
+export function hexWithAlpha(hex: string, alpha: number): string {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+}
+
+/**
+ * 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).
+ */
+export function jitterColor(
+  hex: string,
+  rng: () => number,
+  amount = 0.1,
+): string {
+  const [r, g, b] = hexToRgb(hex);
+  const jit = () => (rng() - 0.5) * 2 * amount * 255;
+  return rgbToHex(r + jit(), g + jit(), b + jit());
 }

package/src/lib/canvas/draw.ts

@@ -14,6 +14,11 @@ interface EnhanceShapeConfig extends DrawShapeConfig {
   proportionType?: ProportionType;
   baseOpacity?: number;
   opacityReduction?: number;
+  /** If provided, applies a glow (shadowBlur) effect. */
+  glowRadius?: number;
+  glowColor?: string;
+  /** If provided, fills with a radial gradient between two colors. */
+  gradientFillEnd?: string;
 }
 
 export function drawShape(
@@ -34,14 +39,16 @@ export function drawShape(
   const drawFunction = shapes[shape];
   if (drawFunction) {
     drawFunction(ctx, size);
+    ctx.fill();
+    ctx.stroke();
   }
 
-  ctx.fill();
-  ctx.stroke();
   ctx.restore();
 }
 
-// Integration with existing generation logic
+/**
+ * Enhanced shape drawing with glow, gradient fills, and pattern layering.
+ */
 export function enhanceShapeGeneration(
   ctx: CanvasRenderingContext2D,
   shape: string,
@@ -59,20 +66,46 @@ export function enhanceShapeGeneration(
     proportionType = "GOLDEN_RATIO",
     baseOpacity = 0.6,
     opacityReduction = 0.1,
+    glowRadius = 0,
+    glowColor,
+    gradientFillEnd,
   } = config;
 
   ctx.save();
   ctx.translate(x, y);
   ctx.rotate((rotation * Math.PI) / 180);
 
-  // Draw base shape
-  ctx.fillStyle = fillColor;
+  // Glow / shadow effect
+  if (glowRadius > 0) {
+    ctx.shadowBlur = glowRadius;
+    ctx.shadowColor = glowColor || fillColor;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
+
+  // Gradient fill or flat fill
+  if (gradientFillEnd) {
+    const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, size / 2);
+    grad.addColorStop(0, fillColor);
+    grad.addColorStop(1, gradientFillEnd);
+    ctx.fillStyle = grad;
+  } else {
+    ctx.fillStyle = fillColor;
+  }
+
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
 
   const drawFunction = shapes[shape];
   if (drawFunction) {
     drawFunction(ctx, size);
+    ctx.fill();
+    ctx.stroke();
+  }
+
+  // Reset shadow so patterns aren't double-glowed
+  if (glowRadius > 0) {
+    ctx.shadowBlur = 0;
   }
 
   // Layer additional patterns if specified
@@ -85,7 +118,5 @@ export function enhanceShapeGeneration(
     });
   }
 
-  ctx.fill();
-  ctx.stroke();
   ctx.restore();
 }

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

@@ -21,7 +21,7 @@ export const drawTriangle: DrawFunction = (ctx, size) => {
 export const drawHexagon: DrawFunction = (ctx, size) => {
   ctx.beginPath();
   for (let i = 0; i < 6; i++) {
-    const angle = (Math.PI / 8) * i;
+    const angle = ((Math.PI * 2) / 6) * i;
     const x = (size / 2) * Math.cos(angle);
     const y = (size / 2) * Math.sin(angle);
     if (i === 0) ctx.moveTo(x, y);

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

@@ -54,10 +54,13 @@ export const drawPlatonicSolid: DrawFunction = (ctx, size, config = {}) => {
   const finalConfig = { ...defaultShapeConfig, ...config };
   applyTransforms(ctx, size, finalConfig);
 
+  const solidType = config.type as keyof typeof ShapeConfigs.platonic;
+  const solidConfig =
+    ShapeConfigs.platonic[solidType] ?? ShapeConfigs.platonic.icosahedron;
   const {
     vertices,
     // faces
-  } = ShapeConfigs.platonic[config.type as keyof typeof ShapeConfigs.platonic];
+  } = solidConfig;
   const radius = size / 2;
 
   // Calculate vertices based on platonic solid type

package/src/lib/render.ts

@@ -0,0 +1,152 @@
+/**
+ * Pure rendering logic — environment-agnostic.
+ *
+ * This module only uses the standard CanvasRenderingContext2D API,
+ * so it works identically in Node (@napi-rs/canvas) and browsers
+ * (HTMLCanvasElement).
+ */
+import { SacredColorScheme } from "./canvas/colors";
+import { enhanceShapeGeneration } from "./canvas/draw";
+import { shapes } from "./canvas/shapes";
+import { createRng, seedFromHash } from "./utils";
+import { DEFAULT_CONFIG, type GenerationConfig } from "../types";
+
+/**
+ * Render hash-derived art onto an existing CanvasRenderingContext2D.
+ *
+ * This is the environment-agnostic core — it never creates a canvas or
+ * produces a buffer. Call it from Node or browser wrappers that supply
+ * the context.
+ *
+ * @param ctx  - A 2D rendering context (browser or Node canvas)
+ * @param gitHash - Hex hash string used as the deterministic seed
+ * @param config  - Partial generation config (merged with defaults)
+ */
+export function renderHashArt(
+  ctx: CanvasRenderingContext2D,
+  gitHash: string,
+  config: Partial<GenerationConfig> = {},
+): void {
+  const finalConfig: GenerationConfig = { ...DEFAULT_CONFIG, ...config };
+  const {
+    width,
+    height,
+    gridSize,
+    layers,
+    minShapeSize,
+    maxShapeSize,
+    baseOpacity,
+    opacityReduction,
+  } = finalConfig;
+
+  finalConfig.shapesPerLayer =
+    finalConfig.shapesPerLayer || Math.floor(gridSize * gridSize * 1.5);
+
+  // --- Color scheme derived from hash ---
+  const colorScheme = new SacredColorScheme(gitHash);
+  const colors = colorScheme.getColors();
+  const [bgStart, bgEnd] = colorScheme.getBackgroundColors();
+
+  // --- Radial gradient background for depth ---
+  const cx = width / 2;
+  const cy = height / 2;
+  const bgRadius = Math.hypot(cx, cy);
+  const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, bgRadius);
+  gradient.addColorStop(0, bgStart);
+  gradient.addColorStop(1, bgEnd);
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+
+  const shapeNames = Object.keys(shapes);
+  const scaleFactor = Math.min(width, height) / 1024;
+  const adjustedMinSize = minShapeSize * scaleFactor;
+  const adjustedMaxSize = maxShapeSize * scaleFactor;
+
+  // One master RNG seeded from the full hash — all randomness flows from here
+  const rng = createRng(seedFromHash(gitHash));
+
+  // Track shape positions for organic connecting curves later
+  const shapePositions: Array<{ x: number; y: number }> = [];
+
+  for (let layer = 0; layer < layers; layer++) {
+    const numShapes =
+      finalConfig.shapesPerLayer +
+      Math.floor(rng() * finalConfig.shapesPerLayer * 0.3);
+
+    // Layer opacity decays gently so all layers remain visible
+    const layerOpacity = Math.max(0.15, baseOpacity - layer * opacityReduction);
+
+    // Later layers use smaller shapes for depth
+    const layerSizeScale = 1 - layer * 0.15;
+
+    for (let i = 0; i < numShapes; i++) {
+      const x = rng() * width;
+      const y = rng() * height;
+
+      const shapeIdx = Math.floor(rng() * shapeNames.length);
+      const shape = shapeNames[shapeIdx];
+
+      // Shape size follows a power distribution — many small, few large
+      const sizeT = Math.pow(rng(), 1.8);
+      const size =
+        (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) *
+        layerSizeScale;
+
+      const rotation = rng() * 360;
+
+      const fillColor = colors[Math.floor(rng() * colors.length)];
+      const strokeColor = colors[Math.floor(rng() * colors.length)];
+
+      const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor;
+
+      ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5);
+
+      enhanceShapeGeneration(ctx, shape, x, y, {
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        size,
+        rotation,
+        proportionType: "GOLDEN_RATIO",
+      });
+
+      shapePositions.push({ x, y });
+    }
+  }
+
+  // --- Organic connecting curves between nearby shapes ---
+  if (shapePositions.length > 1) {
+    const numCurves = Math.floor((8 * (width * height)) / (1024 * 1024));
+    ctx.lineWidth = 0.8 * scaleFactor;
+
+    for (let i = 0; i < numCurves; i++) {
+      const idxA = Math.floor(rng() * shapePositions.length);
+      const offset =
+        1 + Math.floor(rng() * Math.min(5, shapePositions.length - 1));
+      const idxB = (idxA + offset) % shapePositions.length;
+
+      const a = shapePositions[idxA];
+      const b = shapePositions[idxB];
+
+      const mx = (a.x + b.x) / 2;
+      const my = (a.y + b.y) / 2;
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const dist = Math.hypot(dx, dy);
+      const bulge = (rng() - 0.5) * dist * 0.4;
+
+      const cpx = mx + (-dy / (dist || 1)) * bulge;
+      const cpy = my + (dx / (dist || 1)) * bulge;
+
+      ctx.globalAlpha = 0.08 + rng() * 0.12;
+      ctx.strokeStyle = colors[Math.floor(rng() * colors.length)];
+
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
+      ctx.stroke();
+    }
+  }
+
+  ctx.globalAlpha = 1;
+}

package/src/lib/utils.ts

@@ -1,18 +1,45 @@
-import { shapes } from "./canvas/shapes";
-
 export function gitHashToSeed(gitHash: string): number {
   return parseInt(gitHash.slice(0, 8), 16);
 }
 
+/**
+ * Mulberry32 — a fast, high-quality 32-bit seeded PRNG.
+ * Returns a function that produces deterministic floats in [0, 1).
+ */
+export function createRng(seed: number): () => number {
+  let s = seed | 0;
+  return () => {
+    s = (s + 0x6d2b79f5) | 0;
+    let t = Math.imul(s ^ (s >>> 15), 1 | s);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Derive a deterministic seed from a hash string and an extra index
+ * so each call-site gets its own independent stream.
+ */
+export function seedFromHash(hash: string, offset = 0): number {
+  let h = 0;
+  for (let i = 0; i < hash.length; i++) {
+    h = (Math.imul(31, h) + hash.charCodeAt(i)) | 0;
+  }
+  return (h + offset) | 0;
+}
+
+/**
+ * Legacy helper kept for backward compat — now backed by mulberry32.
+ * Prefer createRng() + rng() for new code.
+ */
 export function getRandomFromHash(
   hash: string,
   index: number,
   min: number,
   max: number,
 ): number {
-  const hexPair = hash.substr((index * 2) % hash.length, 2);
-  const decimal = parseInt(hexPair, 16);
-  return min + (decimal / 255) * (max - min);
+  const rng = createRng(seedFromHash(hash, index));
+  return min + rng() * (max - min);
 }
 
 // Golden ratio and other important proportions
@@ -29,7 +56,7 @@ export type ProportionType = keyof typeof Proportions;
 
 interface Pattern {
   type: string;
-  config: any; // You might want to define a more specific type for config
+  config: any;
 }
 
 interface LayerConfig {

package/src/types.ts

@@ -0,0 +1,35 @@
+/**
+ * Configuration options for image generation.
+ */
+export interface GenerationConfig {
+  /** Canvas width in pixels (default: 2048) */
+  width: number;
+  /** Canvas height in pixels (default: 2048) */
+  height: number;
+  /** Controls base shape count per layer — gridSize² × 1.5 (default: 5) */
+  gridSize: number;
+  /** Number of layers to generate (default: 4) */
+  layers: number;
+  /** Minimum shape size in pixels, scaled to canvas (default: 30) */
+  minShapeSize: number;
+  /** Maximum shape size in pixels, scaled to canvas (default: 400) */
+  maxShapeSize: number;
+  /** Starting opacity for the first layer (default: 0.7) */
+  baseOpacity: number;
+  /** Opacity reduction per layer (default: 0.12) */
+  opacityReduction: number;
+  /** Base shapes per layer — defaults to gridSize² × 1.5 when 0 */
+  shapesPerLayer: number;
+}
+
+export const DEFAULT_CONFIG: GenerationConfig = {
+  width: 2048,
+  height: 2048,
+  gridSize: 5,
+  layers: 4,
+  minShapeSize: 30,
+  maxShapeSize: 400,
+  baseOpacity: 0.7,
+  opacityReduction: 0.12,
+  shapesPerLayer: 0,
+};