A naive noise field just assigns unrelated random values to nearby positions. The result is visibly speckled and blocky, which is why Perlin noise replaces raw random values with structured gradient interpolation.
Each sample cell gets a pseudorandom scalar value with no relationship to its neighbors. The seed makes the pattern repeatable, but not smooth.
Adjacent samples jump abruptly, so the image looks like static. There is no continuity, no directional structure, and no smooth transition from one region to the next.
Perlin noise keeps the seedable randomness, but moves it to lattice gradients and blends locally inside each cell. The later slides build that smoother construction step by step.
Perlin noise first assigns a pseudorandom gradient vector to each lattice corner. Focus on one corner contribution at a time: each fine cell shows that corner's dot product over the full lattice, and hovering any sample reveals the exact gradient-and-offset-vector calculation.
Each Perlin sample is influenced by four pseudorandom corner gradient vectors. Here you isolate one of those four dot products and inspect how it changes over every lattice cell.
The teal arrow is the chosen gradient. The orange segment is the offset vector to the selected sample.
Hover any sample to inspect the active corner's contribution in that exact lattice cell.
Compare the two corner dot products that feed one horizontal interpolation. Hover any sample cell and the corresponding location is highlighted across both corner fields and the x-interpolated result.
Choose which horizontal pair to inspect. x1 blends the lower two corner dot products, while x2 blends the upper two.
Once the two horizontal intermediate fields are built, Perlin noise blends them vertically. Hover any sample cell to track how x1 and x2 combine into the final value.
The lower-edge interpolation from d00 and d10.
The upper-edge interpolation from d01 and d11.
The y-direction blend between x1 and x2.
These fields use the same seeded gradient lattice, but the input domain is scaled by different frequencies. Higher frequency means more oscillations across the same image area.
p(x, y)
p(2x, 2y)
p(4x, 4y)
fBM sums multiple octaves of Perlin noise. Compare the single base octave against 3-octave and 5-octave stacks using the standard rule: frequency doubles each octave and amplitude halves each octave.
f(x, y) = p(x, y)
f(x, y) = p(x, y) + 0.5p(2x, 2y) + 0.25p(4x, 4y)
f(x, y) = p(x, y) + 0.5p(2x, 2y) + 0.25p(4x, 4y) + 0.125p(8x, 8y) + 0.0625p(16x, 16y)
The base octave frequencies are the same, but the amplitude weights change. Exponential decay is the common graphics default; linear decay and no decay shift much more energy into the higher frequencies.
a_i = 0.5^i
a_i = 1 - i / N
a_i = 1
The repeated field on the left reuses a non-tileable gradient lattice, so opposite edges disagree. On the right, gradient lookup wraps at the boundary, making the repeated texture continuous across tile edges.
Both images use multiscale summation, but the base signal is different. Perlin-based fBM builds from coherent gradient noise, while the sinusoid-based version is still visibly more periodic even after stacking octaves.
sum 0.5^i * perlin(2^i x)
sum 0.5^i * sin(2^i x + phi_i)