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.

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:

cat package.json | grep -i "p5\|three\|canvas\|pixi\|paper"
ls -la src/components/art/ src/components/generative/ 2>/dev/null

1. Check for existing canvas/WebGL usage:

rg "Canvas|useFrame|getContext.*2d|WebGL" --type tsx -l

1. Check for existing noise/random utilities:

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:

// 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