Project 11 – Generative Landscape

//Maggie Ma
//Section D
//Generative Landscape

var buildings = [];
var hills = [];
var noiseParam = 0;
var noiseStep = 0.02;
var trees = [];
var birds = [];


function setup() {
    createCanvas(400, 500); 
    strokeWeight(4);
    
    // create an initial collection of buildings
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    //create an initial collection of birds
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        birds[i] = makeBird(rx);
    }

    // drawing hills in the back
    for (var i = 0; i<width/5 +1; i++) {
    	var n = noise(noiseParam);
    	var value = map(n,0,1,0,height+50);
    	hills.push(value);
    	noiseParam+=noiseStep;
    }
    frameRate(15);
}


function draw() {
    background(255,203,186); //light pink

    //sun
    fill(253,165,0); //yellow
    circle(width/2, height/2-70, 120.438 );

    //birds
    updateandDisplayBird();
    removeBirdThatHaveSlippedOutOfView();
    addNewBirdWithSomeRandomProbability();	

    //hills
    drawHills();
    displayHorizon();

    //building
    updateAndDisplayBuilding();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

   //trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 
}

function drawHills() {
	hills.shift();
    var n = noise(noiseParam);
    var value = map(n,0,1,0,height+50);
    hills.push(value);
    noiseParam += noiseStep;

    beginShape();
    vertex(0,height);
    for(var i =0; i <= width/5; i++) {
    	fill(255,163,130); //pink color
    	strokeWeight(4);
    	vertex((i*5),hills[i]);
    
    }
    vertex(width,height);
    endShape();
}

//creating trees
function makeTree(birthLocationX) {
    var t = {x: birthLocationX,
                breadth: round(random(10,30)),
                speed: -5.0,
                y: random(10, 40), //randomize tree size and location
                w: random(30, 40),
                h: random(40, 60),
                move: treeMove,
                display: treeDisplay}
    return t;
}

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

function treeDisplay() {
    push();
    translate(this.x, height -125);
    strokeWeight(4); 
    fill(80,202,119);
    //leaves
  	ellipse(this.x,this.y, this.w, this.h);
  	//trunk
  	line(this.x, this.y+10, this.x, this.y+70);
    pop();
}

function updateAndDisplayTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}
function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.07; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

//creating building
function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 70,
                speed: -8.0,
                w: random(70,110), //randomize width
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

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

function buildingDisplay() {
	push();
    strokeWeight(4); 
    fill(253,165,0); //yellow block on right side
  	rect(this.x ,315.478 ,this.w ,137.574);
  
  	rect(this.x - 55.901, 364.514 ,15.016 ,88.538); //yellow pillars
  	rect(this.x +7.51, 364.514 ,15.016 ,88.538);
  	rect(this.x-28.083,180.775,23.237,26.131); //yellow top
  	fill(255,255,255);
  	rect(this.x-33.153,206.996,33.377,33.377); //middle section
  	fill(253,165,0);
  	rect(this.x-21.845,219.566,10.762,20.807);
  	fill(255,255,255);
  	rect(this.x-40.661, 240.463,48.108 ,212.59 ); //bottom base
  	fill(0,195,227);
  	rect(this.x-40.661,259.105,15.016 ,25.094); //turquoise designs
  	rect(this.x-40.661,302.931,15.016 ,25.094);
  	rect(this.x-7.508,259.105,15.016 ,25.094 );
  	rect(this.x-7.508, 302.931,15.016 ,25.094);
  	fill(225,43,0);
  	rect(this.x-40.885,346.758,15.016,106.295); //red designs
  	rect(this.x-7.508,346.758,15.016,106.295);
  	line(this.x-25.869,240.8 ,this.x-25.869,453.053);
  	line(this.x-7.508,240.8 ,this.x-7.508,453.053);

    pop();
}

function updateAndDisplayBuilding(){
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingToKeep.push(buildings[i]);
        }
    }
    buildings = buildingToKeep;
}
function addNewBuildingsWithSomeRandomProbability() {
    var newBuildingLikelihood = 0.015; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

//creating birds
function updateandDisplayBird(){
    for (var i = 0; i < birds.length; i ++){
        birds[i].move();
        birds[i].display();
    }
}

function removeBirdThatHaveSlippedOutOfView(){
    var keepBirds=[];
    for (var i = 0; i < birds.length; i++) {
        if (birds[i].x < width) {
            keepBirds.push(birds[i]);
        }
    }
    birds = keepBirds;
}

function addNewBirdWithSomeRandomProbability(){
    var newBirdLikelihood = 0.01; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(15, 15));
    }
}

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

function birdDisplay(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, this.y);
    //wings
    triangle(0, 0, 3, 0, -2, -3);
    triangle(0, 0, 3, 0, 2, 3);
    pop();
}

function makeBird(birthLocationX, birthLocationY){
    var bird = {x: birthLocationX,
                y:random(100,200),
                speed:random(2, 9),
                move: Birdmove,
                display: birdDisplay};
    return bird;
}
//creating grass horizon line
function displayHorizon(){
    fill(106,207,124);
    stroke(4);
    rect(0, height-50, width, height-50);
}