🌀

Procedural

Algorithmic Content Creation

🦴💎💡✨🌀⚡
Roadmap topics covered here
Full roadmap →

Procedural lessons

Perlin Noise

Algorithm
1. Unit cube containing p 2. Hash 8 corner gradient vectors 3. dot(gi, p-corner) per corner 4. Trilinear interp with smootherstep: smoothstep(t) = 3t^2-2t^3 (C1) smootherstep(t) = 6t^5-15t^4+10t^3 (C2)

Simplex Noise

Simplex
Simplex grid: n+1 vertices (not 2^n) G(p) = Sum max(0, r^2-|p-xi|^2)^4*(gi.(p-xi)) O(n^2) complexity -- no axis artifacts

Interactive: fBm Terrain

fBm stacks noise octaves. More octaves = finer detail. Higher lacunarity = bigger frequency jumps:

Live: Noise Octave Stacking

See each individual octave drawn separately, then their sum at the bottom. Each octave doubles frequency and halves amplitude — their sum is fBm:

Each octave: 2x frequency, 0.5x amplitude. Bottom = their sum = fBm.

Signed Distance Fields

Primitives
Sphere: d=|p|-r Box: d=|max(|p|-b,0)| Union: min(dA,dB) Intersect: max(dA,dB) Subtract: max(dA,-dB) Smooth: smin(a,b,k) = min(a,b)-h^2*k/4

Live: SDF Sphere Marching

SDF Boolean Operations Heatmap

See the distance field as a heatmap. Purple line = surface (d=0). Contour rings show distance values. Switch between union (min), intersect (max), subtract (max,-), and smooth blend:

Purple line=surface(d=0). Rings=distance contours. Inside=negative distance.

Live: Ray Marching Step-by-Step

Each step advances along the ray by exactly the SDF value at the current position — the distance to the nearest surface. This is guaranteed safe because you cannot overshoot. The circles show each step distance:

Step 0
Each circle shows the SDF distance — the guaranteed safe march distance. Click Next to step through the ray march.

Interactive: Worley / Voronoi

Distance combinations produce radically different patterns. F1 = cells, F2-F1 = cracks, F1*F2 = tissue, F2/F1 = scales:

Switch modes to see how distance combinations create cellular patterns

Live: Voronoi Construction Animation

Watch distance fields expand outward from feature points until Voronoi cells form. Each pixel takes the color of its nearest point — this is F1 distance:

Distance fields expand from feature points until Voronoi cells form = F1 nearest distance.

L-Systems and Fractals

L-System
Axiom: F Rule: F -> F[+F]F[-F]F F=draw +=rot+25 -=rot-25 [=push ]=pop
Mandelbrot
z_{n+1} = zn^2 + c escape: |z|>2 Color = iteration count -- infinite detail
← ✨ VFXShader Code ⚡ →
Interactive lessonCanvas visualizersMathematical notation