Project 11- Landscape

sketchDownload




//Shruti Prasanth
//Section C
//Project 11


var move = 5; 
var cx = 100; //starting location of clouds
var cy = 100; 
var clouds = []; 
var terrainSpeed = 0.0005; 
var terrainDetail = 0.005; 

function setup() {

    createCanvas(480, 480); 
    frameRate(4); 

    //initial display of clouds  
    for(var i = 0; i < 3; i++){
        var cX = random(width); 
        var cY = random(75, 150); 
        clouds[i] = makeClouds(cX, cY); 

    }

}
   
function draw() {
    background(154,73,147);

    //sun
    noStroke(); 
    fill(236,210,108);
    ellipse(width / 3, height / 3, 125, 125);  

    var mountain1 = mountains("#purple", height * 0.20, height * 0.65, 4); //backmost mountain
    var mountain2 = mountains("darkgrey", height * 0.37, height * 0.65, 2); // middle ground mountains 
    var mountain3 = mountains("grey", height * 0.50, height * 0.65, 3); //foreground mountains 


    //ocean 
    noStroke(); 
    fill(137,172,315); 
    rect(0, height * 0.65, width, height * 0.35); 

    //sun reflection 
    noStroke(); 
    fill(250, 103, 71, 100); 
    arc(width / 3, height * 0.65, 125, 125, 0, PI, OPEN);


    update(); 
    removeClouds(); 
    addCloud();   

}

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

function removeClouds(){ //checks to see where clouds are and changes positions accordingly
    var cloudKeep = []; 
    for(var i = 0; i < clouds.length; i++){
        if(clouds[i].x + 25 > 0){ // cloud is 50 wide, so 25 is point from center
            cloudKeep.push(clouds[i]); 
        }
    }
    clouds = cloudKeep; //keep only clouds still on screen
}

function addCloud(){ //randomly adds clouds at intervals 
    var newCloud = 0.03; 
    if(random(0,1) < newCloud){
        var cloudY = random(75, 150); 
        clouds.push(makeClouds(480, cloudY)); 
    }
}

function cloudMove(){ // move the clouds 
    this.x += this.speed; 
}

function cloudDisplay(){ //draw the clouds 
    fill(255); //white
    noStroke(); 
    ellipse(this.x, this.y, 90, 15); 
    ellipse(this.x - 25, this.y - 10, 35, 30);
    ellipse(this.x, this.y - 20, 40, 40);
    ellipse(this.x + 20, this.y - 15, 35, 30);  

}

function makeClouds(cloudLocX, cloudLocY){ //cloud object definition 
    var cloud = { x: cloudLocX,
                y: cloudLocY,
                speed: -5, 
                move: cloudMove, 
                display: cloudDisplay}

    return cloud; 
} 
function mountains(color, min, max, noiseS) {

    noStroke(); 
    fill(color); 
    noiseSeed(noiseS); 

    beginShape(); 
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail + (millis() * terrainSpeed)); 
        var y = map(noise(t), 0, 1, min, max); 
        vertex(x, y); 
    }
    vertex(width, height); 
    vertex(0, height); 
    endShape(); 




}

For this project, I wanted to play with complimentary colors like purple and yellow and create a different version of a sunset landscape. The clouds are moving and the snow peaked mountains fluctuate in peaks.

Leave a Reply