ifv-Project-10-Landscape

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-10
var buildings = [];
var persons = [];

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

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(50);
}


function draw() {
    background(200);

    displayStatusString();
    displayHorizon();

    updateAndDisplayBuildings();
    updateAndDisplayPersons();
    print(persons.length);
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability();
    removePersonsThatHaveSlippedOutOfView();
    addNewPersonsWithSomeRandomProbability();
}


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 updateAndDisplayPersons(){
    // Update the building's positions, and display them.
    for (var i = 0; i < persons.length; i++){
        persons[i].move();
        persons[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new 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 removePersonsThatHaveSlippedOutOfView(){

    var personsToKeep = [];
    for (var i = 0; i < persons.length; i++){
        if (persons[i].x + persons[i].thick > 0) {
            personsToKeep.push(persons[i]);
        }
    }
    persons = personsToKeep; // remember the surviving people (tragic)
}


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));
    }
}

function addNewPersonsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newPersonLikelihood = 0.007;
    if (random(0,1) < newPersonLikelihood) {
        persons.push(makePerson(width));
    }
}


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

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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var roofHeight = random(8,20);
    var bHeight = (this.nFloors * floorHeight)/2;
    fill(35, 28, 64);
    noStroke();
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    triangle(-20, -bHeight,this.breadth/2,(bHeight)-height,this.breadth+20,-bHeight);

    pop();
}

function personDisplay() {
    var headSize = 15;
    var bodyheight = this.tall;
    var bodythick = this.thick;
    var headCenter = bodyheight+headSize/2;
    var bodyCenter = bodyheight/2;
    fill(198, 28, 64,90);
    noStroke();
    push();
    translate(this.x,this.y);
    ellipseMode(CENTER);
    ellipse(0,-bodyCenter,bodythick,bodyheight);
    ellipse(0,-headCenter,headSize,headSize);
    pop();
}

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

function makePerson(birthLocationX){
  var person = {x: birthLocationX,
              y:height-50,
              tall: random(30,60),
              thick: random(15,40),
              speed: -1.0,
              eyeballs: random(1,4),
              move: personMove,
              display: personDisplay}
  return person;
}

function displayHorizon(){

  noStroke();

  var green = color(198, 28, 64);
  var yellow = color(229, 199, 31);

  var gradientSteps = 20;//how detailed will the gradient be
  var gradientStripWidth = width/gradientSteps;//compute how many strips of the same width to fill the sketch

  for(var i = 0; i < gradientSteps; i++){//for each gradient strip
    var t = map(i,0,gradientSteps,0.0,1.0);//compute i mapped from 0-gradientSteps to 0.0->1.0
    //this value will plug into lerpColor which does the color interpolation
    var interpolatedColor = lerpColor(green,yellow,t);
    //finally, use the color and draw some boxes
    fill(interpolatedColor);
    rect(0,i*gradientStripWidth,height,gradientStripWidth);
  }

    fill(35, 28, 64);
    rectMode(CORNER);
    rect(0,height-50,width,height-50)
}


function displayStatusString(){
    noStroke();
    fill(0);
    var statusString = "# Buildings = " + buildings.length;
    text(statusString, 5,20);
}

I wanted to make a haunted forest because I’m sad halloween has ended. The trees are sparse and skinny because they are based on the trees I remember in a certain forest in Oregon. I decided to make the ghosts a a transparent version of the red in the sky instead of white (which most people default to) bc it has better visual harmony.