PROJECT-10 (generative landscape)

// 15-104
// SEAN CHEN

var bgbuildings = [];
var forebuildings = [];
var sidewalk = [];
var dash = [];
var light, bgCloud, foreCloud;
var frames = [];
var run = [];

function preload() {
    light = loadImage('https://i.imgur.com/147kNrs.png');
    bgCloud = loadImage('https://i.imgur.com/Fn6e7H6.png');
    foreCloud = loadImage('https://i.imgur.com/PNyKohG.png');
    frames[0] = loadImage('https://i.imgur.com/xxj2N5D.png');
    frames[1] = loadImage('https://i.imgur.com/ju233XV.png');
    frames[2] = loadImage('https://i.imgur.com/En4Sjg2.png');
    frames[3] = loadImage('https://i.imgur.com/KXPlTB9.png');
    frames[4] = loadImage('https://i.imgur.com/Ya0obgN.png');
    frames[5] = loadImage('https://i.imgur.com/wFN72zO.png');
    frames[6] = loadImage('https://i.imgur.com/DtMtZEq.png');
    frames[7] = loadImage('https://i.imgur.com/oEUisa6.png');
}

// update scene objects
function sceneUpdate(){
    for (var i = 0; i < bgbuildings.length; i++){
        bgbuildings[i].move();
        bgbuildings[i].display();
    }
    for (var i = 0; i < forebuildings.length; i++) {
        forebuildings[i].move();
        forebuildings[i].display();
    }
    for (var i = 0; i < dash.length; i++) {
        dash[i].move();
        dash[i].display();
    }
    for (var i = 0; i < run.length; i++) {
        run[i].move();
        run[i].display();
    }
    for (var i = 0; i < sidewalk.length; i++) {
        sidewalk[i].move();
        sidewalk[i].display();
    }
}

// adding and deleting excess objects
function shiftScene() {
    var buildingsToKeep = [];
    for (var i = 0; i < bgbuildings.length; i++) {
        if (bgbuildings[i].x + bgbuildings[i].breadth > 0) {
            buildingsToKeep.push(bgbuildings[i]);
        }
    }
    bgbuildings = buildingsToKeep;
    for (var i = 0; i < forebuildings.length; i++) {
        if (forebuildings[0].x + forebuildings[0].width < 0) {
            forebuildings.push(makeBuildingFore((forebuildings.length-1)*95));
            forebuildings.shift();
        }
    }
    for (var i = 0; i < sidewalk.length; i++) {
        if (sidewalk[0].x + 50 < 0) {
            sidewalk.push(makeSidewalk(width + width/7));
            sidewalk.shift();
        }
    }
    for (var i = 0; i < dash.length; i++) {
        if (dash[0].x + width/7 < 0) {
            dash.push(makeDash(width));
            dash.shift();
        }
    }
}

// randomly adding background buildings
function bldgProb() {
    var newBuildingLikelihood = 2.5; 
    if (random(0,100) < newBuildingLikelihood) {
        bgbuildings.push(makeBuilding(width));
    }
}

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

// draw background building and windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(53); 
    stroke(0); 
    push();
    translate(this.x, height - 60);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i++) {
        for (var j = 0; j < this.breadth/20; j++) {
            fill(155, 133, 38);
            circle(j*15+10, -10-(i * floorHeight), 10);
        }
    }
    pop();
}

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

// drawing foreground buildings with long windows
function buildingDisplayFore() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;
    fill(120);
    stroke(0);
    push();
    translate(this.x, height - 60);
    rect(0, -bHeight, this.width, bHeight+10);
    for (var i = 0; i < this.nFloors; i++) {
        fill(155, 133, 38);
        rect(5, -10-(i*floorHeight), this.width-10, floorHeight-10, 5);
    }
    pop();
}

function makeBuildingFore(birthLocationX) {
    var bldg = {x: birthLocationX,
                width: 90,
                speed: -2,
                nFloors: round(random(3, 6)),
                move: buildingMove,
                display: buildingDisplayFore
                }
    return bldg;
}

// adding street lights
function sidewalkDisplay() {
    image(light, this.x, height-85, 57, 50);
}

function makeSidewalk(birthLocationX) {
    var swalk = {x: birthLocationX,
                 speed: -2.5,
                 width: width/4,
                 move: buildingMove,
                 display: sidewalkDisplay
                }
    return swalk;
}

// adding street dashes
function dashDisplay() {
    stroke(144, 133, 0);
    line(this.x, height-20, this.x + width/14, height-20);
}

function makeDash(birthLocationX) {
    var d = {x: birthLocationX,
             speed: -2.5,
             width: width/7,
             move: buildingMove,
             display: dashDisplay
            }
    return d;
}

// adding running dude
function charDisplay() {
    image(frames[this.frame], this.x, 243, 30, 27);
}

function frameMove() {
    if (this.frame == 7 & this.step%3 == 0) {
        this.frame = 0;
    } else if (this.step%3 == 0) {
        this.frame++;
    }
    this.step++;
}

function makeChar(birthLocationX) {
    var c = {x: birthLocationX,
             frame: 0,
             step: 0,
             move: frameMove,
             display: charDisplay
            }
    return c;
}

function setup() {
    createCanvas(450, 300);
    background(5, 5, 45);
    // create an initial collection of buildings
    for (var i = 0; i < 7; i++){
        var rx = random(width);
        bgbuildings[i] = makeBuilding(rx);
        forebuildings[i] = makeBuildingFore(i * 95);
        dash[i] = makeDash(i * width/6);
    }
    for (var i = 0; i < 5; i++) {
        sidewalk[i] = makeSidewalk(i * width/4);
    }
    for (var i = 0; i < frames.length; i++) {
        run[i] = makeChar(10);
    }
    frameRate(30);
}

function draw() {
    background(5, 5, 45);
    //backgournd cloud
    image(bgCloud, 0, 0, 600, 100);
    // road and sidewalk
    fill(0);
    rect(0, height-50, width, 60);
    fill(66);
    rect(0, height-60, width, 20);
    // updatinga and displaying scene objects
    sceneUpdate();
    shiftScene();
    bldgProb(); 
    push();
    // layering transparent clounds
    tint(255, 127);
    image(foreCloud, 0, 0, 600, 100);
    pop();
}