Visualizing Perlin Noise

This applet uses Processing’s “noise” function. Basically, it generates a bunch of randomly positioned particles. Every particle has a horizontal and vertical velocity component, xv and yv. When each particle is updated, xv is set to cos( noise(x,y)*TWO_PI) and yv is set to sin( noise(x,y)*TWO_PI ). What this is translated to is:

1. Choose a number from perlin noise between 0 and 1.

2. Multiply it by 2π in order to have a new number between 0 and 2π.

3. Take the sine or cosine of that new number depending on whether it is for xv or yv.

So this is what you end up with when you plot a point everywhere the particles go.

Perlin Force

Click to add 500 new particles. Tap any key to clear the screen and generate a new set of perlin noise values.

These are some shots of the basic applet described above along with a few variations that can be produced by modifying the xv and yv values.

About these ads

3 Responses to “Visualizing Perlin Noise”


  1. 1 Insane January 24, 2010 at 7:09 pm

    Link doesn´t work :(

    • 2 Nat January 26, 2010 at 8:45 pm

      Yeah, im having some trouble with the embed code for processing sketches, it seems to only work for chrome. if you know the right code that would be super helpful.


  1. 1 Tim Murray-Browne – interactive sound, creative code | Introduction to Processing workshop Trackback on June 9, 2013 at 2:16 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Categories

Moi

I am a programmer in training and I post all my projects and experiments on this blog. Most of my work is done with Adobe Flash, Processing, and Arduino.

Flashy Programming Flickr Photos

IMG_1340

IMG_1341

IMG_1342

IMG_1343

IMG_1344

IMG_1353

IMG_1355

IMG_1357

IMG_1359

IMG_1360

More Photos

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: