design-generative-art

# Algorithmic Art Skill **Degree of freedom: MIXED.** Algorithm and palette `[HIGH freedom]`; existing pipeline inventory and seed reproducibility `[LOW freedom — run exactly]`. Create generative, procedural, and mathematical art using code. Transform algorithms into visual experiences. ## This skill vs neighbors | Skill | Owns | |---|---| | **design-generative-art** (this) | Algorithmic visuals with p5.js, Canvas, or SVG; seeded randomness, controls | | `data-visualization` | Interactive, accessible charts and dashboards with Recharts, D3, or Victory | ## How to reason 1. **Inventory** — existing p5 / canvas / noise utilities 2. **Seed** — deterministic RNG; same seed = same pixels 3. **Parameterize** — density, palette, scale, complexity 4. **Validate** — resolution-independent; reduced-motion on loops ## Worked example > **Inventory:** no p5; one `getContext('2d')` chart canvas — do not hijack it. > **Seed:** `mulberry32(42)` drives a new `src/components/art/` flow field. > **Parameterize:** `density`, `palette` (ocean), `scale`; slider re-renders from the same seed. > **Validate:** seed 42 twice matches; `prefers-reduced-motion` stops the RAF loop. ## Self-critique before reporting - **No pipeline clash** — did not overwrite an existing canvas/WebGL path - **Reproducible** — same seed paints identical output - **Controls matter** — each param changes the picture, not just a label - **Right owner** — data charts → `data-visualization`; UI illustration → `design-frontend`; WebGL/3D → `enhance-web-web3d` ## Check existing first [LOW freedom — run exactly] **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 [HIGH freedom] ### 1. Seeded Randomness Every piece should be reproducible with a seed: ```typescript 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 // Normalize coordinates to 0-1 range const nx = x / width const ny = y / height // Then scale to canvas const px = nx * canvas.width const py = ny * canvas.height ``` ## Techniques [HIGH freedom] - **Flow fields** — a grid of angles; particles follow it with low alpha for trails - **Recursive subdivision** — split a rect 30–70% until depth or a random stop, fill leaves - **Circle packing** — grow candidates until collision or bounds, keep those with r > 2 - **L-systems** — rewrite an axiom by rules, then draw with a turtle stack ```typescript function generateLSystem(system: LSystem): string { let current = system.axiom for (let i = 0; i < system.iterations; i++) { current = current.split('').map(c => system.rules[c] || c).join('') } return current } ``` Full implementations of all four: [references/algorithms.md](references/algorithms.md). ## React Component Pattern [HIGH freedom] - `'use client'` canvas wrapper; `seed`, `width`, `height`, `palette`, `className` props - Render in `useCallback` keyed on seed/size/palette; `useEffect` calls it - Controls: a Regenerate button (`Date.now()` seed) and a labelled numeric seed input - Canvas styled `maxWidth: '100%', height: 'auto'` for responsive display Full component: [references/component-palettes-export.md](references/component-palettes-export.md) §React Component Pattern. ## Color Palettes [HIGH freedom] Curated 5-color sets in warm / cool / monochrome / vibrant / Japanese-inspired groups (`sunset`, `ocean`, `ink`, `neon`, `wabi`, …). Table: [references/component-palettes-export.md](references/component-palettes-export.md) §Color Palettes. ## Animation Loop [HIGH freedom] - `requestAnimationFrame` loop; `t = frame * params.speed * 0.01` - Semi-transparent black overlay (`rgba(0,0,0,0.02)`) for trails - Return a cleanup that calls `cancelAnimationFrame` Full loop: [references/algorithms.md](references/algorithms.md) §Animation Loop. ## Export & Sharing [HIGH freedom] - PNG: `canvas.toDataURL('image/png')` into a download link named `${filename}-${Date.now()}.png` - SVG: `XMLSerializer` → `Blob` (`image/svg+xml`) → `URL.createObjectURL` Helpers: [references/component-palettes-export.md](references/component-palettes-export.md) §Export & Sharing. ## Related Skills - `enhance-web-web3d` — WebGL, Three.js, shaders for 3D generative art - `design-motion` — Animation patterns for interactive pieces - `design-canvas` — Print-quality visual design philosophy - `data-visualization` — Data-driven generative compositions ## Validation [LOW freedom — do not skip] After creating algorithmic art: 1. **Reproducibility** → Same seed produces identical output 2. **Performance** → 60fps for animated pieces 3. **Resolution** → Looks good at target export size 4. **Palette** → Colors work together harmoniously 5. **Parameters** → Controls produce meaningful visual changes 6. **Export** → PNG/SVG export works correctly 7. **Accessibility** → Animated art respects `prefers-reduced-motion`