Project 11 Landscape

//Jae Son, section C 

var bike;
var clouds = [];
var buildings1 = [];
var buildings2 = [];
var lines = [];

function preload(){
  bike = loadImage("https://i.imgur.com/NCg0ju7.png");
}

function setup() {
    createCanvas(400, 300);
    background(11,92,146);
    var cloudn = 0;
    var building1n = 0;
    var building2n = 0;
    var linesn = 0;
    for (var i = 0; i < 500; i++) {
      clouds[i] = createCloud(cloudn);
      cloudn += 180;
      buildings1[i] = createBuilding1(building1n);
      building1n += 140;
      buildings2[i] = createBuilding2(building2n);
      building2n += 110;
      lines[i] = createlines(linesn);
      linesn += 400;
    }
    frameRate(15);
}

function draw() {
  imageMode(CENTER);
  background(153,225,254);
  noStroke();
  //cloud displayed
  displayCloud();
  //back layer buildings displayed
  displayBuilding1();
  //front layer buildings displayed
  displayBuilding2();
  //green ground
  fill(98,142,62);
  rect(0,209,width,91);
  //dark gray road
  fill(31,42,45);
  rect(0,238,width,62);
  //white line on the road displayed
  displaylines();
  //person on the bike
  image(bike,200,228,125,83);
}

//cloud
function displayCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

function moveCloud() {
  this.x += this.speed;
}

function createCloud(cloudx){
  var cloud = {x: cloudx,
               cloudy: random(20,70), //so the y coordinate of the clouds vary
               cloudw: random(28,42), //so the size of the clouds vary
               speed: -3.0,
               move: moveCloud,
               display: drawCloud
               }
  return cloud;
}

function drawCloud(){
  noStroke();
  push();
  fill(255);
  ellipse(this.x-20,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x+20,this.cloudy,this.cloudw,this.cloudw);
  pop();
}

//back layer buildings
function displayBuilding1(){
  for (var i = 0; i < buildings1.length; i++){
    buildings1[i].move();
    buildings1[i].display();
  }
}

function moveBuilding1() {
  this.x += this.speed;
}

function createBuilding1(buildingx){
  var building1 = {x: buildingx,
               building1ay: 106,
               building1aw: 40,
               building1ah: 133,
               building1by: 91,
               building1bw: 54,
               building1bh: 126,
               building1cy: 117,
               building1cw: 48,
               building1ch: 140,
               speed: -8.5,
               move: moveBuilding1,
               display: drawBuilding1
               }
  return building1;
}

function drawBuilding1(){
  noStroke();
  push();
  fill(119,181,183);
  rect(this.x,this.building1ay,this.building1aw,this.building1ah);
  rect(this.x+40,this.building1by,this.building1bw,this.building1bh);
  rect(this.x+92,this.building1cy,this.building1cw,this.building1ch);
  pop();
}

//front layer buildings
function displayBuilding2(){
  for (var i = 0; i < buildings2.length; i++){
    buildings2[i].move();
    buildings2[i].display();
  }
}

function moveBuilding2() {
  this.x += this.speed;
}

function createBuilding2(building2x){
  var building2 = {x: building2x,
               building2y: random(100,140),
               building2w: random(30,50),
               building2h: random(100,145),
               speed: -6.5,
               move: moveBuilding2,
               display: drawBuilding2
               }
  return building2;
}

function drawBuilding2(){
  noStroke();
  push();
  //building structure
  fill(156,218,191);
  rect(this.x,this.building2y,this.building2w,this.building2h);
  //windows (strips) on the building
  fill(130,182,187);
  rect(this.x+this.building2w/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*3/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*5/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  pop();
}

//white lines on the road
function displaylines(){
  for (var i = 0; i < lines.length; i++){
    lines[i].move();
    lines[i].display();
  }
}

function movelines() {
  this.x += this.speed;
}

function createlines(linesx){
  var lines = {x: linesx,
               linesy: 273,
               linesw: 73,
               linesh: 5,
               speed: -7.0,
               move: movelines,
               display: drawlines
               }
  return lines;
}

function drawlines(){
  noStroke();
  push();
  fill(255);
  for (i = 0; i < 3; i++) {
    fill(255);
    rect(this.x+135*i,this.linesy,this.linesw,this.linesh);
  }
  pop();
}