Skip to main content

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!


Comments

Popular posts from this blog

2014 in Photos

The year of 2014 is over; the year of 2015 has begun. Over the past year, I took a lot of pictures - more than 1200 photos of clouds, bugs, plants, rocks, and more. I deleted most of the low-quality and repetitive photos. Then, I selected 20 of the remaining photos which I thought were the most interesting or significant. In this post, I'll include those photos, in chronological order. Spring 1. Cold Hummingbird I took this photo after a late snowstorm in Spring. In the days leading up to the storm, it was warm and sunny and the fields were green, so the snow came rather unexpectedly. During the storm, one of the hummingbirds at our feeder was covered in ice and could barely fly. This hummingbird was more fortunate, but unlucky nevertheless. 2. Green Landscape I took this photo on the side of a biking trail. I didn't edit or crop the photo - this is how it looked. 3. Indian Paintbrush The Indian Paintbrush is an unusual flower. What appear to be flower petals are actually brigh...

Nature Wallpaper

I collected 12 of the highest-resolution, best-quality photographs of nature I've taken over the past few years, cropped them to highlight the important parts, and then applied JPEG compression. Now I'm releasing them for my blog readers to enjoy as a desktop background. To download as a .zip file, click here . Note that the photos shown in this post are low-resolution previews. If you have any questions about the wallpaper, please comment! New posts every month -  subscribe for free !

Which Hurts More?

212° F Let's play a little game. I'll list a bunch of possible actions. Each action will have 2 variations, (a) and (b). You choose either (a) or (b), depending on which would be safer (or less painful). Each of the questions will involve an oven hot enough to bake a cake (350° F), and a pot of boiling water (assume we're at sea level). So... would you rather: 1.     (a) Stick your hand in the oven     (b) Stick your hand in the boiling water   ... for a period of 10 seconds 2.     (a) Leave a fork in the oven     (b) Leave a fork in boiling water   ... for a period of 15 minutes. Then hold the fork tight with your bare hand. 3. Fill a jar to the top with cool tap water. Then:    (a) Place the jar in the oven    (b) Place the jar in the boiling water   ... for a specific, but unknown, period of time. Then remove the jar and put your hand in it. First see if you can figure these out yourself. They shouldn't be too...