Generative Art Operations
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
1---2name: genart-ops3description: Generative art programming - three.js scenes, p5.js sketches, SVG generation, GLSL shaders, procedural algorithms, and color for creative coding. Use for: generative art, creative coding, three.js, p5.js, SVG, GLSL, shader, noise, perlin, simplex, flow field, particle system, SDF, ray marching, procedural, L-system, voronoi, delaunay, cellular automata, wave function collapse, instanced mesh, post-processing, bloom, WebGL, canvas, fragment shader, vertex shader, FBM, domain warping.4license: MIT5---67# Generative Art Operations89Practical patterns for creative coding and generative art. Covers three.js, p5.js, SVG generation, GLSL shaders, procedural algorithms, and color theory for computational aesthetics.1011> 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).12>13> 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](../threejs-ops/SKILL.md). This skill owns the creative/shader side of three.js.1415The detailed code, technique walkthroughs, and parameter tables live in the16references below. This body holds the decisions: which surface, which algorithm,17which color space, in what order.1819## Workflow & tool selection2021Pick the **rendering surface** first — it determines everything downstream:2223| Goal | Surface | Reference |24|---|---|---|25| 2D sketches, fast iteration, teaching | p5.js (Canvas2D or WebGL) | [p5-sketches](references/p5-sketches.md) |26| 3D scenes, camera, lighting, post-processing | three.js | [threejs-scenes](references/threejs-scenes.md) |27| Per-pixel fields, full-screen shaders, ray marching | raw GLSL / WebGL fragment | [glsl-shaders](references/glsl-shaders.md) |28| Resolution-independent vectors, plotter/print | SVG | [svg-generation](references/svg-generation.md) |2930Then **generate content** (CPU) and **colorize** it (perceptual space):3132| Need | Algorithm family | Reference |33|---|---|---|34| Organic texture, terrain, marble | noise (value/simplex/FBM/domain-warp) | [procedural-algorithms](references/procedural-algorithms.md) |35| Even point distribution | Poisson disk | [procedural-algorithms](references/procedural-algorithms.md) |36| Trees, fractals, self-similar curves | L-systems | [procedural-algorithms](references/procedural-algorithms.md) |37| Emergent motion/patterns | flow fields / cellular automata | [procedural-algorithms](references/procedural-algorithms.md) |38| Space partitioning | Voronoi / Delaunay (d3-delaunay) | [procedural-algorithms](references/procedural-algorithms.md) |39| Tile worlds with adjacency rules | wave function collapse | [procedural-algorithms](references/procedural-algorithms.md) |40| Palettes, gradients, harmonies | OKLAB / OKLCH | [color-and-palettes](references/color-and-palettes.md) |4142**Order of operations:** surface → generators → color. Determinism = seeded RNG43(`alea`) + no per-frame `Math.random()` inside the field/particle loop.4445## 1. Three.js scenes4647Creative/shader-side scaffolding: minimal scene + camera + renderer (ACES tone48mapping, responsive resize), the 2026 `THREE.Timer` animation loop (auto-pauses49on tab switch), `OrbitControls` (damping requires `update()` per frame), a50three-point lighting rig (key/fill/rim + ambient), bloom via `EffectComposer`51(`OutputPass` always last — it owns tone mapping), `InstancedMesh` for 10k+52particle/mass-geometry systems with per-instance color, and a custom53`ShaderMaterial` template (uTime/uResolution/uMouse uniforms). Full code in54[references/threejs-scenes.md](references/threejs-scenes.md).5556## 2. p5.js sketches5758Mode selection drives everything: **global** (one sketch, fastest path to59pixels), **instance** (multiple sketches per page, module isolation), **WebGL**60(3D, lights, `orbitControl`). Plus custom GLSL via `createShader`,61`loadPixels`/`updatePixels` per-pixel manipulation, and recording/export — PNG62frame sequences, SVG output (p5.js-svg), and `canvas-sketch` for high-res63Canvas2D + MP4 streaming. Full code in64[references/p5-sketches.md](references/p5-sketches.md).6566## 3. SVG generation6768Resolution-independent vector output. Programmatic construction69(`createElementNS` + `XMLSerializer`), the full path-command reference70(M/L/H/V/C/S/Q/T/A/Z, absolute + relative), generative patterns (organic blobs71via smooth closed cubic paths, line hatching), generative SVG filters72(`feTurbulence` / `feDisplacementMap` / `feDiffuseLighting`), SMIL + CSS73animation, and SVGO optimization (preserve viewBox, drop dimensions for74responsive output). Full code in75[references/svg-generation.md](references/svg-generation.md).7677## 4. GLSL shaders7879The GPU fragment-shader toolbox: standalone WebGL boilerplate (fullscreen80quad), common uniforms, hash/random functions, value / simplex / Worley noise,81FBM, domain warping (single + double, Inigo Quilez), 2D & 3D SDF primitives,82boolean / smooth / transform SDF operations, a full ray-marching template83(normal estimation + lighting), and cosine-palette color blending. Full code in84[references/glsl-shaders.md](references/glsl-shaders.md). Several of these85(noise, FBM, domain warping) have CPU/JS counterparts in86[procedural-algorithms](references/procedural-algorithms.md) — pick the surface,87then reuse the math.8889## 5. Procedural generation algorithms9091CPU-side recipes in JavaScript: Perlin/simplex noise (`simplex-noise` + `alea`92seeding), FBM, domain warping, ridged noise, flow fields (with particle93drivers), Poisson disk sampling, L-systems (trees / Koch / Sierpinski / dragon),94Conway's Game of Life, Voronoi/Delaunay via `d3-delaunay` (+ Lloyd relaxation),95wave function collapse (simple tiled), terrain from noise octaves (+ biome96classification), and seamless toroidal tiling. Full code in97[references/procedural-algorithms.md](references/procedural-algorithms.md).9899## 6. Color & palettes100101OKLAB/OKLCH conversion (both JS and GLSL — the perceptually-uniform basis for102everything here), cosine palettes (Quilez presets), OKLCH palette generators103(even-hue, analogous, warm/cool), gradient interpolation in perceptual space104(OKLCH with shortest-hue path, multi-stop), color cycling (phase-shifted per105element), and harmony rules (complementary / analogous / triadic /106split-complementary / tetradic). Full code in107[references/color-and-palettes.md](references/color-and-palettes.md).108109## Quick Reference: Noise Algorithm Comparison110111| Algorithm | Dimension | Character | Cost | Use Case |112|-----------|-----------|-----------|------|----------|113| Value noise | Any | Blocky, grid artifacts | Cheap | Quick prototypes |114| Perlin (gradient) | Any | Smooth, directional | Medium | Classic terrain, clouds |115| Simplex | Any | Smooth, isotropic | Medium | Default choice, fewer artifacts than Perlin |116| Worley (cellular) | Any | Cell-like, organic | Expensive | Stone, water, cells |117| FBM | Any | Fractal detail | N * base | Terrain, clouds, organic shapes |118| Ridged FBM | Any | Sharp mountain ridges | N * base | Mountains, lightning |119| Domain warping | 2D+ | Swirling, marble-like | 3-9x base | Marble, smoke, alien landscapes |120121## Quick Reference: Libraries122123| Task | Library | Install |124|------|---------|---------|125| Noise | `simplex-noise` | `npm install simplex-noise` |126| Seeded random | `alea` | `npm install alea` |127| Voronoi/Delaunay | `d3-delaunay` | `npm install d3-delaunay` |128| 3D engine | `three` | `npm install three` |129| 2D canvas | `p5` | `npm install p5` |130| Canvas export | `canvas-sketch` | `npm install canvas-sketch` |131| Video export | `ccapture.js` | `npm install ccapture.js` |132| SVG optimize | `svgo` | `npm install -g svgo` |133| Color | `culori` | `npm install culori` |134| Shader library | LYGIA | `#include` from lygia.xyz |135136## Bundled references137138| Reference | Load when |139|---|---|140| [threejs-scenes.md](references/threejs-scenes.md) | Scaffolding a creative three.js scene — scene/camera/renderer, Timer loop, controls, lighting, bloom, InstancedMesh, ShaderMaterial |141| [p5-sketches.md](references/p5-sketches.md) | p5.js global/instance/WebGL modes, custom shaders, pixel manipulation, recording/export |142| [svg-generation.md](references/svg-generation.md) | Programmatic SVG, path commands, generative patterns, filters, animation, SVGO |143| [glsl-shaders.md](references/glsl-shaders.md) | GLSL boilerplate, hash/noise, FBM, domain warping, SDFs, ray marching, palette blending |144| [procedural-algorithms.md](references/procedural-algorithms.md) | JS procedural recipes — noise, flow fields, Poisson disk, L-systems, CA, Voronoi, WFC, terrain, tiling |145| [color-and-palettes.md](references/color-and-palettes.md) | OKLAB/OKLCH conversion (JS+GLSL), palette generation, perceptual gradients, cycling, harmonies |146147## See Also148149- `color-ops` - CSS color, accessibility, design tokens, palette scripts150- `javascript-ops` - JS async patterns, modules, ES2024+ features151- [Book of Shaders](https://thebookofshaders.com/) - GLSL fundamentals152- [Shadertoy](https://www.shadertoy.com/) - Live shader playground153- [Inigo Quilez articles](https://iquilezles.org/articles/) - SDF, noise, ray marching154- [LYGIA](https://lygia.xyz/) - Cross-platform shader library155- [Red Blob Games](https://www.redblobgames.com/) - Procedural generation algorithms
0xDarkMatter