Author: jinheel1@andrew.cmu.edu

jinheel1_project-10

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-10

var buildings = [];
var ourLordandSaviour;

function preload() {
	ourLordandSaviour = loadImage("http://i.imgur.com/b4dYgGz.jpg"); //I don't know
}

function setup() {
    createCanvas(600, 400); 

    ourLordandSaviour.loadPixels();
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(30);
}


function draw() {
	var skyCol = color(135,206,235);
    background(skyCol); //sky color backdrop

    image(ourLordandSaviour, 25, 0);
    
    displayGround(); //displaying grass

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


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 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 addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    fill("red"); //red windows and roofs
    triangle(0, -bHeight, //roofs
    	this.breadth, -bHeight, 
    	this.breadth/2, 3 / 2 * -bHeight);
    stroke(200); 

    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}

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


function displayGround(){
	var groundCol = color(66, 244, 86);
	fill(groundCol);
    rect(0,height/2, width, height); 
}

I used the template and manipulated and added various elements to simulate a suburb.

P.S., This has been a very long week and weekend for me… I apologize for the lackluster submission. That said, I added in something that I hope will at least make someone smile, if not be impressed. Any partial credit received is greatly appreciated.