design-generative-art

# Algorithmic Art Skill Create generative, procedural, and mathematical art using code. Transform algorithms into visual experiences. ## CRITICAL: Check Existing First **Before creating ANY generative art, verify:** 1. **Check for existing creative coding setup:** ```bash cat package.json | grep -i "p5\|three\|canvas\|pixi\|paper" ls -la src/components/art/ src/components/generative/ 2>/dev/null ``` 2. **Check for existing canvas/WebGL usage:** ```bash rg "Canvas|useFrame|getContext.*2d|WebGL" --type tsx -l ``` 3. **Check for existing noise/random utilities:** ```bash rg "simplex\|perlin\|noise\|seedrandom" --type ts ``` **Why:** Don't conflict with existing rendering pipelines or duplicate utility code. ## Core Principles ### 1. Seeded Randomness Every piece should be reproducible with a seed: ```typescript // Deterministic random number generator function mulberry32(seed: number) { return function() { let t = seed += 0x6D2B79F5 t = Math.imul(t ^ t >>> 15, t | 1) t ^= t + Math.imul(t ^ t >>> 7, t | 61) return ((t ^ t >>> 14) >>> 0) / 4294967296 } } // Usage const rng = mulberry32(42) // Same seed = same output const value = rng() // 0-1 deterministic random ``` ### 2. Parameterized Generation Make art controllable via parameters: ```typescript interface ArtParams { seed: number density: number // 0-1 palette: string[] scale: number speed: number complexity: number // 0-1 } ``` ### 3. Resolution Independence Design for any canvas size: ```typescript //...