---
name: genart-ops
description: "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."
license: MIT
allowed-tools: "Read Write Bash"
metadata:
author: claude-mods
related-skills: color-ops, javascript-ops, typescript-ops
---
# 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).
---
## 1. Three.js -- Scene Scaffolding (2026)
### Minimal Scene
```javascript
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, // fov
window.innerWidth / window.innerHeight, // aspect
0.1, // near
1000 // far
);
camera.position.set(0, 2, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild(renderer.domElement);
// --- Responsive ---
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
```
### Animation Loop (Timer-based, 2026 pattern)
```javascript
const timer = new THREE.Timer();
timer.connect(document); // auto-pauses on tab switch
renderer.setAnimationLoop(() => {
timer.update();
const delta = timer.getDelta();
const elapsed = timer.getElapsed();
// animate objects using delta/elapsed
mesh.rotation.y += delta;
renderer.render(scene, camera);
});
```
### OrbitControls
```javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 2;
controls.maxDistance = 20;
// Must call update in animation loop when damping enabled
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});
```
### Lighting Rig (Three-point)
```javascript
// Key light
const key = new THREE.DirectionalLight(0xffffff, 1.5);
key.position.set(5, 5, 5);
scene.add(key);
// Fill light (softer, opposite side)
const fill = new THREE.DirectionalLight(0x8888ff, 0.5);
fill.position.set(-5, 3, -5);
scene.add(fill);
// Rim / back light
const rim = new THREE.DirectionalLight(0xffffff, 0.8);
rim.position.set(0, 5, -10);
scene.add(rim);
// Ambient baseline
scene.add(new THREE.AmbientLight(0x404040, 0.5));
```
### Post-Processing Pipeline (Bloom)
```javascript
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, // strength
0.4, // radius
0.85 // threshold
);
composer.addPass(bloomPass);
composer.addPass(new OutputPass()); // always last -- handles tone mapping
// In animation loop: composer.render() instead of renderer.render()
// On resize: composer.setSize(width, height)
```
### InstancedMesh (Particle Systems / Mass Geometry)
```javascript
const geometry = new THREE.SphereGeometry(0.05, 8, 8);
const material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
const COUNT = 10000;
const mesh = new THREE.InstancedMesh(geometry, material, COUNT);
scene.add(mesh);
const dummy = new THREE.Object3D();
const matrix = new THREE.Matrix4();
for (let i = 0; i < COUNT; i++) {
dummy.position.set(
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40
);
dummy.updateMatrix();
mesh.setMatrixAt(i, dummy.matrix);
}
mesh.instanceMatrix.needsUpdate = true;
// Per-instance color
const color = new THREE.Color();
for (let i = 0; i < COUNT; i++) {
color.setHSL(Math.random(), 0.8, 0.6);
mesh.setColorAt(i, color);
}
mesh.instanceColor.needsUpdate = true;
// Animate instances
function animateInstances(elapsed) {
for (let i = 0; i < COUNT; i++) {
mesh.getMatrixAt(i, matrix);
matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
dummy.position.y += Math.sin(elapsed + i * 0.1) * 0.001;
dummy.updateMatrix();
mesh.setMatrixAt(i, dummy.matrix);
}
mesh.instanceMatrix.needsUpdate = true;
}
```
### Custom ShaderMaterial
```javascript
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0 },
uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
uMouse: { value: new THREE.Vector2(0, 0) },
uColor: { value: new THREE.Color(0x3b82f6) },
},
vertexShader: /* glsl */ `
varying vec2 vUv;
varying vec3 vPosition;
uniform float uTime;
void main() {
vUv = uv;
vPosition = position;
vec3 pos = position;
pos.z += sin(pos.x * 3.0 + uTime) * 0.2;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: /* glsl */ `
uniform float uTime;
uniform vec2 uResolution;
uniform vec3 uColor;
varying vec2 vUv;
void main() {
vec3 col = uColor * (0.5 + 0.5 * sin(vUv.x * 10.0 + uTime));
gl_FragColor = vec4(col, 1.0);
}
`,
side: THREE.DoubleSide,
});
// Update in animation loop:
shaderMaterial.uniforms.uTime.value = elapsed;
```
---
## 2. p5.js -- Sketch Patterns (2026)
### Global Mode (Quick Sketching)
```javascript
function setup() {
createCanvas(800, 800);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
}
function draw() {
background(0, 0, 10);
for (let i = 0; i < 100; i++) {
let x = random(width);
let y = random(height);
fill(random(360), 80, 90, 50);
circle(x, y, random(5, 30));
}
}
```
### Instance Mode (Multiple Sketches / Modules)
```javascript
const sketch = (p) => {
let particles = [];
p.setup = () => {
p.createCanvas(800, 800);
p.colorMode(p.HSB, 360, 100, 100, 100);
for (let i = 0; i < 200; i++) {
particles.push({
x: p.random(p.width),
y: p.random(p.height),
vx: p.random(-1, 1),
vy: p.random(-1, 1),
hue: p.random(360),
});
}
};
p.draw = () => {
p.background(0, 0, 5, 10); // trailing fade
for (let pt of particles) {
pt.x += pt.vx;
pt.y += pt.vy;
if (pt.x < 0 || pt.x > p.width) pt.vx *= -1;
if (pt.y < 0 || pt.y > p.height) pt.vy *= -1;
p.fill(pt.hue, 80, 90, 60);
p.noStroke();
p.circle(pt.x, pt.y, 6);
}
};
};
new p5(sketch, document.getElementById('canvas-container'));
```
### WebGL Mode
```javascript
function setup() {
createCanvas(800, 800, WEBGL);
}
function draw() {
background(0);
orbitControl();
ambientLight(60);
directionalLight(255, 255, 255, 0.5, -1, -0.5);
push();
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.013);
normalMaterial();
torus(150, 50, 24, 16);
pop();
}
```
### Custom Shaders in p5.js
```javascript
let myShader;
const vertSrc = `
precision highp float;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
void main() {
vTexCoord = aTexCoord;
vec4 positionVec4 = vec4(aPosition, 1.0);
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
}
`;
const fragSrc = `
precision highp float;
uniform float uTime;
uniform vec2 uResolution;
varying vec2 vTexCoord;
void main() {
vec2 uv = vTexCoord;
vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
gl_FragColor = vec4(col, 1.0);
}
`;
function setup() {
createCanvas(800, 800, WEBGL);
myShader = createShader(vertSrc, fragSrc);
}
function draw() {
shader(myShader);
myShader.setUniform('uTime', millis() / 1000.0);
myShader.setUniform('uResolution', [width, height]);
rect(0, 0, width, height);
}
```
### Pixel Manipulation
```javascript
function draw() {
loadPixels();
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let idx = (x + y * width) * 4;
let n = noise(x * 0.01, y * 0.01, frameCount * 0.01);
pixels[idx] = n * 255; // R
pixels[idx + 1] = n * 128; // G
pixels[idx + 2] = 255 - n*255; // B
pixels[idx + 3] = 255; // A
}
}
updatePixels();
}
```
### Recording / Export
```javascript
// Frame export (PNG sequence)
function draw() {
// ... drawing code ...
if (frameCount <= 300) {
saveCanvas('frame-' + nf(frameCount, 4), 'png');
}
}
// SVG export (requires p5.js-svg library)
function setup() {
createCanvas(800, 800, SVG);
}
function draw() {
// ... vector drawing ...
save('artwork.svg');
noLoop();
}
// With canvas-sketch (standalone, not p5)
// npm install canvas-sketch canvas-sketch-cli -g
const canvasSketch = require('canvas-sketch');
const settings = {
dimensions: [2048, 2048],
animate: true,
fps: 30,
duration: 5,
suffix: '-artwork',
};
const sketch = () => {
return ({ context, width, height, time }) => {
const ctx = context;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);
// ... drawing with Canvas 2D API ...
};
};
canvasSketch(sketch, settings);
// Export: Ctrl+Shift+S for PNG, or --stream flag for MP4
```
---
## 3. SVG Generation
### Programmatic SVG in JavaScript
```javascript
function createSVG(width, height) {
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
svg.setAttribute('xmlns', NS);
return svg;
}
function addPath(svg, d, attrs = {}) {
const NS = 'http://www.w3.org/2000/svg';
const path = document.createElementNS(NS, 'path');
path.setAttribute('d', d);
for (const [k, v] of Object.entries(attrs)) {
path.setAttribute(k, v);
}
svg.appendChild(path);
return path;
}
// Serialize to string
function svgToString(svg) {
return new XMLSerializer().serializeToString(svg);
}
```
### SVG Path Commands Reference
| Command | Name | Syntax | Notes |
|---------|------|--------|-------|
| `M x y` | Move to | Absolute | Start new subpath |
| `m dx dy` | Move to | Relative | |
| `L x y` | Line to | Absolute | Straight line |
| `l dx dy` | Line to | Relative | |
| `H x` | Horizontal line | Absolute | |
| `h dx` | Horizontal line | Relative | |
| `V y` | Vertical line | Absolute | |
| `v dy` | Vertical line | Relative | |
| `C x1 y1 x2 y2 x y` | Cubic bezier | 2 control points + endpoint |
| `c dx1 dy1 dx2 dy2 dx dy` | Cubic bezier | Relative |
| `S x2 y2 x y` | Smooth cubic | Reflects previous control point |
| `Q x1 y1 x y` | Quadratic bezier | 1 control point + endpoint |
| `T x y` | Smooth quadratic | Reflects previous control point |
| `A rx ry rot large-arc sweep x y` | Arc | Elliptical arc |
| `Z` | Close path | Back to subpath start |
### Generative SVG Patterns
```javascript
// Generative organic blob
function blob(cx, cy, radius, points = 8, variance = 0.3) {
const pts = [];
for (let i = 0; i < points; i++) {
const angle = (i / points) * Math.PI * 2;
const r = radius * (1 + (Math.random() - 0.5) * variance);
pts.push([
cx + Math.cos(angle) * r,
cy + Math.sin(angle) * r,
]);
}
return smoothClosedPath(pts);
}
// Convert points to smooth cubic bezier closed path
function smoothClosedPath(points) {
const n = points.length;
let d = `M ${points[0][0]} ${points[0][1]}`;
for (let i = 0; i < n; i++) {
const curr = points[i];
const next = points[(i + 1) % n];
const prev = points[(i - 1 + n) % n];
const next2 = points[(i + 2) % n];
const cp1x = curr[0] + (next[0] - prev[0]) / 6;
const cp1y = curr[1] + (next[1] - prev[1]) / 6;
const cp2x = next[0] - (next2[0] - curr[0]) / 6;
const cp2y = next[1] - (next2[1] - curr[1]) / 6;
d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${next[0]} ${next[1]}`;
}
return d + ' Z';
}
// Generative line hatching
function hatchRect(x, y, w, h, angle, spacing) {
const paths = [];
const cos = Math.cos(angle);
const sin = Math.sin(angle);
const diag = Math.sqrt(w * w + h * h);
for (let d = -diag; d < diag; d += spacing) {
const x1 = x + d * cos - diag * sin;
const y1 = y + d * sin + diag * cos;
const x2 = x + d * cos + diag * sin;
const y2 = y + d * sin - diag * cos;
// Clip to rect bounds and add to paths
paths.push(`M ${x1} ${y1} L ${x2} ${y2}`);
}
return paths.join(' ');
}
```
### SVG Filters for Generative Effects
```xml
```
### SVG Animation
```xml
```
### SVG Optimization (SVGO)
```bash
# Install
npm install -g svgo
# Optimize single file
svgo input.svg -o output.svg
# Batch optimize
svgo -f ./input-dir -o ./output-dir
# Preserve viewBox, remove dimensions (responsive)
svgo input.svg -o output.svg --config='{ "plugins": [
{ "name": "removeDimensions" },
{ "name": "removeViewBox", "active": false }
]}'
```
---
## 4. GLSL Shaders
### Shader Boilerplate (Standalone WebGL)
```glsl
// --- Vertex Shader ---
attribute vec2 aPosition;
varying vec2 vUv;
void main() {
vUv = aPosition * 0.5 + 0.5;
gl_Position = vec4(aPosition, 0.0, 1.0);
}
// --- Fragment Shader ---
precision highp float;
uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;
varying vec2 vUv;
void main() {
vec2 uv = gl_FragCoord.xy / uResolution;
// ... shader logic ...
gl_FragColor = vec4(col, 1.0);
}
```
### Common Uniforms
```glsl
uniform float uTime; // seconds elapsed
uniform vec2 uResolution; // canvas pixel dimensions
uniform vec2 uMouse; // mouse position (normalized or pixels)
uniform float uFrame; // frame counter
uniform sampler2D uTexture; // texture input
```
### Hash / Random Functions
```glsl
// 1D hash
float hash(float n) {
return fract(sin(n) * 43758.5453123);
}
// 2D hash
float hash(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}
// 2D -> 2D hash
vec2 hash2(vec2 p) {
p = vec2(dot(p, vec2(127.1, 311.7)),
dot(p, vec2(269.5, 183.3)));
return fract(sin(p) * 43758.5453123);
}
```
### Value Noise
```glsl
float valueNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f); // smoothstep
return mix(
mix(hash(i + vec2(0, 0)), hash(i + vec2(1, 0)), u.x),
mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x),
u.y
);
}
```
### Simplex Noise (2D)
```glsl
// Credit: Stefan Gustavson, Ian McEwan (MIT)
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
float snoise(vec2 v) {
const vec4 C = vec4(
0.211324865405187, // (3.0-sqrt(3.0))/6.0
0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
-0.577350269189626, // -1.0 + 2.0 * C.x
0.024390243902439); // 1.0 / 41.0
vec2 i = floor(v + dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod289(i);
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(
dot(x0, x0),
dot(x12.xy, x12.xy),
dot(x12.zw, x12.zw)
), 0.0);
m = m * m;
m = m * m;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
```
### FBM (Fractal Brownian Motion)
```glsl
float fbm(vec2 p, int octaves) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for (int i = 0; i < 8; i++) { // max octaves = 8
if (i >= octaves) break;
value += amplitude * snoise(p * frequency);
frequency *= 2.0; // lacunarity
amplitude *= 0.5; // gain / persistence
}
return value;
}
```
### Domain Warping
```glsl
// Single warp
float warpedNoise(vec2 p) {
vec2 q = vec2(
fbm(p + vec2(0.0, 0.0), 4),
fbm(p + vec2(5.2, 1.3), 4)
);
return fbm(p + 4.0 * q, 4);
}
// Double warp (Inigo Quilez technique)
float doubleWarp(vec2 p) {
vec2 q = vec2(
fbm(p + vec2(0.0, 0.0), 4),
fbm(p + vec2(5.2, 1.3), 4)
);
vec2 r = vec2(
fbm(p + 4.0 * q + vec2(1.7, 9.2), 4),
fbm(p + 4.0 * q + vec2(8.3, 2.8), 4)
);
return fbm(p + 4.0 * r, 4);
}
```
### Worley / Cellular Noise
```glsl
float worley(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float minDist = 1.0;
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 neighbor = vec2(float(x), float(y));
vec2 point = hash2(i + neighbor);
vec2 diff = neighbor + point - f;
float dist = length(diff);
minDist = min(minDist, dist);
}
}
return minDist;
}
// F2 - F1 for cell edges
float worleyEdge(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float f1 = 1.0, f2 = 1.0;
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 neighbor = vec2(float(x), float(y));
vec2 point = hash2(i + neighbor);
float dist = length(neighbor + point - f);
if (dist < f1) { f2 = f1; f1 = dist; }
else if (dist < f2) { f2 = dist; }
}
}
return f2 - f1;
}
```
### 2D SDF Primitives
```glsl
float sdCircle(vec2 p, float r) {
return length(p) - r;
}
float sdBox(vec2 p, vec2 b) {
vec2 d = abs(p) - b;
return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}
float sdSegment(vec2 p, vec2 a, vec2 b) {
vec2 pa = p - a, ba = b - a;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
return length(pa - ba * h);
}
float sdEquilateralTriangle(vec2 p, float r) {
const float k = sqrt(3.0);
p.x = abs(p.x) - r;
p.y = p.y + r / k;
if (p.x + k * p.y > 0.0) p = vec2(p.x - k*p.y, -k*p.x - p.y) / 2.0;
p.x -= clamp(p.x, -2.0*r, 0.0);
return -length(p) * sign(p.y);
}
```
### 3D SDF Primitives
```glsl
float sdSphere(vec3 p, float r) { return length(p) - r; }
float sdBox(vec3 p, vec3 b) {
vec3 q = abs(p) - b;
return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}
float sdTorus(vec3 p, vec2 t) {
vec2 q = vec2(length(p.xz) - t.x, p.y);
return length(q) - t.y;
}
float sdCapsule(vec3 p, vec3 a, vec3 b, float r) {
vec3 pa = p - a, ba = b - a;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
return length(pa - ba * h) - r;
}
float sdRoundBox(vec3 p, vec3 b, float r) {
vec3 q = abs(p) - b + r;
return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0) - r;
}
float sdOctahedron(vec3 p, float s) {
p = abs(p);
float m = p.x + p.y + p.z - s;
vec3 q;
if (3.0*p.x < m) q = p.xyz;
else if (3.0*p.y < m) q = p.yzx;
else if (3.0*p.z < m) q = p.zxy;
else return m * 0.57735027;
float k = clamp(0.5*(q.z - q.y + s), 0.0, s);
return length(vec3(q.x, q.y - s + k, q.z - k));
}
```
### SDF Operations
```glsl
// Boolean
float opUnion(float a, float b) { return min(a, b); }
float opSubtract(float a, float b) { return max(-a, b); }
float opIntersect(float a, float b) { return max(a, b); }
// Smooth boolean
float opSmoothUnion(float a, float b, float k) {
k *= 4.0;
float h = max(k - abs(a - b), 0.0);
return min(a, b) - h*h*0.25/k;
}
float opSmoothSubtract(float a, float b, float k) {
return -opSmoothUnion(a, -b, k);
}
// Transform
float opRound(float d, float r) { return d - r; }
float opOnion(float d, float t) { return abs(d) - t; }
// Repetition
vec3 opRepeat(vec3 p, vec3 s) { return p - s * round(p / s); }
vec3 opRepeatLimited(vec3 p, float s, vec3 lim) {
return p - s * clamp(round(p / s), -lim, lim);
}
// Twist
vec3 opTwist(vec3 p, float k) {
float c = cos(k * p.y);
float s = sin(k * p.y);
mat2 m = mat2(c, -s, s, c);
return vec3(m * p.xz, p.y);
}
```
### Ray Marching Template
```glsl
#define MAX_STEPS 100
#define MAX_DIST 100.0
#define SURF_DIST 0.001
float map(vec3 p) {
float sphere = sdSphere(p - vec3(0, 1, 0), 1.0);
float plane = p.y;
return opSmoothUnion(sphere, plane, 0.5);
}
float rayMarch(vec3 ro, vec3 rd) {
float d = 0.0;
for (int i = 0; i < MAX_STEPS; i++) {
vec3 p = ro + rd * d;
float ds = map(p);
d += ds;
if (d > MAX_DIST || ds < SURF_DIST) break;
}
return d;
}
vec3 getNormal(vec3 p) {
vec2 e = vec2(0.001, 0.0);
return normalize(vec3(
map(p + e.xyy) - map(p - e.xyy),
map(p + e.yxy) - map(p - e.yxy),
map(p + e.yyx) - map(p - e.yyx)
));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
// Camera
vec3 ro = vec3(0, 2, -5); // ray origin
vec3 rd = normalize(vec3(uv, 1.0)); // ray direction
float d = rayMarch(ro, rd);
vec3 col = vec3(0.0);
if (d < MAX_DIST) {
vec3 p = ro + rd * d;
vec3 n = getNormal(p);
vec3 lightDir = normalize(vec3(1, 2, -1));
float diff = max(dot(n, lightDir), 0.0);
col = vec3(1.0, 0.8, 0.6) * diff;
}
fragColor = vec4(col, 1.0);
}
```
### Color Blending in Shaders
```glsl
// Palette function (Inigo Quilez)
vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
return a + b * cos(6.28318 * (c * t + d));
}
// Common palettes:
// Rainbow: palette(t, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0, 0.33, 0.67))
// Sunset: palette(t, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0, 0.1, 0.2))
// Ocean: palette(t, vec3(0.5), vec3(0.5), vec3(1.0, 1.0, 0.5), vec3(0.8, 0.9, 0.3))
// Fire: palette(t, vec3(0.5,0.5,0.3), vec3(0.5,0.5,0.3), vec3(1.0), vec3(0.0,0.1,0.2))
// OKLAB blending in GLSL (see color section below for conversion functions)
vec3 blendOklab(vec3 rgb1, vec3 rgb2, float t) {
vec3 lab1 = linearSRGBToOklab(rgb1);
vec3 lab2 = linearSRGBToOklab(rgb2);
vec3 mixed = mix(lab1, lab2, t);
return oklabToLinearSRGB(mixed);
}
```
---
## 5. Procedural Generation Algorithms
### Perlin / Simplex Noise (JavaScript)
```javascript
// Use a library: npm install simplex-noise
import { createNoise2D, createNoise3D, createNoise4D } from 'simplex-noise';
const noise2D = createNoise2D(); // returns -1..1
const noise3D = createNoise3D();
const noise4D = createNoise4D();
// With seeded random
import { createNoise2D } from 'simplex-noise';
import alea from 'alea';
const prng = alea('my-seed');
const noise2D = createNoise2D(prng);
```
### FBM (JavaScript)
```javascript
function fbm(x, y, octaves = 6, lacunarity = 2.0, gain = 0.5) {
let value = 0;
let amplitude = 1.0;
let frequency = 1.0;
let maxValue = 0;
for (let i = 0; i < octaves; i++) {
value += amplitude * noise2D(x * frequency, y * frequency);
maxValue += amplitude;
frequency *= lacunarity;
amplitude *= gain;
}
return value / maxValue; // normalize to -1..1
}
```
### Domain Warping (JavaScript)
```javascript
function domainWarp(x, y, scale = 0.005, warpStrength = 100) {
const qx = fbm(x * scale, y * scale, 4);
const qy = fbm(x * scale + 5.2, y * scale + 1.3, 4);
return fbm(
(x + warpStrength * qx) * scale,
(y + warpStrength * qy) * scale,
4
);
}
// Double warp for more organic patterns
function doubleWarp(x, y, scale = 0.005) {
const q = [
fbm(x * scale, y * scale, 4),
fbm(x * scale + 5.2, y * scale + 1.3, 4),
];
const r = [
fbm((x + 100 * q[0]) * scale + 1.7, (y + 100 * q[1]) * scale + 9.2, 4),
fbm((x + 100 * q[0]) * scale + 8.3, (y + 100 * q[1]) * scale + 2.8, 4),
];
return fbm(
(x + 100 * r[0]) * scale,
(y + 100 * r[1]) * scale,
4
);
}
```
### Ridged Noise
```javascript
function ridgedNoise(x, y, octaves = 6) {
let value = 0;
let amplitude = 1.0;
let frequency = 1.0;
let weight = 1.0;
for (let i = 0; i < octaves; i++) {
let signal = noise2D(x * frequency, y * frequency);
signal = 1.0 - Math.abs(signal); // create ridges
signal *= signal; // sharpen
signal *= weight;
weight = Math.min(1.0, Math.max(0.0, signal * 2.0));
value += signal * amplitude;
frequency *= 2.0;
amplitude *= 0.5;
}
return value;
}
```
### Flow Fields
```javascript
class FlowField {
constructor(cols, rows, noiseScale = 0.1) {
this.cols = cols;
this.rows = rows;
this.field = new Float32Array(cols * rows);
this.noiseScale = noiseScale;
}
update(time = 0) {
for (let y = 0; y < this.rows; y++) {
for (let x = 0; x < this.cols; x++) {
const angle = noise2D(
x * this.noiseScale,
y * this.noiseScale + time * 0.2
) * Math.PI * 2;
this.field[y * this.cols + x] = angle;
}
}
}
getAngle(x, y) {
const col = Math.floor(x) % this.cols;
const row = Math.floor(y) % this.rows;
return this.field[row * this.cols + col];
}
}
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.prevX = x;
this.prevY = y;
this.speed = 2;
}
follow(field) {
this.prevX = this.x;
this.prevY = this.y;
const angle = field.getAngle(this.x, this.y);
this.x += Math.cos(angle) * this.speed;
this.y += Math.sin(angle) * this.speed;
}
edges(w, h) {
if (this.x < 0 || this.x > w || this.y < 0 || this.y > h) {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.prevX = this.x;
this.prevY = this.y;
}
}
}
// p5.js usage
const field = new FlowField(80, 80, 0.05);
const particles = Array.from({ length: 1000 },
() => new Particle(random(width), random(height))
);
function draw() {
field.update(frameCount * 0.01);
for (const p of particles) {
p.follow(field);
p.edges(width, height);
stroke(255, 20);
line(p.prevX, p.prevY, p.x, p.y);
}
}
```
### Poisson Disk Sampling
```javascript
function poissonDisk(width, height, minDist, maxAttempts = 30) {
const cellSize = minDist / Math.SQRT2;
const gridW = Math.ceil(width / cellSize);
const gridH = Math.ceil(height / cellSize);
const grid = new Array(gridW * gridH).fill(null);
const points = [];
const active = [];
function gridIndex(x, y) {
return Math.floor(x / cellSize) + Math.floor(y / cellSize) * gridW;
}
// Seed point
const p0 = { x: width / 2, y: height / 2 };
points.push(p0);
active.push(p0);
grid[gridIndex(p0.x, p0.y)] = p0;
while (active.length > 0) {
const idx = Math.floor(Math.random() * active.length);
const point = active[idx];
let found = false;
for (let n = 0; n < maxAttempts; n++) {
const angle = Math.random() * Math.PI * 2;
const dist = minDist + Math.random() * minDist;
const candidate = {
x: point.x + Math.cos(angle) * dist,
y: point.y + Math.sin(angle) * dist,
};
if (candidate.x < 0 || candidate.x >= width ||
candidate.y < 0 || candidate.y >= height) continue;
const gi = gridIndex(candidate.x, candidate.y);
let ok = true;
// Check neighboring cells
const gx = Math.floor(candidate.x / cellSize);
const gy = Math.floor(candidate.y / cellSize);
for (let dy = -2; dy <= 2 && ok; dy++) {
for (let dx = -2; dx <= 2 && ok; dx++) {
const nx = gx + dx, ny = gy + dy;
if (nx < 0 || nx >= gridW || ny < 0 || ny >= gridH) continue;
const neighbor = grid[nx + ny * gridW];
if (neighbor) {
const d = Math.hypot(candidate.x - neighbor.x,
candidate.y - neighbor.y);
if (d < minDist) ok = false;
}
}
}
if (ok) {
points.push(candidate);
active.push(candidate);
grid[gi] = candidate;
found = true;
break;
}
}
if (!found) active.splice(idx, 1);
}
return points;
}
```
### L-Systems
```javascript
class LSystem {
constructor(axiom, rules, angle = 25) {
this.axiom = axiom;
this.rules = rules; // { 'F': 'FF+[+F-F-F]-[-F+F+F]' }
this.angle = angle * (Math.PI / 180);
this.sentence = axiom;
}
generate(iterations) {
this.sentence = this.axiom;
for (let i = 0; i < iterations; i++) {
let next = '';
for (const ch of this.sentence) {
next += this.rules[ch] || ch;
}
this.sentence = next;
}
return this.sentence;
}
// Returns array of line segments [{x1,y1,x2,y2}]
interpret(startX, startY, stepLen) {
const lines = [];
const stack = [];
let x = startX, y = startY;
let angle = -Math.PI / 2; // start pointing up
for (const ch of this.sentence) {
switch (ch) {
case 'F': {
const nx = x + Math.cos(angle) * stepLen;
const ny = y + Math.sin(angle) * stepLen;
lines.push({ x1: x, y1: y, x2: nx, y2: ny });
x = nx; y = ny;
break;
}
case '+': angle += this.angle; break;
case '-': angle -= this.angle; break;
case '[': stack.push({ x, y, angle }); break;
case ']': {
const state = stack.pop();
x = state.x; y = state.y; angle = state.angle;
break;
}
}
}
return lines;
}
}
// Classic trees
const tree = new LSystem('F', { 'F': 'FF+[+F-F-F]-[-F+F+F]' }, 22.5);
tree.generate(4);
// Koch curve
const koch = new LSystem('F', { 'F': 'F+F-F-F+F' }, 90);
// Sierpinski triangle
const sierpinski = new LSystem('F-G-G', {
'F': 'F-G+F+G-F',
'G': 'GG'
}, 120);
// Dragon curve
const dragon = new LSystem('FX', {
'X': 'X+YF+',
'Y': '-FX-Y'
}, 90);
```
### Cellular Automata (Game of Life)
```javascript
class CellularAutomata {
constructor(width, height) {
this.w = width;
this.h = height;
this.grid = new Uint8Array(width * height);
this.next = new Uint8Array(width * height);
}
randomize(density = 0.3) {
for (let i = 0; i < this.grid.length; i++) {
this.grid[i] = Math.random() < density ? 1 : 0;
}
}
step() {
for (let y = 0; y < this.h; y++) {
for (let x = 0; x < this.w; x++) {
const neighbors = this.countNeighbors(x, y);
const idx = y * this.w + x;
const alive = this.grid[idx];
// Conway's Game of Life rules
if (alive && (neighbors < 2 || neighbors > 3)) {
this.next[idx] = 0;
} else if (!alive && neighbors === 3) {
this.next[idx] = 1;
} else {
this.next[idx] = this.grid[idx];
}
}
}
[this.grid, this.next] = [this.next, this.grid];
}
countNeighbors(x, y) {
let count = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const nx = (x + dx + this.w) % this.w;
const ny = (y + dy + this.h) % this.h;
count += this.grid[ny * this.w + nx];
}
}
return count;
}
}
```
### Voronoi Diagram (Fortune's Algorithm Alternative -- Brute Force)
```javascript
// For production use: npm install d3-delaunay
import { Delaunay } from 'd3-delaunay';
// Generate Voronoi from random points
const points = Array.from({ length: 50 }, () => [
Math.random() * width,
Math.random() * height,
]);
const delaunay = Delaunay.from(points);
const voronoi = delaunay.voronoi([0, 0, width, height]);
// Iterate cells
for (let i = 0; i < points.length; i++) {
const cell = voronoi.cellPolygon(i);
if (!cell) continue;
// cell is array of [x,y] vertices (closed polygon)
// Draw with canvas, SVG, etc.
}
// Delaunay triangles
for (let i = 0; i < delaunay.triangles.length; i += 3) {
const p0 = points[delaunay.triangles[i]];
const p1 = points[delaunay.triangles[i + 1]];
const p2 = points[delaunay.triangles[i + 2]];
// Draw triangle
}
// Lloyd relaxation (makes cells more even)
function lloydRelax(points, bounds, iterations = 3) {
let pts = [...points];
for (let i = 0; i < iterations; i++) {
const d = Delaunay.from(pts);
const v = d.voronoi(bounds);
pts = pts.map((_, j) => {
const cell = v.cellPolygon(j);
if (!cell) return pts[j];
// Centroid of polygon
let cx = 0, cy = 0;
for (let k = 0; k < cell.length - 1; k++) {
cx += cell[k][0];
cy += cell[k][1];
}
return [cx / (cell.length - 1), cy / (cell.length - 1)];
});
}
return pts;
}
```
### Wave Function Collapse (Simple Tiled)
```javascript
class WFC {
constructor(tiles, adjacency, width, height) {
this.tiles = tiles; // array of tile IDs
this.adj = adjacency; // { tileId: { up: [...], down: [...], left: [...], right: [...] } }
this.w = width;
this.h = height;
// Each cell starts with all tiles possible
this.grid = Array.from({ length: width * height },
() => new Set(tiles)
);
}
entropy(idx) {
return this.grid[idx].size;
}
// Find cell with lowest entropy > 1
findLowestEntropy() {
let minE = Infinity, minIdx = -1;
for (let i = 0; i < this.grid.length; i++) {
const e = this.grid[i].size;
if (e > 1 && e < minE) {
minE = e;
minIdx = i;
}
}
return minIdx;
}
collapse(idx) {
const options = [...this.grid[idx]];
const chosen = options[Math.floor(Math.random() * options.length)];
this.grid[idx] = new Set([chosen]);
return chosen;
}
propagate(idx) {
const stack = [idx];
while (stack.length > 0) {
const current = stack.pop();
const x = current % this.w;
const y = Math.floor(current / this.w);
const currentTiles = this.grid[current];
const neighbors = [
{ dx: 0, dy: -1, dir: 'up', opp: 'down' },
{ dx: 0, dy: 1, dir: 'down', opp: 'up' },
{ dx: -1, dy: 0, dir: 'left', opp: 'right' },
{ dx: 1, dy: 0, dir: 'right', opp: 'left' },
];
for (const { dx, dy, dir } of neighbors) {
const nx = x + dx, ny = y + dy;
if (nx < 0 || nx >= this.w || ny < 0 || ny >= this.h) continue;
const ni = ny * this.w + nx;
const neighborPossible = this.grid[ni];
const prevSize = neighborPossible.size;
// Compute allowed tiles for neighbor
const allowed = new Set();
for (const t of currentTiles) {
for (const a of (this.adj[t]?.[dir] || [])) {
allowed.add(a);
}
}
// Intersect
for (const t of neighborPossible) {
if (!allowed.has(t)) neighborPossible.delete(t);
}
if (neighborPossible.size < prevSize) {
stack.push(ni);
}
}
}
}
solve() {
while (true) {
const idx = this.findLowestEntropy();
if (idx === -1) break; // all collapsed
this.collapse(idx);
this.propagate(idx);
}
return this.grid.map(s => [...s][0]);
}
}
```
### Terrain with Noise Octaves
```javascript
function generateTerrain(width, height, options = {}) {
const {
octaves = 6,
lacunarity = 2.0,
gain = 0.5,
scale = 0.005,
exponent = 1.5, // redistribution power
seed = 'terrain',
} = options;
const prng = alea(seed);
const noise = createNoise2D(prng);
const data = new Float32Array(width * height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const nx = x * scale - 0.5;
const ny = y * scale - 0.5;
let e = 0, amplitude = 1, frequency = 1, maxAmp = 0;
for (let i = 0; i < octaves; i++) {
e += amplitude * noise(nx * frequency, ny * frequency);
maxAmp += amplitude;
frequency *= lacunarity;
amplitude *= gain;
}
e = (e / maxAmp + 1) * 0.5; // normalize to 0..1
e = Math.pow(e, exponent); // redistribute
data[y * width + x] = e;
}
}
return data;
}
// Biome from elevation + moisture
function biome(e, m) {
if (e < 0.1) return 'DEEP_WATER';
if (e < 0.15) return 'WATER';
if (e < 0.18) return 'BEACH';
if (e > 0.8) {
if (m < 0.2) return 'SCORCHED';
if (m < 0.5) return 'BARE';
return 'SNOW';
}
if (e > 0.6) {
if (m < 0.33) return 'SHRUBLAND';
return 'FOREST';
}
if (m < 0.16) return 'DESERT';
if (m < 0.5) return 'GRASSLAND';
return 'RAINFOREST';
}
```
### Seamless Tiling (Cylindrical / Toroidal Noise)
```javascript
// Wrap noise seamlessly by mapping to higher dimensions
function torusNoise(nx, ny, noise4D) {
const TAU = Math.PI * 2;
return noise4D(
Math.cos(TAU * nx) / TAU,
Math.sin(TAU * nx) / TAU,
Math.cos(TAU * ny) / TAU,
Math.sin(TAU * ny) / TAU
);
}
// Scale output by sqrt(2) to compensate for 4D range narrowing
```
---
## 6. Color Theory for Generative Art
> For CSS color, accessibility, design tokens, and gamut details, see `color-ops`.
### OKLAB / OKLCH Conversion (JavaScript)
```javascript
function linearSRGBToOklab(r, g, b) {
const l = 0.4122214708*r + 0.5363325363*g + 0.0514459929*b;
const m = 0.2119034982*r + 0.6806995451*g + 0.1073969566*b;
const s = 0.0883024619*r + 0.2817188376*g + 0.6299787005*b;
const l_ = Math.cbrt(l), m_ = Math.cbrt(m), s_ = Math.cbrt(s);
return {
L: 0.2104542553*l_ + 0.7936177850*m_ - 0.0040720468*s_,
a: 1.9779984951*l_ - 2.4285922050*m_ + 0.4505937099*s_,
b: 0.0259040371*l_ + 0.7827717662*m_ - 0.8086757660*s_,
};
}
function oklabToLinearSRGB(L, a, b) {
const l_ = L + 0.3963377774*a + 0.2158037573*b;
const m_ = L - 0.1055613458*a - 0.0638541728*b;
const s_ = L - 0.0894841775*a - 1.2914855480*b;
return {
r: +4.0767416621*l_**3 - 3.3077115913*m_**3 + 0.2309699292*s_**3,
g: -1.2684380046*l_**3 + 2.6097574011*m_**3 - 0.3413193965*s_**3,
b: -0.0041960863*l_**3 - 0.7034186147*m_**3 + 1.7076147010*s_**3,
};
}
function oklabToOklch({ L, a, b }) {
return { L, C: Math.hypot(a, b), h: Math.atan2(b, a) * 180 / Math.PI };
}
function oklchToOklab({ L, C, h }) {
const rad = h * Math.PI / 180;
return { L, a: C * Math.cos(rad), b: C * Math.sin(rad) };
}
```
### OKLAB / OKLCH Conversion (GLSL)
```glsl
vec3 linearSRGBToOklab(vec3 c) {
vec3 lms = vec3(
dot(c, vec3(0.4122214708, 0.5363325363, 0.0514459929)),
dot(c, vec3(0.2119034982, 0.6806995451, 0.1073969566)),
dot(c, vec3(0.0883024619, 0.2817188376, 0.6299787005))
);
lms = sign(lms) * pow(abs(lms), vec3(1.0/3.0));
return vec3(
dot(lms, vec3(0.2104542553, 0.7936177850, -0.0040720468)),
dot(lms, vec3(1.9779984951, -2.4285922050, 0.4505937099)),
dot(lms, vec3(0.0259040371, 0.7827717662, -0.8086757660))
);
}
vec3 oklabToLinearSRGB(vec3 lab) {
vec3 lms = vec3(
lab.x + 0.3963377774*lab.y + 0.2158037573*lab.z,
lab.x - 0.1055613458*lab.y - 0.0638541728*lab.z,
lab.x - 0.0894841775*lab.y - 1.2914855480*lab.z
);
return vec3(
dot(lms*lms*lms, vec3(4.0767416621, -3.3077115913, 0.2309699292)),
dot(lms*lms*lms, vec3(-1.2684380046, 2.6097574011, -0.3413193965)),
dot(lms*lms*lms, vec3(-0.0041960863, -0.7034186147, 1.7076147010))
);
}
```
### Palette Generation Algorithms
```javascript
// Cosine palette (port of Inigo Quilez technique)
function cosinePalette(t, a, b, c, d) {
return [
a[0] + b[0] * Math.cos(Math.PI * 2 * (c[0] * t + d[0])),
a[1] + b[1] * Math.cos(Math.PI * 2 * (c[1] * t + d[1])),
a[2] + b[2] * Math.cos(Math.PI * 2 * (c[2] * t + d[2])),
];
}
// Presets (a, b, c, d)
const PALETTES = {
rainbow: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,1], [0, 0.33, 0.67]],
sunset: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,1], [0, 0.1, 0.2]],
ocean: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,0.5], [0.8, 0.9, 0.3]],
fire: [[0.5,0.5,0.3], [0.5,0.5,0.3], [1,1,1], [0, 0.1, 0.2]],
electric: [[0.5,0.5,0.5], [0.5,0.5,0.5], [2,1,0], [0.5, 0.2, 0.25]],
forest: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,0.7,0.4], [0, 0.15, 0.2]],
};
// Usage: get color at position t (0..1) along palette
const [r, g, b] = cosinePalette(0.5, ...PALETTES.sunset);
```
### OKLCH Palette Generation
```javascript
// Perceptually uniform palette with fixed lightness
function oklchPalette(count, L = 0.7, C = 0.15, hueOffset = 0) {
return Array.from({ length: count }, (_, i) => {
const h = (hueOffset + (i / count) * 360) % 360;
return { L, C, h };
});
}
// Analogous palette (clustered hues)
function analogousPalette(baseHue, count = 5, spread = 30, L = 0.7, C = 0.15) {
return Array.from({ length: count }, (_, i) => {
const t = i / (count - 1) - 0.5; // -0.5 to 0.5
return { L, C, h: (baseHue + t * spread + 360) % 360 };
});
}
// Warm/cool palette
function warmCoolPalette(count = 6) {
return Array.from({ length: count }, (_, i) => {
const t = i / (count - 1);
return {
L: 0.5 + t * 0.3,
C: 0.12 + Math.sin(t * Math.PI) * 0.06,
h: 20 + t * 220, // warm orange -> cool blue
};
});
}
```
### Gradient Interpolation in Perceptual Space
```javascript
// Interpolate in OKLAB (no hue discontinuity issues)
function lerpOklab(lab1, lab2, t) {
return {
L: lab1.L + (lab2.L - lab1.L) * t,
a: lab1.a + (lab2.a - lab1.a) * t,
b: lab1.b + (lab2.b - lab1.b) * t,
};
}
// Interpolate in OKLCH with shortest hue path
function lerpOklch(lch1, lch2, t) {
let dh = lch2.h - lch1.h;
if (dh > 180) dh -= 360;
if (dh < -180) dh += 360;
return {
L: lch1.L + (lch2.L - lch1.L) * t,
C: lch1.C + (lch2.C - lch1.C) * t,
h: (lch1.h + dh * t + 360) % 360,
};
}
// Multi-stop gradient
function multiStopGradient(stops, t) {
// stops: [{pos: 0, color: {L,C,h}}, {pos: 0.5, ...}, {pos: 1, ...}]
if (t <= stops[0].pos) return stops[0].color;
if (t >= stops[stops.length - 1].pos) return stops[stops.length - 1].color;
for (let i = 0; i < stops.length - 1; i++) {
if (t >= stops[i].pos && t <= stops[i + 1].pos) {
const localT = (t - stops[i].pos) / (stops[i + 1].pos - stops[i].pos);
return lerpOklch(stops[i].color, stops[i + 1].color, localT);
}
}
}
```
### Color Cycling
```javascript
// Smooth cycling through a palette
function cyclePalette(palette, t, speed = 1.0) {
const idx = (t * speed) % palette.length;
const i = Math.floor(idx);
const frac = idx - i;
const c1 = palette[i % palette.length];
const c2 = palette[(i + 1) % palette.length];
return lerpOklch(c1, c2, frac);
}
// Phase-shifted cycling (each element gets different phase)
function phasedColor(palette, t, elementIndex, phaseSpread = 0.1) {
return cyclePalette(palette, t + elementIndex * phaseSpread);
}
```
### Harmony Rules in OKLCH
```javascript
function colorHarmonies(baseHue, L = 0.65, C = 0.15) {
const h = baseHue;
return {
complementary: [{ L, C, h }, { L, C, h: (h + 180) % 360 }],
analogous: [{ L, C, h: (h - 30 + 360) % 360 }, { L, C, h }, { L, C, h: (h + 30) % 360 }],
triadic: [{ L, C, h }, { L, C, h: (h + 120) % 360 }, { L, C, h: (h + 240) % 360 }],
splitComplementary: [{ L, C, h }, { L, C, h: (h + 150) % 360 }, { L, C, h: (h + 210) % 360 }],
tetradic: [{ L, C, h }, { L, C, h: (h + 90) % 360 }, { L, C, h: (h + 180) % 360 }, { L, C, h: (h + 270) % 360 }],
};
}
```
---
## 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 |
## See Also
- `color-ops` - CSS color, accessibility, design tokens, palette scripts
- `javascript-ops` - JS async patterns, modules, ES2024+ features
- [Book of Shaders](https://thebookofshaders.com/) - GLSL fundamentals
- [Shadertoy](https://www.shadertoy.com/) - Live shader playground
- [Inigo Quilez articles](https://iquilezles.org/articles/) - SDF, noise, ray marching
- [LYGIA](https://lygia.xyz/) - Cross-platform shader library
- [Red Blob Games](https://www.redblobgames.com/) - Procedural generation algorithms