var W = 200; // width

var H = 200; // height

​

function setup() {

  createCanvas(1112, 834); // canvas size

  smooth(); // smoothens out terrain shape

  noStroke(); // removes border/ outline from rect

}

​

function draw() {

  translate(0, 320); // shifts the terrain lower down on the screen so that it is more balanced with the sky

  background(125, 50, 28); // background color--> dusty orange

​

  for (var i = W * H; --i; ) {

    // loops through each pixel in the W x H  grid, so 200x200 = 40000 iterations

    var x = i % W; // defines x based the remainder of i divided by W

    var z = floor(i / W); // defines z based on i divided by W and then rounding down

    var y = noise(x / 20, z / 70 + t); // produces noise value for y to create a smooth and natural-looking pattern based on x, z, and t (time)

    z *= 0.01; // sizes down z

​

    var brightness = (1 - y) * (z * 0.7) * 200; // defines brightness based on y and z

    fill(y * 193, y * 48, 0); // fill color of terrain: (y * r, y * g, b) -- makes sure to define its shape by connecting it to y (which is the noise/ shape)

​

    rect(500 + (x * 4 - W * 2) / z, (y * 175) / z, 40 - z * 10, 400);

    // draws a rectangle at the defined positions of x and y, the height is then scaled by y and z to  give a 3D terrain effect

  }

  t += deltaTime * 0.0005; // speed at which frames move, makes it look animated

}