Project 11 – Generative Landscape

/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

// Variables for people 
var px = [];
var py = [];
var pdx = [];
var pc = [];
var skin = []; 
var pWidth = []; 
var pHeight = []; 

// Variables for clouds 
var cx = [];
var cy = [];
var cdx = [];
var cWandH = []; 

var buildings = [];
var houses = []; 

function preload() {
    // loading image files 
    finger = loadImage("https://i.imgur.com/DPWPwwe.png"); 
    police = loadImage("https://i.imgur.com/9xYWNnM.png"); 
    taxi = loadImage("https://i.imgur.com/ywwvyoP.png")
} 

function setup() {
    createCanvas(480,480); 
    frameRate(20); 

    // Finger 
    fin = new Object(); 
    fin.image = finger; 
    fin.x = 200;
    fin.y = 460; 
    fin.dx = 1; 
    fin.dy = 1; 
    fin.width = 290; 
    fin.height = 200; 
    fin.move = fingerMove; 
    fin.draw = fingerDraw;

    pol = new Object(); 
    pol.image = police; 
    pol.x = 700; 
    pol.y = 255; 
    pol.dx = 15; 
    pol.width = 240; 
    pol.height = 240; 
    pol.move = polMove; 
    pol.draw = polDraw; 

    tax = new Object(); 
    tax.image = taxi; 
    tax.x = 900; 
    tax.y = 275; 
    tax.dx = 10; 
    tax.width = 230
    tax.height = 230 
    tax.move = taxiMove; 
    tax.draw = taxiDraw; 

    // People
    for (var i = 0; i < 10; i ++){
        px[i] = random(25, width - 25); 
        py[i] = 350; 
        pdx[i] = random(1,3); 
        pc[i] = color(random(255), random(255), random(255));
        skin[i] = color(random(55,200), 80, 90); 
        pWidth[i] = random(20,50); 
        pHeight[i] = random(30,80); 
    }

    // Clouds 
    for (var i = 0; i < 5; i ++){
        cx[i] = random(20,460); 
        cy[i] = random(30,90); 
        cdx[i] = 2; 
        // cloud width and height 
        cWandH[i] = random(20,30); 
    }

    // Building 
    for (var j = 0; j < 5; j ++){
        var bx = random(width); 
        buildings[j] = makeBuildings(bx); 
    }

    // House 
    for (var k = 0; k < 3; k ++){
        var hx = random(width); 
        houses[k] = makeHouses(hx); 
    }

    frameRate(10); 
} 

function draw() {
//  background(130,208,218); 
    background(200,241,208);

    sidewalk(); 
    road(); 

    // Draw clouds, make them move right, and reappear if they move off canvas 
    for (var i = 0; i < 5; i++){
       cloud(cx[i], cy[i], cdx[i], cWandH[i], cWandH[i]);
       cx[i] += cdx[i]; 

       if (cx[i] > width + 10){
           cx[i] = -40; 
       }
   }

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

    updateAndDisplayHouses();
    removeHousesThatHaveSlippedOutOfView();
    addNewHousesWithSomeRandomProbability(); 

    // Make buildings reappear if they go off the right side of the canvas 
    // Reappear on the left side 
    for (var j = 0; j < buildings.length; j++){
        if (buildings[j].x > width + 20) {
           buildings[j].x = -60; 
       }
   }

    // Make houses reappear if they go off the right side of the canvas 
    // Reappear on the left side 
    for (var k = 0; k < houses.length; k ++){
        if (houses[k].x > width + 20) {
            houses[k].x = -100; 
        }
    }

    // Make people reappear if they go off the right side of the canvas 
    // Reappear on the left side     
    for (var i = 0; i < 10; i ++){
        people(px[i], py[i], pdx[i], pc[i],skin[i],pWidth[i], pHeight[i]); 
        px[i] += pdx[i]; 

        if(px[i] > width+50){
           px[i] = -50; 
        }
    }

    pol.draw(); 
    pol.move(); 

    tax.draw(); 
    tax.move();  

    drawiPhone();  
    fin.draw(); 
    fin.move(); 

    if (frameCount >= 60){
    record(); 
    }

}

 function people(px, py, pdx, pc,skin, pWidth, pHeight){
    fill(pc); 
    noStroke(); 
    // Shirt 
    ellipse(px, py, pWidth, pHeight); 
    // Head 
    fill(skin); 
    ellipse(px,py-25,20,20); 
 }


function fingerDraw(){
    image(finger, this.x, this.y, this.width, this.height); 
}

// Move finger to record button 
function fingerMove(){ 
    if (fin.x > 142 & this.y > 378){
    this.x -= this.dx; 
    this.y -= this.dy; 
    }
}

function polDraw(){
    image(police, this.x, this.y, this.width, this.height); 
}

function polMove(){
    this.x -= this.dx; 
    if (this.x <= -800){
        this.x = 500; 
    }
}

