abradbur- Project 10 – Landscape

sketch

var buildings = [];

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

function draw(){
    background(98, 45, 107);
    noStroke();
    //moon + moonshine
    fill(216, 214, 243);
    ellipse(340,50,50);
    fill(216, 214, 243, 51);
    ellipse(340, 50, 60);
    //stars
    fill(255);
    for (var i = 0; i < 1000; i++) {
        ellipse(random(width), random(height), 1);
    }
    //mountains
    push();
    beginShape(); 
    fill(40, 17, 53);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //cabins
    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.
    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(0); 
    stroke(0); 
    push();
    translate(this.x, height);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(254, 242, 103);
        rect(5, -15 - (i * floorHeight), this.breadth - 40, 10);
    }
    pop();
}


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

I had a pretty difficult time parsing out the example code for this project, so I didn’t make it as extravagant as I had first hoped. As you can (kind of) see from my original sketch, I’d wanted to include trees and little creatures that popped out every once in a while. I wanted to make something that reminded me of the landscape back home, which is basically just mountains over mountains with tiny little lights blinking out from the homes of rich people. I have a lot of fond memories of driving through mountain neighborhoods at night. I actually made myself a little homesick with this project.