Project 11 – Generative Landscape

My project is a simple landscape with hills, trees, buildings, birds, and the sun. The trees vary in size and location, the building varies in width, and the birds vary in location and speed.

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

Leave a Reply