🌀

Procedural

Algorithmic Content Creation

Roadmap topics covered here

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:

Octaves: 5Lacunarity: 2.0

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:

Octaves: 4

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

Smooth blend k = 1.00

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

← ✨ VFX Shader Code ⚡ →

Interactive lessonCanvas visualizersMathematical notation