Fanjie Mike Jin — Project 11 — Landscape

sketch

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11

// global variables declared to hold objects
// array for tree objects
var trees = []

function setup() {
    //color preprared for the gradient effect
    c1 = color(250, 100, 0);
    c2 = color(204, 143, 0);
    createCanvas(480, 480);
    frameRate(100);  
    }
function draw() {
    //draw the gradient background 
    for (var i = 0; i < height; i++) {
        var inter = map(i, 70, 110, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, i, width, i);
    }
    //draw the sun in the background 
    noStroke();
    fill(234, 120, 120, 200);  
    ellipse(100, 60, 90, 90);
    fill(255, 146, 128, 200);  
    ellipse(100, 60, 76, 76);

    mountainBackground(); //mountain 
    land()
    updatetrees();
    removetrees();
    newtrees(); 
}

function updatetrees(){
    // Update the x positions of the trees and display them 
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}
function removetrees(){
    //remove the building from the array once it dropped off the left edge
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    // the exsiting trees will be kept 
    trees = treesToKeep;
}


function newtrees() {
    // add a new tree to the end
    var probability = 0.017; 
    if (random(0,1) < probability) {
        trees.push(drawtrees(width));
    }
}

//update position of tree every frame
function treesMove() {
    this.x += this.speed;
}
    
//display the trees
function treesDisplay() {
    noStroke();
    //leaves
    fill(50, 235, 173);
    triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
    triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
    triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
    //trunk
    stroke(194, 245, 228);
    line(this.x, 350, this.x, 420);
}


function drawtrees(px) {
    var dt = {x: px,
    //trees obeject properties 
                breadth: 30,
                speed: -1.0,
                move: treesMove,
                display: treesDisplay}
    return dt;
}

function mountainBackground() {
    //makes mountains in the back
    terrain = 0.009;
    terrain2 = 0.014;
    terrainSpeed = 0.0003;
    //use noise function to draw random background contour of the furthest mountains 

    stroke(30, 148, 143,200);
    beginShape(); 
    //make slowly rolling hills
    for (var j = 0; j < width; j++) {
        var t = (j * terrain) + (millis() * terrainSpeed);
        var y2 = map(noise(t), 0, 1, 200, 10);
        line(j, y2, j, height); 
    }
    endShape();

    //use noise function to draw random background contour of the closer mountains 
    stroke(65, 158, 155);
    beginShape(); 
    for (var j = 0; j < width; j++) {
        var t = (j * terrain2) + (millis() * terrainSpeed);
        var y2 = map(noise(t), 0, 1, 400, 10);
        line(j, y2, j, height); 
    }
    endShape();
}


function land() {
//makes the land in the foreground appear 
    fill(46, 84, 78);
    rect(0, 420, 480, 130);
}

When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.