Steven Fei-Project 11-Generative Landscape

sketch

//Steven Fei
//zfei@andrew.cmu.edu
//project 11
//section-A
var stars = [];
function setup() {
    createCanvas(480, 480);
    frameRate(8);
    //set the initial display of the stars
    for(var i = 0; i<8; i++){
        var sx = random(width);
        var sy = random(50, height/3);
        stars[i] = makeStars(sx, sy);
    }
    
}



function draw() {
    background("black");
    //create the terrain in the far back of the canvas
    var terrain3 = terrain(30, 2, height/5, height * 3/4, 3);
    //create the terrain in the middle of the canvas
    var terrain2 = terrain(80, 2, height/3, height * 3/4, 2);
    //create the terrain in the front of the canvas
    var terrain1 = terrain("white", 2, height/2, height * 3/4, 1);
    //create the blue lake at the bottom of the canvas
    noStroke();
    fill(0,33,41);
    rect(0, height * 4/5, width, height);
    //create trees
    for (var x = 0; x < width; x+=5){
        var orange = random(80,150);
        stroke(240, orange, 80);//define the color of the tree to draw
        strokeWeight(1.2);
        push();
        translate(x * random(5,10), height * 4/5);
        drawTree(0, random(5,15), int(random(3,6)));//calling the function to draw the tree
        pop();
    }
    //update star by showing the stars and the moving positions of the stars
    updateStar();
    //only keep the stars that are still on the canvas
    removeStar();
    //add new stars under a certain probability
    addStars();
}
//showing the star positions
function updateStar(){
    for (var i = 0; i<stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}
//only keep the stars on the canvas
function removeStar(){
    var starKeep = [];
    for ( var i = 0; i < stars.length; i++){
        if(stars[i].x > 0){
            starKeep.push(stars[i]);
        }
    }
    stars = starKeep;
}
//add more stars by chance
function addStars(){
    var starProbability = 0.01;
    if(random(0,1) < starProbability){
        stars.push(makeStars(width,random(50,height/3)));
    }
}
//defining the moving speed of the star
function starMove(){
    this.x += this.speed;
}
//displaying the star by drawing the circle
function starDisplay(){
    fill("white");
    noStroke();
    push();
    translate(this.x, this.y);
    circle(0,0,this.size);
    pop();
}
//main function to make the star
function makeStars(birthX, birthY){
    var str = { x: birthX,
                y: birthY,
                speed: -1.5,
                size: random(5,15),
                move: starMove,
                display: starDisplay};
    return str;
                
}
//making the terrain
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
function terrain(color,strokeweight,min,max,noiseseed){
    var verticesX = [];//array to append values for x coordinates
    var verticesY = [];//array to append values for y coordinates
    noiseSeed(noiseseed);//decide the pseudo random number seed
    stroke(color);//the color to choose to draw the terrain
    strokeWeight(strokeweight);//the strokeweight to choose to draw
    noFill();
    beginShape();
    for ( var x = 0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, min, max);
        vertex(x,y);//generating the terrain points 
        verticesX.push(x);
        verticesY.push(y);
        if(verticesX.length > width){
            verticesX.shift();
            verticesY.shift();
        }
    }
    for ( var j = 0; j < verticesX.length; j++){
        line(verticesX[j], verticesY[j], verticesX[j],height);//add vertical coloring to the terrain
    }
    endShape();  
}
//function to draw trees by defining depth(number of branches), len(branch length), seed(upper limit of the branch counts)
function drawTree(depth, len, seed){
    if(depth < seed){
        rotate(radians(-10));
        drawBranch(depth,len, seed);
        rotate(radians(20));
        drawBranch(depth,len, seed);
    }
}
function drawBranch(depth, len, seed){
    line(0,0,0,-len);
    push();
    translate(0,-len);
    drawTree(depth + 1, len, seed);
    pop();
}

For this project, I was intended to create a serene atmosphere by the lake. The mountains are majorly created in 3 layers with different shades to represent a sense of depth and distance. Symbolic maple trees were drawn in different saturations of orange and different sizes and branch counts to have a “realistic” impression of the diverse range of the trees. The circular stars are moving in the upper part of the canvas to strengthen the sense of moving. By setting different moving speed of those different objects, I was aiming to deepen a spatial feeling in the visual hierarchy. The maple trees were moving fastest because they are relatively in the very front of the canvas, while the mountains are constantly moving slower, and the stars are the slowest. The project gives me some chances to make different objects and functions and use different strategies to fulfill those elements through building a connection between the draw function and the other specific functions I make for the elements.