function taxiDraw(){
    image(taxi, this.x, this.y, this.width, this.height); 
}

function taxiMove(){
    this.x -= this.dx; 
    if (this.x <= -1000){
        this.x = 500; 
    }
}

//              BUILDINGS                   //
function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var j = 0; j < buildings.length; j++){
        buildings[j].move();
        buildings[j].display();
    }
}

function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var j = 0; j < buildings.length; j++){
        if (buildings[j].x + buildings[j].breadth > 0) {
            buildingsToKeep.push(buildings[j]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingsLikelihood = .0006; 
    if (random(0,1) < newBuildingsLikelihood) {
        buildings.push(makeBuildings(width));
    }
}

// Make buildings move to right 
function buildingsMove() {
    this.x += this.speed;

}

function buildingsDisplay() {
    var floorHeight = 30;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke(); 
    fill(this.col); 
    translate(this.x, height - 40);
    // Drawing the actual buildings
    rect(0, -bHeight-110, this.breadth, bHeight);
//    fill(18, 126, 190);  
    // Windows 
    for (var i = 0; i < this.nFloors; i++) {
        fill(18, 126, 190);  
        rect(5, -130 - (i * floorHeight), this.breadth - 10, 10);
    }
    // Building antennae 
    stroke(18,126,190); 
    strokeWeight(2); 
    line(5,-bHeight-110,5,-bHeight-120); 
    line(10,-bHeight-110,10, -bHeight-130); 
    noStroke(); 
    pop();
}

function makeBuildings(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: 4.0,
                col: color(121,204,221),
                nFloors: round(random(5,10)),
                move: buildingsMove,
                display: buildingsDisplay}
    return bldg;
}

//              HOUSES                   //
function updateAndDisplayHouses(){
    for (var k = 0; k < houses.length; k++){
        houses[k].move(); 
        houses[k].display(); 
    }
}

function makeHouses(birthLocationX){
    var houses = {x: birthLocationX,
                 breadth: 100,
                 speed: 4.0, 
                 col1: color(232,175,104),
                 col2: color(182,110,125),
                 nFloors: round(random(2,4)), 
                 move: housesMove, 
                 display: housesDisplay}
    return houses; 
}

function removeHousesThatHaveSlippedOutOfView() {
    var housesToKeep = []; 
    for (var k = 0; k < houses.length; k++){
        if (houses[k].x + houses[k].breadth > 0) {
            housesToKeep.push(houses[k]); 
        }
    }
    houses = housesToKeep; 
}


function addNewHousesWithSomeRandomProbability() {
    var newHousesLikelihood = .0001; 
    if (random(0,1) < newHousesLikelihood) {
        houses.push(makeHouses(width)); 
    }
}

function housesMove() {
    this.x += this.speed; 
}

function housesDisplay() {
    var floorHeight = 20; 
    var hHeight = this.nFloors * floorHeight; 
    push(); 
    noStroke(); 
    fill(this.col1); 
    translate(this.x, height-30); 
    rect(0, -hHeight - 110, this.breadth, hHeight); 
    fill(this.col2); 
    triangle(0, -hHeight - 110, this.breadth, -hHeight - 110, this.breadth/2, -hHeight - 140); 
    rect(30, -hHeight - 90, this.breadth - 60, hHeight - 20); 
    fill(252, 197, 132); 
    ellipse(50, -hHeight - 110 , 8, 8); 
    pop(); 
}

function cloud(cx, cy, cdx, cWandH, cWandH){
    push(); 
    stroke(255); 
    strokeWeight(20); 
    line(cx, cy, cx+30, cy); 
    pop(); 
    fill(255);
    ellipse(cx,cy,cWandH, cWandH); 
    ellipse(cx+10,cy-10,cWandH, cWandH); 
    ellipse(cx+20,cy,cWandH, cWandH); 
}

function drawiPhone(){
    fill(0); 
    // top rectangle
    rect(130,40,200,60); 
    // left side 
    rect(130,40,20,400); 
    // right side 
    rect(330,40,20,400); 
    // bottom rectangle 
    rect(130,380,200,60) 
    // home button 
    fill(255); 
    ellipse(236,416,31,31); 
    fill(33);
    ellipse(240,416,33,33);  
    // small rectangle at top 
    fill(58); 
    rect(215,65,50,10); 
    // glass shine 
    push(); 
    stroke(255); 
    strokeWeight(10); 
    line(160,140,200,110); 
    line(160,170,240,110); 
    line(240,360,310,305); 
    line(272,370,315,336); 
    pop(); 
} 

function sidewalk(){
    noStroke(); 
    fill(236,205,158); 
    rect(0,330,480,70); 
    fill(132,64,64); 
    rect(0,390,480,10); 
}

function road(){
    fill(180,145,126); 
    rect(0,400,480,80); 
}

// REC button on iPhone 
function record(){
    fill(255,0,0); 
    ellipse(270,124,13,13); 
    textSize(20);     
    text("REC", 280, 130); 
}