project 11: landscape

midnight stroll
// isis berymon section D

var buildings = [];
var stars = [];
var streetlights = [];
var ground = 160;

function setup() {
    createCanvas(480, 200);
    frameRate(10);

    //initial scene
    for(var i =0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    for(var i=0; i< 30; i++){
        var rx = random(width);
        stars[i] = makeStar(rx);
    }
    for(var i = 0; i<3; i++){
        var rx = random(width);
        streetlights[i] = makeLight(rx);
    }
}

function draw() {
    background(81, 61, 128); //dark purple sky
    showScene();
    updateScene();
    //dark grey road
    fill(84);
    noStroke();
    rect(0, ground, width, height-ground);
}

function showScene(){ //draw and move all objects
    //show stars
    for(var i =0; i< stars.length; i++){
        stars[i].move();
        stars[i].draw();
    }
    //show buildings
    for(var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].draw();
    }
    //show streetlights
    for(var i= 0; i < streetlights.length; i++){
        streetlights[i].move();
        streetlights[i].draw();
    }
}

function updateScene(){ //remove and add to arrays
    //remove stars offscren
    var keepstar = [];
    for(var i = 0; i < stars.length; i++){
        if(stars[i].x + 3 > 0){
            keepstar.push(stars[i]);
        }
    }
    stars = keepstar;
    //add new stars randomly
    var nstr = .1;
    if(random(1) < nstr){
        stars.push(makeStar(width+3));
    }
    //remove buildings offscreen
    var keepbldg = [];
    for(var i = 0; i < buildings.length; i++){
        if(buildings[i].x + buildings[i].bw > 0){
            keepbldg.push(buildings[i]);
        }
    }
    buildings = keepbldg;
    //add new buildings randomly
    var nbldg = .03;
    if(random(1) < nbldg){
        buildings.push(makeBuilding(width));
    }
    //remove lights offscreen
    var keeplight = [];
    for(var i = 0; i < streetlights.length; i++){
        if(streetlights[i].x + 15 > 0){
            keeplight.push(streetlights[i]);
        }
    }
    streetlights = keeplight;
    //add new lights randomly
    var nlight = .005;
    if(random(1) < nlight){
        streetlights.push(makeLight(width));
    }
}

function makeStar(sx){ //star object constructor
    var star = {x: sx,
                y: random(ground),
                speed: -.7,
                move: moveLeft,
                draw: drawS}
    return star;
}

function drawS(){ //white star
    stroke(255);
    line(this.x, this.y-3, this.x, this.y+3);
    line(this.x-3, this.y, this.x+3, this.y);
}

function makeBuilding(bx){ //building object constructor
    var bldg = {x: bx,
                bw: round(random(50, 100)),
                bh: round(random(30, 120)),
                speed: -2,
                move: moveLeft,
                draw: drawB}
    return bldg;
}

function drawB(){
    fill(32, 27, 43); //dark purple grey building
    noStroke();
    rect(this.x, ground-this.bh, this.bw, this.bh);
    fill(95, 86, 115); //light purple grey shading
    rect(this.x, ground-this.bh, 6, this.bh);
    rect(this.x, ground-this.bh, this.bw, 3);
}

function makeLight(lx){
    var light = {x: lx,
                    speed: -2,
                    move: moveLeft,
                    draw: drawL}
    return light; //light object constructor
}

function drawL(){
    fill(112); //mid grey
    rect(this.x, 130, 5, 30);
    //flickering lights
    if(random(1) > .8){
        fill(237, 196, 114); //yellow
    } else {
        fill(122);
    }
    rect(this.x+5, 130, 10, 5); //grey streetlight with flickering light
}

function moveLeft(){ //move left every frame
    this.x += this.speed;
}

Leave a Reply