Practical patterns for creative coding and generative art. Covers three.js, p5.js, SVG generation, GLSL shaders, procedural algorithms, and color theory for computational aesthetics.
Color-ops handles CSS color, accessibility, and design tokens. This skill focuses on generative/procedural color techniques (palette algorithms, shader color, gradient interpolation in perceptual space).
Application/game-scale three.js — GLTF asset pipelines, AnimationMixer, fixed-timestep game loops, physics (rapier/cannon-es), react-three-fiber, instancing/disposal at scale — is threejs-ops. This skill owns the creative/shader side of three.js.
The detailed code, technique walkthroughs, and parameter tables live in the references below. This body holds the decisions: which surface, which algorithm, which color space, in what order.
Workflow & tool selection
Pick the rendering surface first — it determines everything downstream:
| Goal | Surface | Reference |
|---|---|---|
| 2D sketches, fast iteration, teaching | p5.js (Canvas2D or WebGL) | p5-sketches |
| 3D scenes, camera, lighting, post-processing | three.js | threejs-scenes |
| Per-pixel fields, full-screen shaders, ray marching | raw GLSL / WebGL fragment | glsl-shaders |
| Resolution-independent vectors, plotter/print | SVG | svg-generation |
Then generate content (CPU) and colorize it (perceptual space):
| Need | Algorithm family | Reference |
|---|---|---|
| Organic texture, terrain, marble | noise (value/simplex/FBM/domain-warp) | procedural-algorithms |
| Even point distribution | Poisson disk | procedural-algorithms |
| Trees, fractals, self-similar curves | L-systems | procedural-algorithms |
| Emergent motion/patterns | flow fields / cellular automata | procedural-algorithms |
| Space partitioning | Voronoi / Delaunay (d3-delaunay) | procedural-algorithms |
| Tile worlds with adjacency rules | wave function collapse | procedural-algorithms |
| Palettes, gradients, harmonies | OKLAB / OKLCH | color-and-palettes |
Order of operations: surface → generators → color. Determinism = seeded RNG
(alea) + no per-frame Math.random() inside the field/particle loop.
1. Three.js scenes
Creative/shader-side scaffolding: minimal scene + camera + renderer (ACES tone
mapping, responsive resize), the 2026 THREE.Timer animation loop (auto-pauses
on tab switch), OrbitControls (damping requires update() per frame), a
three-point lighting rig (key/fill/rim + ambient), bloom via EffectComposer
(OutputPass always last — it owns tone mapping), InstancedMesh for 10k+
particle/mass-geometry systems with per-instance color, and a custom
ShaderMaterial template (uTime/uResolution/uMouse uniforms). Full code in
references/threejs-scenes.md.
2. p5.js sketches
Mode selection drives everything: global (one sketch, fastest path to
pixels), instance (multiple sketches per page, module isolation), WebGL
(3D, lights, orbitControl). Plus custom GLSL via createShader,
loadPixels/updatePixels per-pixel manipulation, and recording/export — PNG
frame sequences, SVG output (p5.js-svg), and canvas-sketch for high-res
Canvas2D + MP4 streaming. Full code in
references/p5-sketches.md.
3. SVG generation
Resolution-independent vector output. Programmatic construction
(createElementNS + XMLSerializer), the full path-command reference
(M/L/H/V/C/S/Q/T/A/Z, absolute + relative), generative patterns (organic blobs
via smooth closed cubic paths, line hatching), generative SVG filters
(feTurbulence / feDisplacementMap / feDiffuseLighting), SMIL + CSS
animation, and SVGO optimization (preserve viewBox, drop dimensions for
responsive output). Full code in
references/svg-generation.md.
4. GLSL shaders
The GPU fragment-shader toolbox: standalone WebGL boilerplate (fullscreen quad), common uniforms, hash/random functions, value / simplex / Worley noise, FBM, domain warping (single + double, Inigo Quilez), 2D & 3D SDF primitives, boolean / smooth / transform SDF operations, a full ray-marching template (normal estimation + lighting), and cosine-palette color blending. Full code in references/glsl-shaders.md. Several of these (noise, FBM, domain warping) have CPU/JS counterparts in procedural-algorithms — pick the surface, then reuse the math.
5. Procedural generation algorithms
CPU-side recipes in JavaScript: Perlin/simplex noise (simplex-noise + alea
seeding), FBM, domain warping, ridged noise, flow fields (with particle
drivers), Poisson disk sampling, L-systems (trees / Koch / Sierpinski / dragon),
Conway's Game of Life, Voronoi/Delaunay via d3-delaunay (+ Lloyd relaxation),
wave function collapse (simple tiled), terrain from noise octaves (+ biome
classification), and seamless toroidal tiling. Full code in
references/procedural-algorithms.md.
6. Color & palettes
OKLAB/OKLCH conversion (both JS and GLSL — the perceptually-uniform basis for everything here), cosine palettes (Quilez presets), OKLCH palette generators (even-hue, analogous, warm/cool), gradient interpolation in perceptual space (OKLCH with shortest-hue path, multi-stop), color cycling (phase-shifted per element), and harmony rules (complementary / analogous / triadic / split-complementary / tetradic). Full code in references/color-and-palettes.md.
Quick Reference: Noise Algorithm Comparison
| Algorithm | Dimension | Character | Cost | Use Case |
|---|---|---|---|---|
| Value noise | Any | Blocky, grid artifacts | Cheap | Quick prototypes |
| Perlin (gradient) | Any | Smooth, directional | Medium | Classic terrain, clouds |
| Simplex | Any | Smooth, isotropic | Medium | Default choice, fewer artifacts than Perlin |
| Worley (cellular) | Any | Cell-like, organic | Expensive | Stone, water, cells |
| FBM | Any | Fractal detail | N * base | Terrain, clouds, organic shapes |
| Ridged FBM | Any | Sharp mountain ridges | N * base | Mountains, lightning |
| Domain warping | 2D+ | Swirling, marble-like | 3-9x base | Marble, smoke, alien landscapes |
Quick Reference: Libraries
| Task | Library | Install |
|---|---|---|
| Noise | simplex-noise |
npm install simplex-noise |
| Seeded random | alea |
npm install alea |
| Voronoi/Delaunay | d3-delaunay |
npm install d3-delaunay |
| 3D engine | three |
npm install three |
| 2D canvas | p5 |
npm install p5 |
| Canvas export | canvas-sketch |
npm install canvas-sketch |
| Video export | ccapture.js |
npm install ccapture.js |
| SVG optimize | svgo |
npm install -g svgo |
| Color | culori |
npm install culori |
| Shader library | LYGIA | #include from lygia.xyz |
Bundled references
| Reference | Load when |
|---|---|
| threejs-scenes.md | Scaffolding a creative three.js scene — scene/camera/renderer, Timer loop, controls, lighting, bloom, InstancedMesh, ShaderMaterial |
| p5-sketches.md | p5.js global/instance/WebGL modes, custom shaders, pixel manipulation, recording/export |
| svg-generation.md | Programmatic SVG, path commands, generative patterns, filters, animation, SVGO |
| glsl-shaders.md | GLSL boilerplate, hash/noise, FBM, domain warping, SDFs, ray marching, palette blending |
| procedural-algorithms.md | JS procedural recipes — noise, flow fields, Poisson disk, L-systems, CA, Voronoi, WFC, terrain, tiling |
| color-and-palettes.md | OKLAB/OKLCH conversion (JS+GLSL), palette generation, perceptual gradients, cycling, harmonies |
See Also
color-ops- CSS color, accessibility, design tokens, palette scriptsjavascript-ops- JS async patterns, modules, ES2024+ features- Book of Shaders - GLSL fundamentals
- Shadertoy - Live shader playground
- Inigo Quilez articles - SDF, noise, ray marching
- LYGIA - Cross-platform shader library
- Red Blob Games - Procedural generation algorithms