Project 11-Landscape

/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A

This draws a moving scene.
*/

var buildings = [];
var clouds = [];
var hills = [];
var noiseParam=0;
var noiseStep=0.05;


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);

    // create an initial collection of clouds
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    // creates initial hills
    for (var i=0; i<width/5; i++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        hills.push(value);
        noiseParam+=noiseStep;
    }

}


function draw() {
    background(255,140,102);
    // draws outline around canvas
    stroke(0);
    strokeWeight(10);
    fill(255,140,102);
    rect(0,0,width,height);

    // draws sun
    strokeWeight(3);
    fill(183,52,52);
    circle(width/2,height/1.2,400);
    fill(229,134,81);
    circle(width/2,height/1.2,300);
    fill(225,185,11);
    circle(width/2,height/1.2,200);
    
    
    // begins the hill shape
    var x=0;
    stroke(0);
    strokeWeight(3);
    fill(93, 168, 96);
    beginShape();
    curveVertex(0, height);
    curveVertex(0, height);
    // loops through each of the values in the hills array
    for (i=0; i<hills.length; i++) {
        curveVertex(x, hills[i]);
        x+=15;
    }
    curveVertex(width, height);
    curveVertex(width, height);
    endShape();
    //removes the first value from the list and appends a new one
    //onto the end to make the terrain move
    hills.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    hills.push(value);
    noiseParam+=noiseStep;

    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability();

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutofView();
    addNewCloudsWithSomeRandomProbability();

    
}


function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

function updateAndDisplayClouds() {
    // update the clouds' positions and display them
    for (var i=0; i<clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

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


function addNewBuildingsWithSomeRandomProbability() {
    // add a new building
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

function addNewCloudsWithSomeRandomProbability() {
    // add a new cloud
    var newCloudLikelihood = 0.001;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}

// updates the position of every cloud frame
function cloudMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(53,156,249); 
    stroke(0);
    strokeWeight(3); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(255);
    //rect(this.breath/2, bHeight-20, this.breath/5, bHeight/5);
    rect(5, -35, 10, (bHeight/5));
    pop();

}

function cloudDisplay() {
    fill(255);
    noStroke();
    //stroke(0);
    //strokeWeight(3);
    push();
    //translate(this.x, height-40);
    ellipse(this.x, this.y, this.width, this.height);
    ellipse(this.x+this.width/2, this.y+3, this.width, this.height);
    ellipse(this.x-this.width/2, this.y+3, this.width, this.height);
    pop();
}


function makeBuilding(startX) {
    var bldg = {x: startX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function makeCloud(startX) {
    var cloud = {x: startX,
                y: random(20,90),
                width: random(10,20),
                height: random(10,20),
                speed: -1.0,
                move: cloudMove,
                display: cloudDisplay}
    return cloud;
}


function displayHorizon(){
    noStroke();
    fill(155,27,66);
    rect(0, height-50, width, 50);
    stroke(0);
    strokeWeight(3);
    line (0, height-50, width, height-50);

}