Project 11

To start with this project I wanted to make my landscape the outside of a plane window. I wanted to make it seem like someone was sitting in an airplane looking at mountain tops and a sunset as clouds and birds go by.

sketchDownload
var grass=[];
var noiseParam=0;
var noiseStep=0.04;
var x=[];
var cloud={x:200,xx:200,y:0,yy:0,r:50,v:-2,
  v2:-2.75};
var robin={x:100,y:25,dx:-2,dy:28,c:255,z:0,r:212,g:124,b:47,
  rr:48,gg:46,bb:59,r3:105,g3:107,b3:102};


function setup() {
    createCanvas(400, 400);    //setting up the grass
    for(var i=0; i<width/5+1; i++){
      var n=noise(noiseParam);
      var value=map(n,0,1,0,height-100);
      grass.push(value);
      noiseParam+=noiseStep;
    }
    frameRate(40);
}

function draw() {
  var c2=color(253,94,83);
  var c1=color(83,242,253);
  sunset(0,0,width,height,c1,c2,"C");   //background
  mountains();    //call mountains
  noFill();
  stroke(0);
  bird();   //call bird
  clouds();   //call clouds
  push();
  strokeWeight(0);
  rect(100,100,200,200);    //draw inside of plane
  fill(64,64,64);
  rect(0,0,width,75);
  rect(0,325,width,75);
  rect(0,75,100,250);
  rect(300,75,100,250);
  pop();
  wing();   //draw wings
  push();
  noStroke();   //draw window gray lining
  fill(186,194,202);
  rect(75,50,25,300);
  rect(100,50,200,25);
  rect(100,325,200,25);
  rect(300,50,25,300);
  pop();
  line(110,65,290,65);    //window shade pull down
}

function sunset(x,y,w,h,c1,c2,a) {
  noFill();
  if (a=="C") {   //color gradient of background
    for(var i=y;i<=y+h;i++){
      var cl=map(i,y,y+h,0,1);
      var color=lerpColor(c1,c2,cl);
      stroke(color);
      line(x,i,x+w,i);
    }
  }
  fill(253,94,83);
  circle(200,325,150);    //draw the sun
}

function wing(){    //drawing the planes wing
  push();
  fill(34,33,54);
  beginShape();
  vertex(300,250);
  vertex(201,225);
  vertex(191,225);
  vertex(300,300);
  vertex(300,250);
  endShape(CLOSE);
  fill(83,60,61);
  beginShape();
  vertex(198,225);
  vertex(185,215);
  vertex(180,215);
  vertex(191,225)
  endShape();
  fill(52,34,32);
  beginShape();
  vertex(191,225);
  vertex(189,235);
  vertex(192,235);
  vertex(201,225);
  endShape(CLOSE);
  pop();
}

function clouds(){
  push();
  fill(255);    //cloud white
  noStroke();
  translate(width/2,height/2);
  cloud.xx+=cloud.v2;
  cloud.x+=cloud.v;
  circle(cloud.x,cloud.y,cloud.r);    //top cloud
  circle(cloud.x+25,cloud.y,cloud.r);
  circle(cloud.x+12.5,cloud.y-25,cloud.r);
  circle(cloud.xx-100, cloud.yy+150,cloud.r);    //bottom cloud
  circle(cloud.xx-75,cloud.yy+150,cloud.r);
  circle(cloud.xx-87.5,cloud.yy+125,cloud.r);
  cloud.xx+=cloud.v2;
  cloud.x+=cloud.v;
  if(cloud.xx<-200){    //makes clouds reappear on left side of screen
    cloud.xx=400;
    cloud.yy=random(-100,100);
  };
  if(cloud.x<-200){
    cloud.x=400;
    cloud.y=random(-100,100);
  }
  pop();
}

 function bird(){  //bird helper function
   push();
   fill(robin.r,robin.g,robin.b);
   circle(robin.x,robin.y,50);
   fill(robin.rr,robin.gg,robin.bb);
   circle(robin.x-25,robin.y-13,25);
   fill(robin.r3,robin.g3,robin.b3);
   triangle(robin.x+35,robin.y+5,robin.x-5,
   robin.y+5,robin.x+25,robin.y-25);
   fill(robin.c,robin.c,robin.z);
   triangle(robin.x-38,robin.y-8,robin.x-43,
   robin.y-8,robin.x-38,robin.y-13);
   robin.x+=robin.dx;
   if(robin.x<-200){    //makes clouds reappear on right side of screen
     robin.x=400;
     robin.y=random(100,300);
   };
   pop();
 }
function mountains(){
  if(grass.length>80){    //allow the mountains to move
    grass.shift();
    for(var i=0;i<width/5+1;i++){
      var n=noise(noiseParam);
      var value=map(n,0,1,0,1.25*height);
      grass.push(value);
      noiseParam+=noiseStep;
      push();
      strokeWeight(3);
      x[i]=5*i;
      pop();
    }
  }
  fill(178, 168, 255);
  beginShape();    //set up the shape of the mountains
  for(var i=0; i<width; i++){
    vertex(i*5,grass[i]);
  }
  vertex(width,height);
  vertex(0,height);
  endShape(CLOSE);
}

Leave a Reply