Mimi Jiao – Project 10 – Section E

sketch

/* Mimi Jiao
wjiao@andrew.cmu.edu
Section E 
Project 10
*/

var terrainSpeed1 = 0.00004;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.0024;
var trees = [];

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

    //pushing trees into initial tree array 
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
    frameRate(10);
}


function draw() {
    background(76, 101, 205); 

    //mountains in the back
    beginShape(); 
    stroke(78, 69, 94)
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height / 2, height / 5);
        line(x, y, x, height * 9 / 12);

    }
    endShape();

    //mountains in the front
    beginShape();
    stroke(55, 55, 81)
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainDetail) + (millis() * terrainSpeed2);
        var y1 = map(noise(t1), 0,1, height / 4, height / 1.5);
        line(x1, y1, x1, height * 9 / 12);

    }
    endShape();
    
    //horizon line
    fill(36, 36, 42);
    rect(0, height * 9 / 12, width, height / 4);

    updateTrees();
    removeTrees();
    randomTrees();

    //wall fill
    noStroke();
    fill(38, 44, 62);
    rect(0, 0, width, height / 5);
    rect(0, 0, width / 10, height);
    rect(0, 4 * height / 5, width, height / 5);
    rect(9 * width / 10, 0, width / 10, height);

    //WINDOW 
    noFill();
    rectMode(CORNER);
    rect(width / 10, height / 5, width * 8 / 10, 3 * height / 5);
    fill(70, 90, 140);
    noStroke();
    rect(width / 10 - 10, height / 5, (width * 8 / 10) + 20, height / 40);
    rect(width / 10 - 10, height * 4 / 5, (width * 8 / 10) + 20, height / 40);
    rect(width / 10 - 10, height / 5, 10, 185);
    rect(width * 9 / 10, height / 5, 10, 185);
    push();
    rectMode(CENTER);
    rect(width / 2, height / 2 + 5, (width * 8 / 10) + 20, height / 40);
    rect(width / 2, height / 2 + 5, 10, 185);
    pop();   
}

//update tree location after moving them and display them
function updateTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

//if trees fall out of the viewing window, remove from array
function removeTrees() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++) {
        if (trees[i].x + trees[i].breadth > width / 10) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;

}

//randomly generate trees
function randomTrees() {
    var newTreeProbability = .03;
    if (random(0,1) <= newTreeProbability) {
        trees.push(makeTree(width));
    }
}

//move the trees
function treeMove() {
    this.x += this.speed;
}

//display and draw the trees
function treeDisplay() {
    var treeHeight = -height * 4 / 12;
    fill(255); 
    noStroke(); 
    push();
    translate(this.x, height);
    fill(71, 91, 73);
    //tree body and leaves
    triangle(0,(-height * 3 / 12) + 5,
             20, (-height * 3 / 12) + 5,
             10, treeHeight + this.height);
    //tree log
    noStroke();
    fill(106, 91, 82);
    rect(8, (-height * 3 / 12) + 5, 5, 6);
    stroke(200); 
    pop();
}

//create the tree
function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                breadth: 20,
                speed: -3.5,
                height: random(-25, 10),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

One of my deepest memories is of myself looking out of a moving train at night in the deserts of north-central China. I wanted to recreate the feeling of watching mountains pass by when the sun has just set. I initially explored both a vertical and horizontal composition, but I ultimately ended up with the landscape view. At the end, I changed a train window to a regular window because I thought it was more intuitive to understand. Here’s a picture of my initial sketches: