Nayeon-Project10-Generative Landscape

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-10 (Generative Landscape)

var terrainSpeed1 = 0.0001;
var terrainDetail1 = 0.005;
var terrainSpeed2 = 0.0005;
var terrainDetail2 = 0.003;
var terrainSpeed3 = 0.001;
var terrainDetail3 = 0.0005;
var xoff = 0.0;
var terrain = [];
var lines = ["The impossible could not have happened, therefore the impossible must be possible in spite of appearances.",
            "If you confront anyone who has lied with the truth, he will usually admit it - often out of sheer surprise.",
            "You’re the world famous detective, Hercule Poirot.",
            "I see evil on this train. A passenger has died.",
            "My name is Hercule Poirot and I’m probably the greatest detective in the world."]
var index = 0;
var mX = 50;
var trees = [];

function setup() {
    createCanvas(480, 300);
    frameRate(12);
    for (var i = 0; i < 5; i++) {
      var rx = random(width);
      trees[i] = makeTrees(rx);
    }
}

//draw assets on canvas "orient express"
function draw() {
    background(0);
    moon();
    makeMountain();
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    train();
    quotes();
    oldfilm();
}

//display trees on screen
function updateAndDisplayTrees(){
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

//remove trees that have slipped out of view
function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}

//add trees with random probability
function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.05;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTrees(width));
    }
}

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

//tree display function
function treeDisplay() {
    var treeHeight = 100;
    var treeHeight = this.nFloors * treeHeight;
    fill(random(50, 100));
    noStroke();
    push();
    translate(this.x, height);
    rect(0, -treeHeight, this.breadth, treeHeight);
    ellipse(30, -treeHeight, this.bush, this.bush);
    pop();
}

//draw trees
function makeTrees(birthLocationX) {
    var trees = {x: birthLocationX,
                breadth: random(30, 70),
                bush: random(150, 300),
                speed: -150,
                nFloors: round(random(2,8)),
                move: treesMove,
                display: treeDisplay}
    return trees;
}


//draw moon
function moon() {
    fill(230)
    ellipse(mX, 70, 50, 50);
    mX += 0.3;
    //if moon goes further than screen, it goes back to original place
    if (mX > width) {
      mX = 50;
    }
}

//draw mountain layers
function makeMountain() {
    noStroke();
    fill(100)

    //farthest mountain
    beginShape();
    for (var x1 = 0; x1 < width; x1++) {
      var t1 = (x1 * terrainDetail1) + (millis() * terrainSpeed1);
      var y1 = map(noise(t1), 0, 1, 0, height);
      vertex(x1, y1);
    }
    vertex(width, height)
    vertex(0, height)
    endShape();

    //middle mountain
    beginShape();
    fill(150);
    for (var x2 = 0; x2 < width; x2++) {
      var t2 = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
      var y2 = map(noise(t2), 0, 1.5, 0, height);
      vertex(x2, y2 + 80)
    }
    vertex(width, height);
    vertex(0, height);
    endShape();

    //closest hill
    beginShape();
    fill(200);
    for (var x3 = 0; x3 < width; x3++) {
      var t3 = (x3 * terrainDetail3) + (millis() * terrainSpeed3);
      var y3 = map(noise(t3), 0, 2, 0, 200);
      vertex(x3, y3 + 180)
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

// draw train and window
function train() {
    push();
    noFill();
    strokeWeight(50);
    stroke(30);
    rect(0, 0, width, height);
    rect(0, 0, 50, height)
    rect(430, 0, width, height)
    ellipse(width / 2, 25, 10, 10)
    pop();

    push();
    fill(60);
    rect(10, 20, 50, 260, 10);
    rect(420, 20, 50, 260, 10);

}

//create old film style noise
function oldfilm() {
    for (i = 0; i < 5; i ++) {
      for (j = 0; j < 20; j ++) {
        xoff = xoff + 0.01;
        var offset = random(0, 300)
        var n = noise(xoff) * width;
        strokeWeight(random(0.1, 1));
        stroke(0)
        line(n * offset, 0, n * offset, height)
    }
    ellipse(random(0, width), random(0, height), random(0, 2), random(0, 4))
  }
}

//put cc on canvas. change the line everytime mouse is pressed
function quotes() {
    fill(250)
    textSize(15)
    textFont("Times New Roman")
    var x = random(100, 101)
    text(lines[index], x, 240, 300, 100)
}

//mousepressed function
function mousePressed() {
    index +=1;
    if (index > 4) {
      index = 0;
    }
}

I saw a trailer of movie “Murder on orient express” few days ago and I decided to choose this as a theme for this project. “Murder on Orient express” is one of my favorite detective novel and I can’t wait to see this movie! I put some old movie style -black & white and old film noise- because I wanted to create lonely and mysterious atmosphere of the train. I also put some of famous quotes from the novel.
Here are the sketch of idea and some inspiration photos from google.