Project_11_landscape

Y-sketch-landscapeDownload
//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

// the general idea of this project is presenting an array of buildings 
//which are on the hill and are coverd by trees.

var buildings = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.02;
var hillHeight = [];
// var clouds = [];   
// var land = [];
// var cX = random(100,200);
// var cY = random(100,200);


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

    //hill
    for (var i = 0; i <= width/3; i+=1){
       
        var n = noise(noiseParam);

        var value = map(n,0,1,0,width);    

        //hillHeight.shift();

        hillHeight.push(value);

        noiseParam += noiseStep;

        
    }

    //buildings
    for(var i = 0; i < 10; i ++){
        var rx = random(width);
        buildings[i]=makeBuilding(rx);
    }

    frameRate(10);
    
}

function draw(){
    background(144,232,232);

    //sun
    fill(223,242,136);
    circle(400,50,50);

    //hill
    noStroke();

    var n = noise(noiseParam);

    var value = map(n,0,1,0,width);    

    hillHeight.shift(); //update value in array

    hillHeight.push(value);

    noiseParam += noiseStep;
    
    for (var i = 0; i < width/5 ; i += 1){

        fill(50,120,20); //square shape
        beginShape();
        vertex(5*i,hillHeight[i]);
        vertex(5*i+5, hillHeight[i+1]);
        vertex(5*i+5,height);
        vertex(5*i,height);   
        endShape(); 
    }



    //displayHorizon();
    
    //buildings
    updateBuildings();
    removeBuilding();
    addNewBuilding();

    //tree
    
    updateTrees();
    removeTrees();
    addNewTrees();
    
    fill(181,170,156);
    rect(0,460,480,30);
  

}

//horizon

function displayHorizon(){
    stroke(0);
    line(0,height-50,width,height-50);
}



//buildings

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

function removeBuilding(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i ++){
        if (buildings[i].x + buildings[i].breadth > 0){
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;

}

function addNewBuilding(){
    if(random(0,1)<0.03){
        buildings.push(makeBuilding(width-2));
    }

}

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

function makeBuilding(birthLocationX){
    var bldg = {
        x:birthLocationX,
        y:random(400,450),
        breadth:random(30,50),
        r:random(255),
        b:random(255),
        g:random(255),
        speed : -2.0,
        nFloors : round(random(2,6)),
        move:buildingMove,
        display:buildingDisplay
    }
    return bldg;
}



function buildingDisplay(){
    var floorHeight = 25;
    var bHeight = this.nFloors*floorHeight;
    fill(this.r,this.g,this.b);
    stroke(0);
    push();
    translate(this.x,this.y);
    rect (0,-bHeight-10,this.breadth,bHeight);
    stroke(200);
    for(var i = 0; i < this.nFloors; i ++){
        fill(this.r+10,this.g-20,this.b+50);
        //rect(5,-15-(i*floorHeight),this.breadth-10, 10);
        rect(5,-20-(i*floorHeight),this.breadth-10, 10);
    }
    pop();
}

//tree

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

function removeTrees(){
    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 addNewTrees(){
    if(random(0,1)<0.1){
        trees.push(makeTrees(width+30));
    }

}

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

function makeTrees(birthLocationX){
    var tree = {
        x:birthLocationX,
        y:random(400,450),
        treeHeight:random(30,150),
        breadth:random(10,20),
        width:random(50,80),
        r:random(100,120),
        b:random(120,130),
        g:random(150,255),
        speed : -5.0,
        move:treeMove,
        display:treeDraw,
    }
    return tree;
}



function treeDraw(){
    var treeHeight;
    
    push();
    translate(this.x,this.y);
    fill(128,101,64);
    rect(0,0,10,50);
    fill(this.r,this.g,this.b);
    ellipse (0,0,this.width,treeHeight);

    pop();
}


I would like to present building on hills which are cover by trees.

Leave a Reply