Project 11: Generative Landscape

//global variables
var cloudsX = [];
var cloudsY = [];
var brickX = [];
var brickY = [];
var mushroomX = [];
var mushroomY = [];
var cloudImg;
var brickImg;
var floorImg;
var noiseParam = 0;
var noiseStep = 0.01;
var numClouds = 5;
var numBricks = 3;
var numMushrooms = 3;
var mh = []; //height of the mountains

function preload() { 
  //preload images
  cloudImg = loadImage("https://i.imgur.com/i3pLDv0.png");
  brickImg = loadImage("https://i.imgur.com/yNNs74U.png");
  floorImg = loadImage("https://i.imgur.com/LZwSMdA.png");
  mushroomImg = loadImage("https://i.imgur.com/tflvlXK.png");
}

function setup() {
  createCanvas(480, 400);

  //mountain
  for (var i = 0; i < width/2 + 1; i ++) {
    var n = noise(noiseParam);
    var v = map(n, 0, 1, height/2, height);
    mh.push(v);
    noiseParam += noiseStep;
  }

  //cloud
  for (var i = 0; i < numClouds; i ++) {
    var cx = random(width/numClouds*i, width/numClouds*(i+1));
    var cy = random(height/4);
    cloudsX.push(cx);
    cloudsY.push(cy);
  }

  //brick
  for (var i = 0; i < numBricks; i ++) {
    var bx = random(width/numBricks*i, width/numBricks*(i+1));
    var by = random(height/3, height/2);
    brickX.push(bx);
    brickY.push(by);
  }

  //mushroom
  for (var i = 0; i < numMushrooms; i ++) {
    var mx = random(width/numMushrooms*i, width/numMushrooms*(i+1));
    var my = height-90;
    mushroomX.push(mx);
    mushroomY.push(my);
  }
  frameRate(10);
}

function draw() {
  background(102, 154, 255); //blue
  drawMountain();
  drawCloud();
  drawBrick();
  drawMushroom();

//floor
  image(floorImg, 0, 340, 130, 30);
  image(floorImg, 129, 340, 130, 30);
  image(floorImg, 258, 340, 130, 30);
  image(floorImg, 387, 340, 130, 30);
  image(floorImg, 0, 370, 130, 30);
  image(floorImg, 129, 370, 130, 30);
  image(floorImg, 258, 370, 130, 30);
  image(floorImg, 387, 370, 130, 30);
}

//mountains
function drawMountain() {
  fill(52, 151, 9); //green
  beginShape();
  vertex(0, height);
  for (var i = 0; i < mh.length; i ++) {
    x = 2*i;
    y = mh[i];
    vertex(x,y);
  }
  vertex(width, height);
  endShape();
  mh.shift();
  n = noise(noiseParam);
  v = map(n, 0, 1, height/2, height);
  mh.push(v);
  noiseParam += noiseStep;
}

//cloud
function drawCloud() {
  for (var i = 0; i < numClouds; i ++) {
    image(cloudImg, cloudsX[i], cloudsY[i], 100, 33);
  }
  for (var i = 0; i < numClouds; i ++) {
    cloudsX[i] -= 3; //update cloud position
    if (cloudsX[i] < -100) { //remove cloud
      cloudsX[i] = width;
      cloudsY[i] = random(height/4);
    }
  }
}

//brick
function drawBrick() {
  for (var i = 0; i < numBricks; i ++) {
    image(brickImg, brickX[i], brickY[i], 100, 30);
  }
  for (var i = 0; i < numBricks; i ++) {
    brickX[i] -= 3; //update brick position
    if (brickX[i] < -100) { //remove cloud
      brickX[i] = width;
      brickY[i] = random(height/3, height/2);
    }
  }
}


//mushroom
function drawMushroom() {
  for (var i = 0; i < numMushrooms; i ++) {
    image(mushroomImg, mushroomX[i], mushroomY[i], 40, 30);
  }
  for (var i = 0; i < numMushrooms; i ++) {
    mushroomX[i] -= 7; //update brick position
    if (mushroomX[i] < -100) { //remove cloud
      mushroomX[i] = width;
      mushroomY[i] = height-90;
    }
  }
}