~/blog

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.

June 1, 20252 min read
  • Graphics
  • Algorithms
  • Procedural
Share𝕏
Perlin Noise: The Algorithm Behind Procedural Worlds

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
2 min