Xindi Lyu-Project 10- Landscape-Section A

sketch
For this project I tried to create a sense of distance between the mountains by assigning them gradient colors and giving them different speeds and details. Also I incorporated the hot air balloons I made in this drawings and made them gradually move downwards as well as moving left.

 
/*
Project 10
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var tspeed1=0.0001;
var tdetail1=0.005;
var tspeed2=0.00006;
var tdetail2=0.01;
var tspeed3=0.00004;
var tdetail3=0.05;
var ballons= [];

function setup(){
    createCanvas(500,600);
    frameRate(10);
    for(var i=0; i<10; i++){
        var rx = random(width);
        var ry = random(0,height/2)
        ballons[i]=makeBallons(rx,ry);
    }

    }

function draw(){

    background(250,237,229);
    //gradiant background
  for(var u=0; u<height;u++){
    stroke(250+0.05*u,237+0.05*u,229+0.05*u);
    line(0,u,width,u );

}
//the far away mountains
         push();
 fill(212,179,160);
   beginShape();
   noStroke();
    for(k=0;k<width;k++){
        var t=(tdetail3*k)+(millis()*tspeed3);
        var h=map(noise(t),0,2.5,0,height/0.53);
        vertex(k,h);
    }
    
    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();



//the mountains in the midle
     push();
 fill(197,158,141);
   beginShape();
   noStroke();
    for(a=0;a<width;a++){
        var c=(tdetail2*a)+(millis()*tspeed2);
        var b=map(noise(c),0,1.8,0,height/0.4);
        vertex(a,b);
    }


    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();



 

//the close mountains


   push();
 fill(173,146,135);
   beginShape();
   noStroke();
    for(x=0;x<width;x++){
        var t=(tdetail1*x)+(millis()*tspeed1);
        var y=map(noise(t),0,1,height/2,height);
        vertex(x,y);
    }


    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();
        
updateAndDisplayballons();
removeballons();
addballons();

 


}

function updateAndDisplayballons(){
for(i=0;i<ballons.length;i++){
   ballons[i].move();
   ballons[i].display();

}
}

function removeballons(){
    var ballonsToKeep=[];
for(i=0;i<ballons.length;i++){
    if(ballons[i].x>0){
        ballonsToKeep.push(ballons[i]);

    }
}

}

function addballons(){
    var newBallonLikelihood = 0.025
    if(random(0,1)<newBallonLikelihood){
        ballons.push(makeBallons(width,random(0,height/2)))
    }
}

function ballonsMove(){
    this.x+=this.speed;
    this.y+=this.speed*(-0.6);
}

function ballonsDisplay(){
    translate(this.x,this.y);
//The strings
    strokeWeight(0.7);
    stroke(86,85,93);
    line(5,25,5,30);
    line(10,25,10,30);
    line(15,25,15,30);

//The balloon
    noStroke();
    ellipse(10,10,20,20);
    quad(0,10,20,10, 15, 25,5,25);
    //The basket
    rect(5,30,10,8);
}

function makeBallons(birthLocationX,birthLocationY){
    var ballons={x:birthLocationX, y:birthLocationY,
        speed: random(-0.5,-0.6),
        move:ballonsMove,
        display:ballonsDisplay}

        return ballons;

}