Project 11: Generative Landscape

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Generative Landscape

var hills = []; //hills array
var trees = [];
var treesShowing = [];
var clouds = [];
var cloudsShowing = [];
var counter = 0;
var cloudCounter = 0;
var noiseParam = 0;
var noiseStep = 0.002;


function setup() {
    createCanvas(480, 300);
    //trees 
    for (var i = 0; i < 20;i++){
        var trs = random(width);
        trees[i] = makeTrees(trs);
    }
    //hills
    for (var i=0; i<width/2+1; i++){
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        noiseParam += noiseStep;
        hills.push(value);
    }

      for (var i = 0; i < 5; i ++) {
        var cloudX = random(width);
        var cloudY = random(0, 40);
        cloudsShowing[i] = makeClouds(cloudX, cloudY);
    }

    frameRate(20);
}

function draw() {
    background(165,182,182);
    noStroke();
    
    //sun
    fill(204,102,0);
    circle(40,50,30);
    

    //hills fill shape
    beginShape(); 
    fill(56,87,33);
    vertex(0, height);
    for (var i=0; i<width/2; i+=1){
        vertex(i*5, hills[i]);
    }
    vertex(width, height);
    endShape();
    hills.shift();
    hills.push(map(noise(noiseParam), 0, 1, 0, height));
    noiseParam += noiseStep; //move sideways

    updateAndDrawClouds();
    removeCloudsOffScreen();
    addNewClouds();

    updateandDrawTrees();
    removeTreesOffScreen();
    addNewTrees();
    
}

function updateandDrawTrees(){
    for(var i=0; i < treesShowing.length; i++){
        treesShowing[i].move();
        treesShowing[i].draw();
    }

}

function removeTreesOffScreen(){
    var treesToKeep = [];
    for (var i = 0; i < treesShowing.length; i++){
        if (treesShowing[i].x+20 > 0) {
            treesToKeep.push(treesShowing[i]);
        }
    }
    treesShowing = treesToKeep; // remember showing trees
}

function addNewTrees(){
    counter+=1;
    if (counter % 25 == 0){
        treesShowing.push(makeTrees(width, random(150,300)));
    }
}

function makeTrees(tx, ty){
    var trees = {x:tx, y:ty, 
        width:random(10, 20), 
        height:random(50, 90), 
        r:random(75,200), g:random(75,100), b: 0,
        speed: -1.0,
        move: treesMove,
        draw: drawTrees }
    return trees;

}

//draw trees
function drawTrees(){
    fill(160,82,45);
    rect(this.x, this.y, this.width, this.height);
    fill(this.r, this.g, this.b);
    circle(this.x-5, this.y-10, 50);
    circle(this.x+20, this.y-10, 50);
    circle(this.x+5, this.y-20, 50);
}

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




function updateAndDrawClouds(){
    for (var i = 0; i < cloudsShowing.length; i++) {
        cloudsShowing[i].move();
        cloudsShowing[i].draw();
    }
}

function removeCloudsOffScreen(){
    var cloudsToKeep = [];
    for (var i = 0; i < cloudsShowing.length; i++){
        if (cloudsShowing[i].cloudX + 10 > 0) {
            cloudsToKeep.push(cloudsShowing[i]);
        }
    }
    cloudsShowing = cloudsToKeep;
}

function addNewClouds(){
  cloudCounter+=1;
    if (cloudCounter % 100 == 0){
        cloudsShowing.push(makeClouds(width, random(0,60)));
    }
}

function makeClouds(cx, cy){
    var c = {cloudX: cx,
             cloudY: cy,
             cloudSpeed: -1,
             move: cloudMove,
             draw: cloudDraw}
    return c;
}

function cloudMove(){
    this.cloudX += this.cloudSpeed;
}

function cloudDraw(){
    fill(165);
    noStroke();
    ellipse(this.cloudX, this.cloudY - 5, 60, 50);
    ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);
    ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);
    ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);
    ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);
}

My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I’ve struggled to make beautiful projects, but I’m pretty satisfied with this one.

Leave a Reply