Project 11: Generative Landscape

For this project, I went with a simple scrolling sunset city & mountain view. The sun has a second ring around it just because I felt that it gave it more of a setting sun feeling. Then the buildings have flashing lights because I thought about how dorm/student living buildings when you look at them from the outside. Everyone seems to have different color LED lights lighting up their rooms in all different colors.

//Helen Cheng
//helenc1@andrew.cmu.edu
//Project 11
//Section C

var buildings = [];
var hill = [];
var noiseParam = 0;
var noiseStep = 0.01;
var n;
var hillPoint;


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

    //creates initial set of mountains
    for (i=0; i<=width/5; i++) {
        n = noise(noiseParam);
        hillPoint = map(n, 0, 1, 0, height);
        hill.push(hillPoint);
        noiseParam += noiseStep;
    }

    frameRate(10);
}


function draw() {
    background(93, 150, 168); 

    //setting sun
    fill(245, 188, 159);
    circle(width/2, height/2, 100);
    fill(250, 211, 125);
    circle(width/2, height/2, 50);

    drawHills();

    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildings();
    addNewBuildings(); 
}

function drawHills() {
    var x = 0;
    beginShape();
    vertex(0, height);
    stroke(0);
    fill(126, 168, 151);


    //draws hill shape
    for (i=0; i<width/5; i++) {
        vertex(5*i, hill[i]);
    }

    //appends new hill point and removes first
    hill.shift();
    vertex(width, height);
    n = noise(noiseParam);
    hillPoint = map(n, 0, 1, 0, height);
    hill.push(hillPoint);
    noiseParam += noiseStep;
    
    endShape(CLOSE);
}

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 removeBuildings(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;
}


function addNewBuildings() {
    var newBuildingLikelihood = 0.005; 
    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; 
    stroke(0);
    fill(245, 229, 201);
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(color(random(255), random(255), random(255))); 
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}


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


function displayHorizon(){
    stroke(0);
    fill(202, 245, 201);
    rect(0,height-50, width, height);
}