Perlin Noise

Today I finished a JavaScript program that will generate random numbers, and then use those numbers to generate Perlin noise.

Perlin noise is like a sort of organic randomness. First I'll explain randomness with regards to computing.

Randomness is very important in the computer industry. Computers use randomness for all kinds of applications, including encryption, artificial intelligence, and computer graphics.

When a human wants to generate a random number, they usually pick whatever pops into their head. It turns out that most people aren't very good at picking random numbers - I once did a small survey and quickly found that certain numbers were more popular than others. Hence, most people must flip quarters or roll dice to find truly random numbers.

It's like that for computers, too. Computers are completely mechanical, and cannot calculate perfectly random numbers on their own. Devices exist that will "flip" virtual quarters (basically read a noisy signal), and send random numbers to computers.

These devices are expensive, so most programmers have to find ways to simulate randomness. Usually, this involves taking a non-random number like 7 or 8 (this is called the "seed"), and then

Somebody's TV broke.

using a little math to scramble it up. If the programmers make sure they don't pick the same number twice, they're good to go. The result is not perfectly random, but it can sure seem like it. This is called "pseudorandomness," and it's used on almost every computer.

Now let's look at computer graphics. Say you want to generate some hazy white clouds in a virtual sky. What do you do? Well, you could look at every point in your virtual sky, and pick a random number to tell how white it is. That's called white noise, and you can see a picture of it to the right. It doesn't look like clouds at all; clouds don't look like random dots.

Is there a better option? Yes! Divide the sky into a grid, and assign a random number to each point. Then, use math to fade between each point.

A similar technique, called Perlin noise, was invented by computer scientist Ken Perlin many years ago. It's more complicated than you might expect; instead of assigning brightness values to each point, Perlin noise assigns gradient vectors - basically little arrows which represent the direction of increasing brightness. Then, it uses a dot product and some math to figure out how bright things should be.

Perlin noise

It looks a lot better, but it's still not quite good enough. So here's what to do: first, copy the Perlin noise a few times. Then, make each copy smaller and dimmer. Finally, add it all together. The result? Something that looks pretty close to a layer of clouds.

Summing it up

Is Perlin noise limited to clouds? No! Perlin noise is used for all sorts of other random patterns and shapes, from mountains to marble to dirt. A 1-dimensional version which looks like a bumpy line can be used for fluctuations in brightness over time, and a slice of a 3-dimensional version can be moved to make clouds change over time. Pretty much every 3D animation you've ever seen has used Perlin noise or one of its variants.

Live example of Perlin noise, automatically generated in real-time in your browser:

New posts every month - subscribe for free!