perlin-noise-explained.md
Perlin Noise: The Algorithm Behind Procedural Worlds
How Ken Perlin's gradient noise creates infinite terrain, clouds, and fire — and why Simplex improved it thirty years later.
- Graphics
- Algorithms
- Procedural
Before Minecraft sold billions of blocks, Ken Perlin needed organic randomness for the 1982 film Tron. Pure random values look like static. Perlin noise looks like nature — smooth, continuous, and tileable.
The core idea
Perlin noise assigns gradient vectors at each integer lattice point, then interpolates dot products for any sample position (x, y, z).
// Conceptual 2D Perlin — simplified
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f); // smoothstep
float a = dot(grad(i), f);
float b = dot(grad(i + vec2(1,0)), f - vec2(1,0));
float c = dot(grad(i + vec2(0,1)), f - vec2(0,1));
float d = dot(grad(i + vec2(1,1)), f - vec2(1,1));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}The magic is coherent interpolation — neighboring samples change gradually, not chaotically.
Octaves and fBm
Real terrain stacks multiple octaves (fractional Brownian motion):
function fbm(x, y, octaves = 6) {
let value = 0, amplitude = 1, frequency = 1, max = 0;
for (let i = 0; i < octaves; i++) {
value += amplitude * noise(x * frequency, y * frequency);
max += amplitude;
amplitude *= 0.5;
frequency *= 2;
}
return value / max;
}Each octave adds detail at half the amplitude and double the frequency — coastlines, then hills, then rocks.
Simplex noise
Classic Perlin has directional artifacts (cube-grid bias). Simplex noise uses a triangular/simplex grid — fewer artifacts, better in high dimensions. Most modern engines default to Simplex or OpenSimplex2.
Where you'll see it
| Domain | Use |
|---|---|
| Game dev | Terrain, caves, biomes |
| VFX | Fire, smoke, water caustics |
| UI | Subtle background motion |
| ML | Data augmentation, generative models |
Takeaway
Perlin noise is a masterclass in structured randomness. Once you understand lattice gradients and interpolation, you unlock an entire class of procedural algorithms — from terrain to turbulence to domain warping.
Related
Continue reading
More notes on similar topics.
Render infinite geometry on a fullscreen triangle — SDFs, sphere tracing, and the shader loop that replaced polygon soup.
- Shaders
- WebGL
B-Trees: Why Every Database Index Looks the Same
May 16, 2025
The data structure behind PostgreSQL, SQLite, and MySQL indexes — balanced trees, page alignment, and why O(log n) isn't enough.
- Databases
- Algorithms
How distributed systems agree on a log when nodes fail — terms, heartbeats, and why Paxos stayed in papers while Raft got textbooks.
- Distributed Systems
- Algorithms