Interactive demo

Perlin Noise

Perlin noise, invented by Ken Perlin in 1983, creates smooth and natural-looking randomness. It is the basis of countless procedural textures, clouds and landscapes.

Your browser does not support the HTML5 canvas tag.

The arrows are the random gradients at the grid points. Switch the interpolation to Linear to see why the fade curve matters.

Controls

Legend

  • Grid point and its gradient

1. A grid of gradients

Every grid point gets a random unit vector, its gradient. The noise is exactly 0 at every grid point; around it, the noise rises in the direction the gradient points to.

2. Dot products

For a point inside a cell, the vectors from the four corners to the point are multiplied with the gradients of the corners (dot product). This gives one value per corner.

3. Smooth blending

The four values are blended with the fade curve 6t⁵ − 15t⁴ + 10t³. Its first and second derivatives are zero at the cell edges, so no creases appear. With linear blending the grid shows clearly.