Noise: part 2

Remember last time where I made the Noise simulation? The one with the grey dots and purple hills? Remember that one?

Well today, I’m gonna show you how to make this:

And also this:

(The things here are just gifs. In reality, the program will give you more high-quality results.)

Note: make sure to have a relatively good GPU for this to appear smoothly.

So, I know what you are thinking: HOOOOOOW?

Well, it really isn’t that hard. You all know the noise() function, right? Well, I used that, along with plotting points with their relative noise values. Pretty simple, right? Well, it is. First, I will be explaining how to make the first gif.

First, you set up your universal variables, along with the program itself.

float xoff = 0;
float yoff = 0;
float zoff = 0;
float change = 0.01;
void setup() {
  size(600, 600, P3D);
  pixelDensity(1);
  frameRate(1000);//this is so that the program runs smoothly.
}

After that, you start the draw() function. You also want to set up the view where you will be seeing the terrain from.

void draw() {
  pushMatrix();
  rotateX(radians(45));
  rotateZ(radians(0));
  translate(width, 0, 10);
  background(20);

xoff, yoff, and zoff are the variables that determine the noise value for the points. Basically, xoff changes with each y, where the yoff changes. The zoff determines the height. Then, the colors and noise values are calculated. bright is determined based on noise(xoff, yoff, zoff). In the end, this is the code for the function:

  for (int x = -1*width; x < width; x+=4) {
    xoff += change;
    yoff = 0.0;
    for (int y = -1*width; y < height; y+=4) {
      yoff+=change;
      float bright = noise(xoff, yoff, zoff/10)*255;
      //pixels[x+y*width] = color(0, 0, bright);
      stroke(0, bright, 255-bright);
      fill(0, bright, 255-bright);
      strokeWeight(4);
      point((x)-(width/2), (y)-(height/2), (bright-600)*1);
    }
  }

Then, we make it so that when the mouse is pressed, the zoff changes. After that, we do popMatrix(), so that way, the thing is reverted back to its orginal matrix position.

  if (mousePressed) {
    zoff+=0.3;
  } else {
    zoff +=0;
  }
  popMatrix();
}

To get the result in the second gif, you need to use the (int) function, which rounds everything to the nearest integer. The draw() function looks like this:

void draw(){
  pushMatrix();
  rotateX(radians(45));
  rotateZ(radians(0));
  translate(width, height/-2, 0);
  background(20);
  xoff = 0.0;
  for(int x = -1*width; x < width; x+=4){
    xoff += change;
    yoff = 0.0;
    for(int y = -1*height; y < height; y+=4){
      yoff+=change;
      float bright = noise(xoff, yoff, zoff/10)*255;
      //pixels[x+y*width] = color(0, 0, bright);
      stroke((int)(bright*1.5/factor)*factor,0, (int)((200-bright)*1.5/factor)*factor);
      strokeWeight(3.5);
      point((x*2)-(width/2), (y*2)-(height/2), (int)((bright-590)*2.4/factor)*factor);
    }
  }
  if(mousePressed){
    zoff+=0.25;
  }
  else{
    zoff +=0;
  }
  popMatrix();
}

That’s it!

This is also technically part of the interactive series, since it has to do with user interaction with the mouse.

For all of the code, screenshots, and gifs, you can find them on GitHub here.

See you next time, and please experiment! Change the code a little and make it yours.