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);
}