Yingyang Zhou-Project-10-Landscape

Yingyang’s Landscape

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//project 10
//section A

var pikachu;
var pikachuSpeed = 0.0005;
var clouds = [];

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

function setup(){
  createCanvas(360, 480);
  for(var i = 0; i < 10; i++){
    var cloudX = random(width);
    clouds[i] = makeCloud(cloudX);
  }
  frameRate(10);
}

function draw(){
  background(238, 168, 180);


  updateAndDisplayClouds();
  removeCloudsSlippedOut();
  addNewClouds();

  airfoil();
  windowFrame();

}
function airfoil(){
  //airfoil
  noStroke();
  fill(200, 92, 27);
  triangle(240, 250, 250, 210, 280, 270);
  fill(230, 92, 27);
  triangle(360, 400, 240, 250, 360, 300);
}

function windowFrame(){
  rectMode(CENTER);
  noFill();
  stroke(70);
  strokeWeight(70);
  rect(width/2, height/2, width+20, height+20,120);
  stroke(100);
  strokeWeight(30);
  rect(width/2, height/2, width-30, height-30, 130);
}

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

function removeCloudsSlippedOut(){
  var cloudsToKeep = [];
  for(var i = 0; i < clouds.length; i++){
    if(clouds[i].x + clouds[i].breadth+500 > 0){
        cloudsToKeep.push(clouds[i]);
    }
    clouds = cloudsToKeep;
  }
}

function addNewClouds(){
  var newCloudsLikelyhood = 0.005;
  if (random(0,1) < newCloudsLikelyhood){
    clouds.push(makeCloud(width));
  }
}

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

function cloudsDisplay(){
  //moutain
  var terrainSpeed = 0.00125;
  var terrainDetail = 0.01;
  stroke(45, 100, 40, 90);
  beginShape();
  for (var l = 0; l < width; l++) {
      var v = (l * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(v), 0,1, 110, height - 50);
      line(l,y+200,l,height+200);
  }
  //cloud
  fill(0, 0, 222, 45);
  noStroke();
  push();
  translate(this.x, height);
  ellipse(80, -30, 100, 30);
  ellipse(15, -80, 100, 50);
  ellipse(0, -200, 240, 30);
  ellipse(20, -300, 200,10);
  ellipse(50, -240, 100, 40);
  ellipse(0, -220, 300, 50);
  ellipse(500, -30, 100, 30);
  ellipse(200, -80, 100, 50);
  ellipse(100, -200, 240, 30);
  ellipse(200, -300, 200,10);
  ellipse(500, -240, 100, 40);
  ellipse(800, -220, 300, 50);
  image(pikachu, 30, -height/2+random(-2,2), pikachu.width/10, pikachu.height/10);
  pop();
  endShape();
}

function makeCloud(birthLocationX){
  var cloud = {x: birthLocationX,
               breadth: 50,
               size:round(random(30, 240)),
               speed: -5.0,
               move:cloudsMove,
               display:cloudsDisplay}
  return cloud;
}

My original idea is to make a sunrise and sunset scene and I changed my mind later thinking that it might be an interesting idea to engaged with some image elements so I picked a pikachu to be flying outside my airplane cabin.