Interactive Series: Noise

What do I mean by “Noise?” Not the sound, but what do I mean by noise?

Every one knows the random function, right?
It generates a random number within a certain range. So, random(25) will produce any random number from 0–24.

11.96812340 19.0009 5.99 1 23,4567891011

Kind of like that. The thing is, the numbers are completely random, and have no… harmony to them.

Then, one day, this genius named Ken Perlin in 1983 made Perlin Noise, where everything was more harmonized, like a random function. So here’s how it works:

We start off with a number.

26

Then, we generate a random number that is close to that number. So we incrse the number by -1 to 1, let’s say.

26 26.5

We keep going for every number:

26 25.5 24.9 24.18 25.109

until we eventually have a pattern.

Noise is actually very useful for 2 reasons:

• Noise helps simulate natural phenomena more simply, such as the waves of water in the ocean or a blanket flapping in the wind.
• Noise also can be used to generate random terrain for video games. Minecraft much? In fact, there is an example of this here.

This is known as simplex noise, and, in processing, can be accessed with the simple command noise();. It generates a value based on noise.

This is the output of something that I made with the noise(); function:

The output of what I made.

Pretty cool, right?

Do you start to see what I mean by “terrain generation?”
Noise produces not random, spiky terrain, but smooth, hilly terrain.

So how do we make the mountains? The pits? the more extreme stuff?

Well, let’s say that we have this thing called a “Noise Index.” As the index goes up, the Noise variation increases. So, how does this work?

first, we set up our program along with a variable: noiseScale. This determines the Noise Index. Note: The index doesn’t have to be that high for the terrain to vary a lot.

float noiseScale = 0.01;
void setup(){
  size(600, 600);
  pixelDensity(2);
}

After that, we start our draw() function, where we keep refreshing the background so that the strokes are not always there.

void draw() {
  background(20);

Then, we set up a for loop so that the noise goes across the whole screen.

  for (int x=0; x < width; x++) {

then, we create a new variable called z. Remember all of those tiny lines from the GIF? that’s what z helps with.

    float z = noise(10*x);

After that, we set up the noise() function itself, along with the grey points that you saw:

    float z = noise(10*x);
    float noiseVal = noise((mouseX-x)*noiseScale, mouseY*noiseScale, z);
    strokeWeight(1); 
    stroke(noiseVal*160, 0, 100-noiseVal);
    line(x, mouseY+noiseVal*160, x-z, height);
    strokeWeight(5);
    stroke(noiseVal*255);
    point(x, mouseY+noiseVal*80);
  }

We also need to set up the program that lets the noiseScale() increase when the mouse is down, decrease when it is not, and set it to a certain minimum:

  if(mousePressed){
    noiseScale += 0.001;
  }
  else{
    noiseScale -=0.001;
  }
  if(noiseScale <= 0.01){
    noiseScale = 0.01;
  }
}

And that’s it!

But what about… terrain noise?

In the next post, I’ll be posting that!