Friday, January 05, 2007

Perlin Noise - Your New Best Friend

Perlin Noise is a technique to create natural looking textures and movements by using pseudorandom numbers that was designed by a rather clever computer scientist, Ken Perlin, who is a Professor at New York University.

Instead of trying to explain what it is and how it works (aka "reinvent the wheel"), I'll instead point you in the direction of Professor Perlin's own words. Read this; absorb this:

So now that you're familiar with the basics and how things work, here are two more articles about how Perlin Noise can be used and the basic math behind it:

(If these articles are ever taken down, I'll write up something even better here when I have the time.)

Perlin Noise is a marvelous tool for modeling natural structures, as the field it generates is inherently procedural (so we can calculate things at any point simply knowing the seed) and fractal (like many natural structures). Once you're able to master Noise, you'll be able to master some very good-looking visualizations.

Now for my purposes, I took the Improved Noise function that Perlin wrote, himself, and ported it to PHP: - Click on Perlin.class.txt

You'll also note that I put together two additional functions which come in handy when you quickly need less than 3 degrees of noise.

Using the code above, I was able to get the following results when creating an image:

Since the Perlin Noise function gives a number between -1 and 1, inclusive, the picture on the right is divided by two plus one (noise/2+1), where the picture on the left is its absolute value (|noise|).

Now, using this noise function, in our next article we're going to investigate how to decently simulate (for the sake of an RPG) the large-scale structure of the cosmos by modeling the layout of galaxy clusters.


Labels: , ,


Blogger Martin said...

This is excellent. A fast implementation of Perlin noise is not easy, and especially so in PHP.

4:38 AM  
Blogger haroim said...

great php class. Very usefull. But do you know how to make this php function output an seamless picture?

8:02 AM  
Blogger Steve Caruso said...

Because of it's random key limitations, it will become seamless at very large sizes (beyond 512px). However, if you need it to be seamless at smaller intervals, you'd need to alter the algorithm so that it loops it's random keys at the edges of the image.

You can do this by adding a modulus (%) to the noise generator, and I'll post some examples on how to do this later.


6:08 AM  
Blogger haroim said...

I tried it with 512px and 1024px, but it is not seamlessly tiled at these sizes.

I have also tried to ad thise code i found on the web:

function tileableNoise($x, $y, $z, $w, $h)
return ($this->noise($x, $y,0,$smooth) * ($w - $x) * ($h - $y) +
$this->noise($x - $w, $y,0,$smooth) * x * ($h - $y) +
$this->noise($x, $y - $h,0,$smooth) * ($w - $x) * $y +
$this->noise($x - $w, $y - $h,0,$smooth) * $x * $y) / ($w * $h);

but it didn't work.

Is the modules the fmod() function?

7:37 AM  
Blogger haroim said...

if you do not have the time to post a full example, could you give me some hints on wat i could do to make it seamlessly tiled?

For example what parameters would i need to use to make it seamless at large sizes (i tried $gridsize 32,64, 128, 256,512,1024 and $smooth 1,2,4,8,16,42,48,54,60,150,300).

12:28 PM  
Blogger haroim said...

never mind, i found out that this code did work:

function tileableNoise($x, $y, $z,$smooth, $w, $h)
return ($this->noise($x, $y,0,$smooth) * ($w - $x) * ($h - $y) +
$this->noise($x - $w, $y,0,$smooth) * $x * ($h - $y) +
$this->noise($x, $y - $h,0,$smooth) * ($w - $x) * $y +
$this->noise($x - $w, $y - $h,0,$smooth) * $x * $y) / ($w * $h);

i only forgot one $, so it didn't tile.

Thanks for you great php class!

8:32 AM  
Blogger Gabriel said...

Steve, could you rehost your php code? The link is dead :( Thanks!

12:21 AM  
Blogger Chris Mingay said...

I just came looking for this class too and couldn't find it, however I did find a cached version of it and am now hosting it here...

6:18 AM  
Blogger Janos said...

Thanks for the article.

I have created a Gist with the file:

7:21 AM  
Blogger Yoieh said...

//This is a small test snippet that will output an example with DIV tags.
//Feel free to fiddle with it.

that dident work?

7:59 PM  

Post a Comment

<< Home