Eunice Choe – Project 10 – Landscape

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-10*/

var cloud = [];
var trees = [];
var terrainSpeed = 0.0001;
var terrainDetail1 = 0.005;
var terrainDetail2 = 0.008;


function setup() {
    createCanvas(480,300);
    angleMode(DEGREES);
    // initial collection of trees and clouds
    for (var i = 0; i < 10; i++) {
        var cloudX = random(width);
        var rx = random(width);
        cloud[i] = makeCloud(cloudX);
        trees[i] = makeTree(rx);
    }
}

function draw() {
    background(255, 223, 197);
    // dark mountains in background
    push();
    beginShape();
    fill(104, 101, 181);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y - 50);
    }
    vertex(width, height);
    endShape();
    pop();

    // light mountains in background
    push();
    beginShape();
    fill(165, 168, 199);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    pop();

    displayHorizon();
    updateTrees();
    removeTrees();
    randomTrees();
    fill(165, 168, 199);

    // drawing and moving the transparent clouds
    for(var i = 0; i < cloud.length; i++) {
        cloud[i].draw();
        cloud[i].move();
    }
}

function cloudDraw() {
    push();
    translate(this.xPos, this.yOffset);
    stroke(255, 255, 255, 60);
    strokeWeight(this.cHeight);
    line(0, 0, this.cSize, 0);
    pop();
}

// when moving clouds reach edge
// send them to other edge with random position, size, height
function cloudMove() {
    this.xPos += this.speed;
    if(this.xPos < 0 - this.cSize - 30) {
        this.cHeight = random(10, 50);
        this.cSize = random(30, 150);
        this.xPos = width + this.cSize + random(-25, 25);
    }
}

function makeCloud() {
    var cloud = {xPos: random(width), //, width*4
                speed: random(-0.4, -0.3),
                cSize: random(30, 150),
                cHeight: random(20, 60),
                yOffset: random(50, height),
                draw: cloudDraw,
                move: cloudMove};
    return cloud;
}

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

// if trees hit edge, then remove from array
function removeTrees(){
    var keepTrees = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            keepTrees.push(trees[i]);
        }
    }
    trees = keepTrees;
}

// with probability, add tree to the end
function randomTrees() {
    var newTreeLikelihood = 0.007;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

// update position of tree every frame
function treeMove() {
    this.x += this.speed;
}


// drawing the trees
function treeDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;
    noStroke();
    // tree trunk
    push();
    translate(this.x, height - 100);
    fill(204, 187, 145);
    rect(0, -bHeight, this.breadth, bHeight);
    // tree trunk reflections
    fill(204, 187, 145, 50);
    rect(0, -bHeight + bHeight, this.breadth, bHeight);

    // tree leaves
    fill(255, 136, 112);
    ellipse(2.5, -bHeight, 35, bHeight);
    //tree leaves reflections
    fill(255, 136, 112, 50);
    ellipse(2.5, bHeight, 35, bHeight);
    pop();
}


function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
             breadth: 5,
             speed: -1.0,
             nFloors: round(random(2,8)),
             move: treeMove,
             display: treeDisplay}
    return tr;
}

function displayHorizon(){
    noStroke();
    // water
    fill(192, 219, 212);
    rect(0,height-100, width, height-50);
    // grqss
    fill(152, 194, 146);
    rect(0,height-100, width, 20);
}

Overall, I found this project a little challenging. I had a solid plan with my sketch and I was able to execute it, but I found myself getting easily confused because there were so many lines of code. However, when I got the code figured out, I was able to capture the calmness and serenity of a mountain landscape. Along with the mountains in the background, I added trees, water, and tree reflections in the front. I also added moving transparent clouds that overlay the canvas. While this project was difficult for me, I am satisfied with the outcome and the skills I developed from it.