Month: November 2017

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.

sketch

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var birds = [];
var redu;


function preload() { //load birds
    birdie = loadImage("https://i.imgur.com/ql6l0Rq.png")
}

function setup() {
    createCanvas(480 , 270);
    frameRate(24);

    for (var i = 0; i < 5; i++){ //set up loop for birds
        var location = random(width);
        birds[i] = makeBirds(location);
    }
}

function draw() {
    background(redu, 50, 200); 
    //call drawings
    sun();
    drawMountains();
    drawRivers();
    drawBackground();
    updateBirds();
    displayBirds();
    addBirds();
    makeBirds();
    moveBirds();

    redu = mouseY/5; //let background change depending on y
 
}
// SUN-----
function sun(){ 
  fill("red");
  ellipse(240, 135, 100, 100);

}
// BIRDS -----
function updateBirds(){
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}

function addBirds() {
    var a = random(1);
    if (a < 0.03) {
        birds.push(makeBirds(width));
    }
}

function moveBirds() { //change x of birds
    this.x += this.speed;
}

function displayBirds() { //put birds on canvas
    var birdY = 10;
    push();
    translate(this.x, this.height);
    for(var i=0; i<this.number; i++) {
        image(birdie, 10, birdY, random(10, 50), random(10, 50));
    }
    birdY += 1;
    pop();
}
 
function makeBirds(birthx) { //set up variables for birds
    var birds2 = {x: birthx,
                number: floor(random(1,2)),
                speed: -3,
                height: random(90,100),
                move: moveBirds,
                display: displayBirds}
    return birds2;
}

function drawBackground(){ //part of background color
  fill(238,238,238,100);
  beginShape();
  rect(0, 0, width - 1, height - 1);
  endShape();
}

//RIVER
function drawRivers(){
  //River 1
  fill(144,175,197,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+225);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 2
  fill(51,107,135,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+230);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 3
  fill(144,175,197,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+235);
      if(noise(t) > 0.2){
        fill(144, 175, 197, 80);
      }
      else {
        fill(144,175,197,120);
      }
  }
  vertex(width,height);
  vertex(0,height);
  endShape();

  //River 4
  fill(51,107,135,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * terrainSpeed * 2);
      var y = map(noise(t), 0,1, 0, height * 0.1);
      vertex(x, y+240);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function drawMountains() {
  noStroke();
  fill(118,54,38,255);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
      var y = map(noise(t), 0,1, 0, height*1.1);
      vertex(x, y-15);
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

Using the moving landscapes, I wanted to display a landscape of the ocean and mountain moving. For an interesting part of the project, I added a random variation in the birds to make it seem as if the birds were flocking in the sky.

sketch

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu; 
//Project_10

//background mountian display characteristics 
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

var terrainSpeed1 = 0.0008;
var terrainDetail1 = 0.008;

var terrainSpeed2 = 0.0010;
var terrainDetail2 = 0.01;

//moon and car variables
var moon; 
var car; 
var carx=150; 
var carx2=60; 

//array for stars 
var stars = [];

function preload() {
	//loading images of car and moon
    moon = loadImage("https://i.imgur.com/EWntReN.png"); 
    car= loadImage("https://i.imgur.com/kx6JqDC.png"); 
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    
    // create an initial collection of stars
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        stars[i] = makestar(rx);
    }
    frameRate(10);
}
 
function draw() {
    background(47, 94, 123);
    noFill(); 
    
    //moon image in the sky 
    image(moon, 320, 60); 
    
     //draw background mountian that is farthest from road 
	 beginShape();     
    for (var x2 = 0; x2 < width; x2++) {
        var t = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
        var y2 = map(noise(t), 0,1, height/3.5, height/2);
        vertex(x2, y2); 
        stroke(53, 80, 102); 
        line(x2, height, x2, y2); 
    }
    endShape();
    
    	//draw background mountian that is between the other two mountains
	 beginShape();     
    for (var x1 = 0; x1 < width; x1++) {
        var t = (x1 * terrainDetail1) + (millis() * terrainSpeed1);
        var y1 = map(noise(t), 0,1, height/3, height*3/4);
        vertex(x1, y1); 
        stroke(15, 51, 79); 
        line(x1, height, x1, y1); 
    }
    endShape();
	
	//draw background mountian that is closest to road
	 beginShape();     
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(x, y); 
        stroke(10, 31, 47); 
        line(x, height, x, y); 
    }
    endShape();
   
   //draw road 
   fill(0); 
   rect(0, height-40, width, 20); 
   
    //car image driving 
    image(car, carx, height-carx2); 
   
   //stars are displayed 
   updateAndDisplaystars();
    addNewstarsWithSomeRandomProbability(); 
}

function updateAndDisplaystars(){
    // Update the star's positions, and display them.
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function addNewstarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new star to the end.
    var newstarLikelihood = 0.05; 
    if (random(0,1) < newstarLikelihood) {
        stars.push(makestar(width));
    }
}

// method to update position of stars every frame
function starMove() {
    this.x += this.speed;
}

// draw the stars
function starDisplay() {
    var skyHeight = 50;
    var bHeight = this.nsky * skyHeight; 
    stroke(255); 
    fill(251, 248, 36); 
    push();
    translate(this.x, height - 100);
   rotate(PI/3.0);
   rect(0, -bHeight, 5, 5);
    pop();
}

//make the stars 
function makestar(birthLocationX) {
    var str = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nsky: round(random(2,9)),
                move: starMove,
                display: starDisplay}
    return str;
}

For this week’s project, I knew that I wanted to recreate a very specific memory. I wanted to recreate the car drives my family would have in the countryside late at night, when we went on road-trips.

I recreated this by making sure that the car looked like it was continuously moving forward, when it actually was a still image on the canvas. This was done by making sure the background image in the back of the car was moving. The mountains in the background give the image a more 3-D look.

In my memory, there were many bright stars in the sky during those drives. I randomized the position of these stars in the sky. I am overall pleased with the outcome of my project.