In computer programming and reference books THEE most interesting thing that I read that impacted how i view language the most is the 55 pages of definition that go into the word NOISE in NATURE OF CODE by Daniel Shiffman, this part right here … 5500 chracters used to define 5 … maybe some people don’t know what they are saying and if we do live in a hogwarts we are casting spells world, maybe some of these words are more loaded than others, NOISE in PERLIN NOISE and the the way you reference 550 years of mathematics and break it down to noise() is spell binding to me …

I.6 Perlin Noise (A Smoother Approach)
A good random number generator produces numbers that have no relationship and show no
discernible pattern. As we are beginning to see, a little bit of randomness can be a good thing
when programming organic, lifelike behaviors. However, randomness as the single guiding
principle is not necessarily natural. An algorithm known as “Perlin noise,” named for its
inventor Ken Perlin, takes this concept into account. Perlin developed the noise function while
working on the original Tron movie in the early 1980s; it was designed to create procedural
textures for computer-generated effects. In 1997 Perlin won an Academy Award in technical
achievement for this work. Perlin noise can be used to generate various effects with natural
qualities, such as clouds, landscapes, and patterned textures like marble.
Perlin noise has a more organic appearance because it produces a naturally ordered
(“smooth”) sequence of pseudo-random numbers. The graph on the left below shows Perlin
noise over time, with the x-axis representing time; note the smoothness of the curve. The
graph on the right shows pure random numbers over time. (The code for generating these
graphs is available in the accompanying book downloads.)
The Nature of Code (v1.0)
Processing has a built-in implementation of the Perlin noise algorithm: the function noise().
The noise() function takes one, two, or three arguments, as noise is computed in one, two,
or three dimensions. Let’s start by looking at one-dimensional noise.
Noise Detail
The Processing noise reference ( tells us
that noise is calculated over several “octaves.” Calling the noiseDetail()
( function will change both the
number of octaves and their importance relative to one another. This in turn changes
how the noise function behaves.
An online lecture by Ken Perlin lets you learn more about how noise works from
Perlin himself (
Consider drawing a circle in our Processing window at a random x-location.
Now, instead of a random x-location, we want a Perlin noise x-location that is “smoother.”
You might think that all you need to do is replace random() with noise(), i.e.
While conceptually this is exactly what we want to do—calculate an x-value that ranges
between 0 and the width according to Perlin noise—this is not the correct implementation.
While the arguments to the random() function specify a range of values between a
minimum and a maximum, noise() does not work this way. Instead, the output range is
Figure I.5: Noise Figure I.6: Random
float x = random(0,width); A random x-location
float x = noise(0,width); A noise x-location?
fixed—it always returns a value between 0 and 1. We’ll see in a moment that we can get
around this easily with Processing’s map() function, but first we must examine what exactly
noise() expects us to pass in as an argument.
We can think of one-dimensional Perlin noise as a linear sequence of values over time. For
Time Noise Value
0 0.365
1 0.363
2 0.363
3 0.364
4 0.366
Now, in order to access a particular noise value in Processing, we have to pass a specific
“moment in time” to the noise() function. For example:
According to the above table, noise(3) will return 0.364 at time equals 3. We could improve
this by using a variable for time and asking for a noise value continuously in draw().
The above code results in the same value printed over and over. This happens because we
are asking for the result of the noise() function at the same point in time—3—over and over.
If we increment the time variable t, however, we’ll get a different result.
float n = noise(3);
float t = 3;
void draw() {
We need the noise value for a specific
moment in time.
float n = noise(t);
Typically we would start at time = 0, though
this is arbitrary.
float t = 0;
void draw() {
float n = noise(t);
The Nature of Code (v1.0)
How quickly we increment t also affects the smoothness of the noise. If we make large
jumps in time, then we are skipping ahead and the values will be more random.
Try running the code several times, incrementing t by 0.01, 0.02, 0.05, 0.1, 0.0001, and you
will see different results.
t += 0.01; Now, we move forward in time!
Figure I.7
Mapping Noise
Now we’re ready to answer the question of what to do with the noise value. Once we have
the value with a range between 0 and 1, it’s up to us to map that range to what we want. The
easiest way to do this is with Processing’s map() function. The map() function takes five
arguments. First up is the value we want to map, in this case n. Then we have to give it the
value’s current range (minimum and maximum), followed by our desired range.
In this case, we know that noise has a range between 0 and 1, but we’d like to draw our
circle with a range between 0 and the window’s width.
Figure I.8
We can apply the exact same logic to our random walker, and assign both its x- and y-values
according to Perlin noise.
Example I.5: Perlin noise walker
float t = 0;
void draw() {
float n = noise(t);
Using map() to customize the range of
Perlin noise
float x = map(n,0,1,0,width);
t += 0.01;
class Walker {
float x,y;
float tx,ty;
Walker() {
tx = 0;
ty = 10000;
void step() {
x = map(noise(tx), 0, 1, 0, width); x- and y-location mapped from noise
y = map(noise(ty), 0, 1, 0, height);
tx += 0.01; Move forward through “time.”
ty += 0.01;
The Nature of Code (v1.0)
Notice how the above example requires an additional pair of variables: tx and ty. This is
because we need to keep track of two time variables, one for the x-location of the Walker
object and one for the y-location. But there is something a bit odd about these variables.
Why does tx start at 0 and ty at 10,000? While these numbers are arbitrary choices, we
have very specifically initialized our two time variables with different values. This is because
the noise function is deterministic: it gives you the same result for a specific time t each
and every time. If we asked for the noise value at the same time t for both x and y, then x
and y would always be equal, meaning that the Walker object would only move along a
diagonal. Instead, we simply use two different parts of the noise space, starting at 0 for x
and 10,000 for y so that x and y can appear to act independently of each other.
In truth, there is no actual concept of time at play here. It’s a useful metaphor to help us
understand how the noise function works, but really what we have is space, rather than
time. The graph above depicts a linear sequence of noise values in a one-dimensional
space, and we can ask for a value at a specific x-location whenever we want. In examples,
you will often see a variable named xoff to indicate the x-offset along the noise graph,
rather than t for time (as noted in the diagram).
Figure I.9
In the above random walker, the result of the noise function is mapped directly to the
Walker’s location. Create a random walker where you instead map the result of the
noise() function to a Walker’s step size.
Exercise I.7
Two-Dimensional Noise
This idea of noise values living in a one-dimensional space is important because it leads us
right into a discussion of two-dimensional space. Let’s think about this for a moment. With
one-dimensional noise, we have a sequence of values in which any given value is similar to
its neighbor. Because the value is in one dimension, it only has two neighbors: a value that
comes before it (to the left on the graph) and one that comes after it (to the right).
Two-dimensional noise works exactly the same way conceptually. The difference of course is
that we aren’t looking at values along a linear path, but values that are sitting on a grid. Think
of a piece of graph paper with numbers written into each cell. A given value will be similar to
all of its neighbors: above, below, to the right, to the left, and along any diagonal.
If you were to visualize this graph paper with each value mapped to the brightness of a color,
you would get something that looks like clouds. White sits next to light gray, which sits next to
gray, which sits next to dark gray, which sits next to black, which sits next to dark gray, etc.
This is why noise was originally invented. You tweak the parameters a bit or play with color to
make the resulting image look more like marble or wood or any other organic texture.
Let’s take a quick look at how to implement two-dimensional noise in Processing. If you
wanted to color every pixel of a window randomly, you would need a nested loop, one that
accessed each pixel and picked a random brightness.
Figure I.10: 1D Noise Figure I.11: 2D Noise
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
float bright = random(255); A random brightness!
pixels[x+ywidth] = color(bright);
The Nature of Code (v1.0)
To color each pixel according to the noise() function, we’ll do exactly the same thing, only
instead of calling random() we’ll call noise().
This is a nice start conceptually—it gives you a noise value for every (x,y) location in our
two-dimensional space. The problem is that this won’t have the cloudy quality we want.
Jumping from pixel 200 to pixel 201 is too large of a jump through noise. Remember, when
we worked with one-dimensional noise, we incremented our time variable by 0.01 each
frame, not by 1! A pretty good solution to this problem is to just use different variables for
the noise arguments. For example, we could increment a variable called xoff each time we
move horizontally, and a yoff variable each time we move vertically through the nested
Example I.6: 2D Perlin noise
float bright = map(noise(x,y),0,1,0,255); A Perlin noise brightness!
float xoff = 0.0; Start xoff at 0.
for (int x = 0; x < width; x++) {
float yoff = 0.0; For every xoff, start yoff at 0.
for (int y = 0; y < height; y++) {
float bright = Use xoff and yoff for noise().
width] = color(bright); Use x and y for pixel location.
yoff += 0.01; Increment yoff.
xoff += 0.01; Increment xoff.
Play with color, noiseDetail(), and the rate at which xoff and yoff are
incremented to achieve different visual effects.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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