Scene 01 · Hook
It will never show this frame again.
These contour lines are being computed, not drawn — move your cursor and the terrain bends around it.
Scene 02 · The question
Why does random look wrong?
Drag the divider. Your eye already prefers one side — because nature is correlated, and static is not.
Scene 03 · The journey
The seed line.
Forty years ride one curve — pick a year and the ridge re-seeds to that era.
1983 — The Tron problem
Ken Perlin writes the first gradient noise while working on Tron-era CGI: computers rendered surfaces too perfectly, and nature refused to look like that. Noise gave the machine its first believable texture.
Scene 04 · The people
Four seeds.
Each figure gets a field seeded by their own years — the seed is the portrait.
Ken Perlin
The equation · 1983 / 2001
Invented gradient noise for film, then reinvented it as simplex noise for speed. Everything on this page is his math, still running.
Gustavson & McEwan
The port · 2005 / 2011
Stefan Gustavson demystified simplex on paper; with Ian McEwan he put it on the GPU. They made the field cheap enough to be a background.
Vivo & Lowe
The teachers · 2015
Patricio González Vivo and Jen Lowe wrote The Book of Shaders and called noise “the texture of nature.” A generation of sites learned the grammar from them.
Daniel Shiffman
The popularizer
The Coding Train made noise() the first thing a creative coder ever animates. Millions met the field through his whiteboard.
Scene 05 · Design DNA
The grammar console.
The whole style is five rules. Assemble them yourself and watch a gray rectangle become a world.
Build the style.
Five rules, one surface. Toggle them and watch each one earn its place.
Scene 06 · The archive
Where the field lives.
Start with the whiteboard that taught a generation, then walk the canon.
- The Book of Shaders — ch. 11, Noise (opens in a new tab)The canonical lesson on why noise is the texture of nature.
- webgl-noise (McEwan / Gustavson) (opens in a new tab)The GPU simplex every WebGL site copies.
- “Simplex noise demystified” (2005) (opens in a new tab)Gustavson’s reference explanation, still cited by every port.
- stripe.com (opens in a new tab)The mainstreamed living mesh-gradient hero.
- Active Theory (opens in a new tab)Pointer-reactive noise particle fields at agency scale.
- Lusion (opens in a new tab)Load-gated WebGL noise scenes.
- Shadertoy (opens in a new tab)The field’s public sketchbook.
- “Grainy Gradients” — CSS-Tricks (2021) (opens in a new tab)The article that made the CSS-only version ubiquitous.
Scene 07 · Verdict