Main content

## Computer programming - JavaScript and the web

# Perlin noise

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.

There's an algorithm that results in more natural results, and that's known as “Perlin noise". Ken Perlin developed the noise function while working on the original Tron movie in the early 1980s; he used it 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 below shows Perlin noise over time, with the x-axis representing time; note the smoothness of the curve.

Contrastingly, the next graph below shows pure random numbers over time.

ProcessingJS 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 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.Consider drawing a circle in our ProcessingJS window at a random x-location:

```
var x = random(0, width);
ellipse(x, 180, 16, 16);
```

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.```
var x = noise(0, width);
ellipse(x, 180, 16, 16);
```

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, `noise()`

expects us to pass in an argument that signifies a "moment in time," and always returns a value between 0 and 1. We can think of one-dimensional Perlin noise as a linear sequence of values over time. For example, here are example inputs and return values:Time | Noise Value |
---|---|

0 | 0.469 |

0.01 | 0.480 |

0.02 | 0.492 |

0.03 | 0.505 |

0.04 | 0.517 |

Now, in order to access one of those noise values in ProcessingJS, we have to pass a specific moment in time to the

`noise()`

function. For example:`var n = noise(0.03);`

According to the above table,

`noise()`

will return 0.505 at the time of 0.03. We can write a program that stores a time variable and requests that 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 over and over. If we increment the time variable

`t`

, however, we’ll get a different result.The rate at which 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 above several times, incrementing t by 0.01, 0.02, 0.05, 0.1, 0.0001, and you will see different results.

### 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.

We could just multiply by the max number in the range, but this is also a good opportunity to introduce the ProcessingJS’s

`map()`

function, which will help us in more situations later on. 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 a rectangle with a width between 0 and the current width.

We can apply the exact same logic to our random walker, and assign both its x- and y-values according to Perlin noise.

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).In the next challenge, you'll try using noise with the

`Walker`

in a slightly different way. Have fun!This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

## Want to join the conversation?

- How does the
`map`

function work?(60 votes)- With regards to the actual implementation, map converts between two linear scales given two equivalent points. Here is an example implementation:
`var map = function(x, imin, imax, omin, omax) {`

var irange = imax - imin;

var scaled = (x - imin) / irange;

var orange = omax - omin;

return scaled * orange + omin;

};

This function first takes the input value`x`

from the input scale to a (0,1) scale by subtracting`imin`

and dividing by`irange`

. This value is stored in`scaled`

.`scaled`

is then converted to the output scale by multiplying by`orange`

and adding`omin`

.(11 votes)

- How do you finish Noisy step walker? I have been keep trying and I can't seem to get it.(24 votes)
- //this is the solution:

//i figured it out by looking at other people's suggestions and experimenting with the values.

//my logic: since we are now dealing with stepsizes instead of the location of the walker on the screen, the 4th and 5th map values obviously need to be smaller. what's more, the 4th one needs to be negative, since we dont want him to go off the screen.

var Walker = function() {

this.x = width/2;

this.y = height/2;

this.tx = 0;

this.ty = 1000;

};

Walker.prototype.display = function() {

strokeWeight(1);

stroke(0, 0, 0);

point(this.x, this.y);

};

Walker.prototype.walk = function() {

var xStepSize = map(noise(this.tx), 0, 1, -4, 4);

var yStepSize = map(noise(this.ty), 0, 1, -4, 4);

this.x += xStepSize;

this.y += yStepSize;

this.tx += 0.01;

this.ty += 0.01;

};

var w = new Walker();

draw = function() {

w.walk();

w.display();

};(8 votes)

- Playing around with the walker code on this page, I found that if you change the increment of
**tx**and**ty**to an integer, the walk doesn't move at all! However, if you set it to be a value with a decimal, restart, and then change it to an integer at run-time it will move as expected (a lot!)

Is this a bug?(12 votes)- No this isn't a bug, it's actually due to how Perlin noise is implemented.

Without going into too much detail, part of the Perlin noise function (in the one dimensional case) multiplies the decimal-part of the input by a pseudorandom value associated with the integer-part of the input. Since the decimal-part of a whole number is 0, this value becomes 0 which influences the rest of the function such that it will always output 0.

If you have the motivation/time I'd recommend looking into what the Perlin noise function actually does behind the scenes. The 2D case is probably the easiest to understand in geometric terms and once you get it, you can easily extend it to n dimensions.

I realize this question is 3 years old and the poster might already know this by now, but wanted to give the correct answer for any other readers.(30 votes)

- I am stuck in the Noisy Step Walker Challenge. Could anyone help me? Here's what I put:
`var Walker = function() {`

this.x = width/2;

this.y = height/2;

this.tx = 0;

this.ty = 10000;

};

Walker.prototype.display = function() {

stroke(0, 0, 0);

point(this.x, this.y);

};

Walker.prototype.walk = function() {

var this.x = map(noise(this.tx), 0, 1, 0 , width);

var this.y = map(noise(this.ty), 0, 1, 0, width);

this.x += 0.01;

this.y += 0.01;

};

var w = new Walker();

var draw = function() {

w.walk();

w.display();

};

When I did this there's a orange letter on top of my program that says:`Synax Error!`

Could you fix my mistakes? Thanks!(7 votes)- This.x and this.y are already defined, so you shouldn't put a
`var`

in front of them. Also, the new max that you put into`map()`

is width, it needs to be a smaller number, 10 worked for me.(6 votes)

- In the last program,
*we*have`code`

line`this.x = map(noise(this.tx), 0, 1, 0, width);`

then x can have any value and start at any point. Then why it is always starting at (200, 200)?(7 votes)- It always starts at 200, 200 hundred because if you look in the Walker object you'll see that
`this.x = width/ 2;`

and`this.y = height/2;`

the noise just*adds*to that.(4 votes)

- If you restart the walker program over and over again, it will keep drawing the same pattern. I thought this would give us a different pattern each time?!(6 votes)
- You need to randomize the start value to get a different pattern.(6 votes)

- why are those specific numbers used for the noise values? EX. .01 = .469(7 votes)
- this.y = map(noise(this.ty), 0, 1, 0, height);

in above example <i>this.ty</i> is" 10000" then how could its minimum and maximum value be 0 & 1 respectively ?(4 votes)- 10000, (or any number passed to "noise") is just the position inside of "noise" that the number comes form. The range of the actual number returned is between 0 and 1.(6 votes)

- I still
**do not**understand how`map()`

works. ;-;

I've read what Bob Lyon said with his answer, but it still doesn't quite make sense. Is there a better explanation that could be put in the most basic term possible?

I think it's most confusing to us because it's taught in the same lesson as noise, so we confuse the two, even though they are seperate commands with seperate functions.

Help would be**great**.

Have a blessed day everyone!(4 votes)- It essentially takes a value and squeezes it to be within bounds that you set.

The first argument will be the variable you wish to adjust, say you have variable`a`

assigned to a value of 50.

The second two arguments are the*initial range*of this variable. Let's say`a`

is constrained to a range between 0 and 100.

The final two arguments are the range we want to adjust the value to - say 0 and 1.

Our function looks like this:`map(a, 0, 100, 0, 1);`

which produces an output of 0.5 (remember,`a`

was given a value of 50, so this output makes sense).(4 votes)

- Can you input negative values into noise?(2 votes)
- Yes, negative values can be inputted into the
`noise()`

command.(7 votes)