var bushes = []; //array for smaller trees 

                 //I just called them bushes to make things easier

var speed = 0.00001; //leftward shift rate of mountains

​

function setup() {

  createCanvas(480, 480);

​

  // create initial trees; make 5 big and 5 small trees

  for (var t = 0; t < 5; t++){

    var tx = random(width);

    trees[t] = makeTree(tx);

    var bx = random(width);

    bushes[t] = makeBush(bx);

  }

  frameRate(10); //set tree and bush frameRate to 10

}

​

//make tree at x

function makeTree(tx) {

  var trees = {x: tx,

              draw: treeDraw}

  return trees;

}

​

//make bush at x

function makeBush(bx) {

  var bushes = {x: bx,

              draw: bushDraw}

  return bushes;

}

​

//draw tree

function treeDraw() {

  noStroke();

  //leaves

  fill(14, 90, 117);

  triangle(this.x - 20, 398, this.x + 20, 398, this.x, 320);

  //trunk

  stroke(13, 77, 94);

  line(this.x, 330, this.x, 400);

  //movement

  this.x -= 1;

​

  //make new trees

  var newTree = 0.0025; //probability for new tree "birth"

  if (random(0, 1) < newTree) {

      trees.push(makeTree(width + 20)); //push new tree into trees array

  }

}

​

//draw bush

function bushDraw() {

  noStroke();

  //leaves

  fill(28, 65, 72);

  triangle(this.x - 15, 403, this.x + 15, 403, this.x, 330);

  //trunk

  stroke(13, 77, 94);

  line(this.x, 340, this.x, 405);

  //movement

  this.x -= 1.2;

​

  //make new bushes

  var newBush = 0.0025; //probability for new bush "birth"

  if (random(0, 1) < newBush) {

      bushes.push(makeBush(width + 15)); //push new bush into bushes array

  }

}

​

function draw() {

  background(228, 239, 242);

  noStroke();

​

  //orange gradient layer

  for (var y = 100; y < 400; y++) { //for this specific y interval,

    var a = map(y, 100, 400, 0, 255); //map y interval to alpha

    stroke(240, 178, 158, a); 

    line(0, y, width, y); //draw lines with mapped alphas

  }

​

  //sun

  fill(240, 178, 158);

  ellipse(240, 200, 25);

​

  //mountain layer 1

  beginShape(); 

  stroke(149, 189, 207);

  var variance1 = 0.001;

  for (i = 0; i < width; i++) {

    var t = (i * variance1) + (millis() * speed);

    var y = map(noise(t), 0, 1, 100, height);

    line(i, y, i, height); 

    }

  endShape();

​

  //fog layer 1

  for (var y = 200; y < 400; y++) {

    var b = map(y, 200, 400, 0, 255);

    stroke(187, 208, 214, b);

    line(0, y, width, y);

  }

​

  //mountain layer 2

  beginShape(); 

  stroke(85, 170, 200);

  var variance2 = 0.0015;

  for (j = 0; j < width; j++) {

    var t = (j * variance2) + (millis() * speed);

    var y = map(noise(t), 0, 1, 150, height);

    line(j, y, j, height); 

    }

  endShape();

​

  //fog layer 2

  for (var y = 200; y < 480; y++) {

    var b = map(y, 200, 480, 0, 255);

    stroke(187, 208, 214, b);

    line(0, y, width, y);

  }

​

  //draw trees using the treeDraw function

  for (var u = 0; u < trees.length; u++) {

    trees[u].draw();

  }

​

  //fog layer 3

  for (var y = 350; y < 480; y++) {

    var b = map(y, 350, 480, 0, 255);

    stroke(187, 208, 214, b);

    line(0, y, width, y);

  }

​

  //ground layers

  noStroke();

  fill(117, 144, 139);

  rect(-1, 400, width + 1, 10);

  fill(63, 84, 77);

  rect(-1, 405, width + 1, 80);

​

  //draw bushes using the bushDraw function

  for (var v = 0; v < bushes.length; v++) {

    bushes[v].draw();

  }

​

  //removes trees when they go off the left edge of the screen;

  //stores the trees still on screen in a new array

  var treesToKeep = [];

  for (var i = 0; i < trees.length; i++){

    if (trees[i].x + 20 > 0) {

      treesToKeep.push(trees[i]);

    }

  }

  trees = treesToKeep;

​

  //removes bushes when they go off the left edge of the screen;

  //stores the bushes still on screen in a new array

  var bushesToKeep = [];

  for (var v = 0; v < bushes.length; v++){

    if (bushes[v].x + 20 > 0) {

      bushesToKeep.push(bushes[v]);

    }

  }

  bushes = bushesToKeep;

​

}