adev_Project_10

//Aisha Dev
//adev@adnrew.cmu.edu
//Section E
// Project 10


var frames = [];
var sm1 = - 0.00006;
var sm2 = - 0.000065;
var sm3 = - 0.00005;
var sm4 = - 0.0001;
var sm5 = - 0.0003;
var detail1 = 0.005;
var detail2 = 0.003;
var detail3 = 0.003;
var detail4 = 0.001;
var detail5 = 0.0015;

var trees = [];
var bwTrees = 0;

// var playlist = ["Across The Unverse", "Aint No Sunshine", "All Along The Watchtower", "American Pie", "Anywhere Is", "Bennie and The Jets", "Blackbird", "Blowin in The Wind",
// "Blue Jean Baby", "Bridge Over Troubled Water", "Budapest", "A Case of You", "Comfortably Numb", "Catch the Wind", "Cowgirl in the Sand", "Crazy Love", "Come Together", "Dancing in the Dark",
// "Dont Think Twice Its Alright", "Hallelujah", "Hear of Gold", "Heavenly Day", "Hey Jude", "Ho Hey", "Home", "I See Fire", "Flight Attendant", "Just Like A Woman", "Liar", "Knights in White Satin",
// "Lady Lady Lay", "Layla", "Leave Your Lover", "Lodi", "The Long and Whinding Road", "Long as I Can See The Light", "Losing You", "Sospesa", "Me and Bobby Mcgee", "More Than a Woman",
// "Mr Tambourine Man", "No Woman No Cry", "Oh Sister", "Old Man", "Only Love", "Over The Creek", "Piece of My Heart", "Proud Mary", "Roxanne", "Something", "Song To Woody", "Songbird", "Sound of Silence", 
// "Start Over", "Stop This Train", "Take Me to Curch", "The Thrill is Gone", "The Times They Are a Changin", "Fast Cars", "Underneath", "While My Guitar Gently Weeps", "Wholl Stop The Train", "Yesterday",
// "Wish You Were Here", "You Are So Beautiful", "Our House", "Fortunate Son", "Warning Sign", "Like A Rolling Stone", "Jokerman"];
// var index = 0; 



function setup() {
    createCanvas(480,200);
   
 for (var i = 0; i < 20; i++){ 
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
      
    frameRate(10);

}
 
function draw() {
    //functions
    makeBackground();
    makeMountains();
    //songs();
   drawTree();
    addTree();

   
}



function makeBackground(){
   background(30, 50, 100);


   
}


function makeMountains(){
    noStroke();
    
    //highest mountain range
    fill(174, 153, 139);
    beginShape(); 
    for (var mOne = 0; mOne < width; mOne++) {
        var speedOne = (mOne * detail1) + (millis() * sm1);
        var peaksOne = map(noise(speedOne), 0,1, 0, height);
        vertex(mOne,peaksOne-70); 
    }

    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //second highest mountain range
    fill(128, 121, 113);
    beginShape();
    for (var mTwo = 0; mTwo < width; mTwo++) {
        var speedTwo = (mTwo * detail2) + (millis() * sm2);
        var peaksTwo = map(noise(speedTwo), 0,1, 0, height);
        vertex(mTwo,peaksTwo-30); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
        
    //middle mountain range
    fill(93, 84, 86);
    beginShape(); 
    for (var mThree = 0; mThree < width; mThree++) {
        var speedThree = (mThree * detail3) + (millis() * sm3);
        var peaksThree = map(noise(speedThree), 0,1, 0, height);
        vertex(mThree,peaksThree+10); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();


     //second - lowest mountain range
    fill(67, 60, 67);
    beginShape(); 
    for (var mFour = 0; mFour < width; mFour++) {
        var speedFour = (mFour * detail3) + (millis() * sm4);
        var peaksFour = map(noise(speedFour), 0,1, 0, height);
        vertex(mFour,peaksFour+30); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();


      //lowest mountain range
    fill(48, 45, 48);
    beginShape(); 
    for (var mFive = 0; mFive < width; mFive++) {
        var speedFive = (mFive * detail3) + (millis() * sm5);
        var peaksFive = map(noise(speedFive), 0,1, 0, height);
        vertex(mFive,peaksFive+60); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape(); 

}

function drawTree() {
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function makeTree(x) {
    var tree = {
        birth: x,
        size: random(10, 30),
        speed: 2.0,
        move: TreeMove,
        display: TreeDisplay,
        height: random(30, 60),
        color: [120, 150, 100, 90]
    }
    
    return tree;
}

function TreeMove() {
    this.birth += this.speed;
}

function TreeDisplay() {
    var treeHeight = 50; 
    fill(this.color); 
    noStroke();
    push();
    translate(this.birth, height - this.height);
    ellipse(0, 0, this.size, this.size);
    ellipse(7, 10, this.size, this.size+2);
    ellipse(-9, 2, this.size, this.size);
    stroke(200, 180, 140);
    strokeWeight(2);
    line(0, 0, 0, this.height);
    line(0, this.size/5, this.size/6, this.size/20);
    if (this.size > 30) {
        line(0, this.size/3, -this.size/6, this.size/6);
    }
    pop();
}

function addTree() {
    var newTree = 5; 
    if (random(0,1) < newTree) {
        bwTrees = bwTrees + 30;
        if (bwTrees == 4) { 
            trees.push(makeTree(width)); 
             bwTrees = 0; //reset
        }
    }

}


// function songs(){
// 	fill(181, 165, 138);
// 	textSize(10);
// 	textFont("Times New Roman");
// 	text(playlist[index],10, 460);

// }

This assignment was a bit challenging for me. I had been missing road trips with my family so I decided to re-create one in the Himalayas, complete with the high mountain ranges and pine trees. I wanted to add running text of the playlist we tend to listen to so I’m still working on that.

sketch

// noise() function. 

var angleSpeed = 0.0005;
var angle = 0.005;

function setup() {
    createCanvas(480, 150);
    frameRate(20);
    background(0);
}
 
function draw() {
    
    // light sources shining on the living things
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    for (var x = 0; x < width; x++) {
    	fill(255,240,0);
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), 1,4, 1, height);
        vertex(x, y); 
    }
    for (var x = 0; x < width; x++) {
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), -3,10, -3, height);
        vertex(x, y); 
    }
    endShape();

    //living things
    for (var i = 0; i < 100; i++) {
        ellipse(random(width), random(height), 0.5);
    }
    
    
}

Here, the scenario is to have light sources projected on flock of living creature in a dark night. The light source moves randomly spotting the flock. I was interested in playing with the combination of movements and randomness of small scale objects and pieces of geometric shapes. The final sketch seems fairly success from what I imagined it to be.

sketch

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project10

var blobs = [];
var mountain = .05;
var mountainSpeed = .0009;


function setup() {
    createCanvas(640, 240);

    // create blobs
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        blobs[i] = makeBlob(rx);
    }
    frameRate(30);
}

function draw() {
    background(240, 215, 87);
    displayHorizon();
    makeMountain();
    updateAndDisplayBlobs();
    removeBlobsThatAreOutOfView();
    addNewBlobsWithSomeRandomProbability();

}

//make mountain
function makeMountain() {
    stroke(1);
    fill(240, 160, 34);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * mountain) + (millis() * mountainSpeed);
        var y = map(noise(x), 0, 1, height/7, height/2);
        vertex(i, y);
    }
    vertex(width, height-height/4);
    vertex(0, height-height/4);
    endShape();
}

function displayHorizon(){
    strokeWeight(3);
    stroke(0);
    line (0,height-height/4, width, height-height/4);
}


function updateAndDisplayBlobs(){
    // update blobs' positions, display them
    for (var i = 0; i < blobs.length; i++){
        blobs[i].move();
        blobs[i].display();
    }
}


function removeBlobsThatAreOutOfView(){
    var blobsToKeep = [];
    for (var i = 0; i < blobs.length; i++){
        if (blobs[i].x + blobs[i].breadth > 0) {
            blobsToKeep.push(blobs[i]);
        }
    }
    blobs = blobsToKeep;
}


function addNewBlobsWithSomeRandomProbability() {
    //small probability, add a new tree to the end
    var newBlobLikelihood = 0.010;
    if (random(0,1) < newBlobLikelihood) {
        blobs.push(makeBlob(width));
    }
}


//update position of blob
function blobMove() {
    this.x += this.speed;
}


//draw blob
function blobDisplay() {
    var blobHeight = random(5, 15);
    var bHeight = (random(15, 30));
    fill(255);
    noStroke();
    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight, this.breadth, bHeight);
    ellipse(0, bHeight, this.breadth, bHeight);
    stroke(200);
    pop();
}


function makeBlob(birthLocationX) {
    var blo = {x: birthLocationX,
                breadth: 50,
                speed: -4.0,
                nBlo: round(random(2,8)),
                move: blobMove,
                display: blobDisplay}
    return blo;
}

For this project I wanted to make some sort of reflection, and was able to get my abstract blobs to have their own reflections on this mysterious glass like surface. I wanted to make something not too literal or specific, and just focus on using what I’ve learned since I found it difficult. But I still found the end result mysterious and ambiguous which is what I like.

I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color

And…finally my phone worked. Thanks.

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-10

var waves = [];//create an array to hold waves
var mountainPeak1 = 0.03;
var mountainSpeed1 = 0.0003;//speed of mountain
var mountainPeak2 = 0.01;
var mountainSpeed2 = 0.0005;//speed of mountain
var boat;
var lighthouse;
var bX = 480;//x position of boat

function setup() {
    createCanvas(480, 440);
    //create initial collection of waves
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        waves[i] = makeWave(rx);
    }
}

function preload() {//load images of boat and lighthouse
    boat = loadImage("https://i.imgur.com/7ehKMrX.png"); // boat image
    lighthouse = loadImage("https://i.imgur.com/8foDjEk.png")//lighthouse image
}

function draw() {
    sun();//draw sun
    mountain1();//draw mountain1
    mountain2();//draw mountain2
    waterBackground();//draw water

    image(lighthouse, 350, height/2);//draw lighthosue
    //draw waves
    updeteAndDisplayWave();
    addWave();
    removeWaves();
    //draw boat
    makeBoat();
}

function waveDisplay(wave){ //draw waves
    var radius = 10;//radius increment of wave
    fill(255);
    stroke(39, 55, 81);
    strokeWeight(2);
    //create 4 rows of waves
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 80, this.y - 60, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 20, this.y - 40, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x + 50, this.y - 20, this.number*radius, this.number*radius, PI, 2*PI);
    }
    for (var i = 0; i < this.number; i++) {
        arc(this.x, this.y, this.number*radius, this.number*radius, PI, 2*PI);
    }

}

function makeWave(){
    var wave = {x: width,
                y: height,
                number: round(random(2,8)),//control size of each wave
                speed: -1,
                breadth: 50,
                move: waveMove,
                display: waveDisplay
    }
    return wave;
}

function waveMove() {
    this.x += this.speed;//wave moves by the speed
}

function updeteAndDisplayWave(){//update wave's position and display them
    for (var i = 0; i < waves.length; i++){
        waves[i].move();
        waves[i].display();
    }

}

function removeWaves(){//remove waves that's outside of canvas
    var keepWaves = [];
    for (var i = 0; i < waves.length; i++) {
        if (waves[i].x + waves[i].breadth > 0) {
            keepWaves.push(waves[i]);
        }
    }
    waves = keepWaves;

}

function addWave(){//add new waves
    var waveChance = .05;
    if (random(0, 1) < waveChance) {
        waves.push(makeWave(width));
    }

}

function makeBoat(){
    bX -= .5;
    image(boat, bX, 3*height/4);
    if (bX < -40) { // if boat exits left, make it come in right
        bX = width;
    }
}

function mountain1(){//make mountain1
    noStroke(); 
    fill(21, 40 ,73);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak1) + (millis() * mountainSpeed1);
        var y = map(noise(t), 0,1, height/5, height/2);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain2(){//make mountain2
    noStroke(); 
    fill(50, 70, 104);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * mountainPeak2) + (millis() * mountainSpeed2);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function waterBackground(){
    fill(91, 141, 176);
    rect(0, 2*height/3, width, height/3);
}

function sun(){
    //gradient background
    for (var i = 0; i < 480; i++) {
        strokeWeight(2);
        stroke(94 + 1.5 * i, 120 + i, 158 + 0.5 * i);
        line(0, i, width, i);
    }
    //sun
    noStroke();
    fill(254, 255, 241);
    ellipse(350, 90, 120, 120);
}

I wanted to create a landscape with ocean, water, sun, lighthouse, mountain, and to for making it more playful, a paper boat. I started with making mountains using the noise function (the terrain sample code). I used a gradient color for the background using layers of lines. I used two images for the light house and the paper boat. I created waves as objects, and continuously adding waves to the canvas. I create several rows of waves and offset them to make the drawing more dynamic.

PS.I wanted to upload an image of my sketch but for some reason my phone keeps taking images filled with grey color…

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

var terrainSpeed = 0.0005;
var terrainDetail = 0.01;
var buildings = [];
var stars = [];
var balls = []; 
var clouds = [];


function preload() {
    castleImage = loadImage("https://i.imgur.com/enlJeCX.png");
}

function setup() {
    createCanvas(480, 320);
    frameRate(10);
    
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var g = 0; g < 150; g ++) {
        var ry = random(width);
        stars[g] = makeStar(ry);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        clouds[h] = makeCloud(rz);
    }
}   
 


function draw() {
    background(255);
    
    var sky1 = color(33, 25, 64);
    var sky2 = color(6, 41, 100);
    var sky3 = color(135, 110, 168);
    var sky4 = color(201, 159, 161);
    var sky5 = color(254, 219, 155);
    var sky6 = color(246, 179, 124);

    
    for (var c = 0; c <= height/3.5; c += 1) {
        var amt = map(c, 0, height/3.5, 0, 1);
        var skygradient1 = lerpColor(sky1, sky2, amt);
        noStroke();
        fill(skygradient1);
        rect(0, c, width, 1);
    }
    
    for (var d = 0; d <= height/2.5; d ++ ) {
         var amt = map(d, 0, height/2.5, 0, 1);
         var skygradient2 = lerpColor(sky2, sky4, amt);
         noStroke();
         fill(skygradient2);
         rect(0, c + d, width, 1);
         }
    
    for (var e = 0; e <= height/5; e ++ ) {
         var amt = map(e, 0, height/5, 0, 1);
         var skygradient3 = lerpColor(sky4, sky2, amt);
         noStroke();
         fill(skygradient3);
         rect(0, c + d + e, width, 1);
         }
    
    
    image(castleImage, 20, 70, 120,120);
    
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability();
    createHill();
    drawRectangle();
    createHillShadow();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    makeballs();
    
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    
    newBalls = []; // Creates an empty array that will store the values of the newly-created balls
        for (var i = 0; i < balls.length; i++) { 
            var p = balls[i];
            p.speedy(); //returns the function speed() which makes the balls move
            p.balls(); //returns the function balls() which assigns the balls their properties
            newBalls.push(p); 
        }
    balls = newBalls;
}



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


function removeStarsThatHaveSlippedOutOfView(){
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x> 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}


function addNewStarsWithSomeRandomProbability() {
    // With some possibility, add a new lantern
    var newStarLikelihood = 0.5; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}


// Makes the lanterns move
function starMove() {
    this.x -= this.speed;
}
    

// Draws the lanterns
function starDisplay() {
    fill(250, 254, 149);
    rect(this.breadth, this.x, this.size, this.size*1.5)
}


function makeStar(birthLocationX) {
    var star = {x: birthLocationX,
                y: random(10,70),
                breadth: random(width),
                breadthy: random(height),
                speed: random(0.1,4),
                move: starMove,
                display: starDisplay,
                size: random(2,7)
               }
    return star;
}




function createHill() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;

    for (g = 0; g < width; g++) {
        h = (g * forestDetail * 8 + millis() * forestSpeed/8);
        i = map(noise(h), 0, 1, 40, 100);
           stroke(30);
           line(g, i+100, g, height-80);
    }  
}




function drawRectangle() {
    var sky1 = color(33, 25, 64);
    var sky2 = color(37, 55, 127);
    var sky3 = color(135, 110, 168);
    var sky4 = color(201, 159, 161);
    var sky5 = color(254, 219, 155);
    var sky6 = color(246, 179, 124);
    
    for (var e = 0; e <= height/5; e ++ ) {
         var amt = map(e, 0, height/5, 0, 1);
         var skygradient3 = lerpColor(sky6, sky1, amt);
        noStroke();
        fill(skygradient3);
        rect(0, 240+e, width, 1);
         }
    
    fill(sky1);
    rect(0, 240+e, width, height-(240+e))
    
    
}


function createHillShadow() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;

    
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;
    
    push();
    translate(0,480)
    scale(1,-1)
    // 3rd "layer" of forest
    for (g = 0; g < width; g++) {
        h = (g * forestDetail * 8 + millis() * forestSpeed/8);
        i = map(noise(h), 0, 1, 40, 100);
           stroke(30,70);
           line(g, i+150, g, height-80);
    }  
    pop();
}




//Below: set of functions that create the boats
function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.009; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of a boat every frame
function buildingMove() {
    this.x -= this.speed;
}
    

// draw the boats
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(this.R, this.G, this.B); 
    noStroke(); 
    push();
    translate(this.x, height-this.y);
    rect(0, -bHeight, this.breadth, bHeight);
    triangle(-30, -bHeight, 0, -bHeight, 0, 0);
    triangle(this.breadth+30, -bHeight, this.breadth, -bHeight, this.breadth, 0)
    stroke(200); 
    pop();
    
    
    //draws the reflections of the boats
    push();
    fill(this.R, this.G, this.B, 80);
    translate(this.x, height-this.y);
    scale(1,-1)
    rect(0, -bHeight/2, this.breadth, bHeight);
    triangle(-30, -bHeight/2, 0, -bHeight/2, 0, 0);
    triangle(this.breadth+30, -bHeight/2, this.breadth, -bHeight/2, this.breadth, 0)
    stroke(200); 
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                cloudx: random(width),
                y: random(10,70),
                breadth: random(60,90),
                speed: random(2,3),
                cloudspeed: random(0.5,1),
                R: random(70,90),
                G: random(50,70),
                B: random(10,40),
                transparency: random(100,200),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the clouds
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth +30 > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}


function addNewCloudsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCloudLikelihood = 0.02; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}



function cloudMove() {
    this.x -= this.speed;
}
    


function cloudDisplay() { 
    push();
    fill(255, this.transparency);
    translate(this.x+50, 100 + this.y);
    ellipse(0, 0, this.y, this.y*0.5);
    pop();
}


function makeCloud(birthLocationX) {
    var cloud = {x: birthLocationX,
                y: random(10,70),
                breadth: random(60,90),
                speed: random(0.5,1),
                transparency: random(100,200),
                move: cloudMove,
                display: cloudDisplay
               }
    return cloud;
}




function makeballs() {
    var ix = constrain(floor(this.xx), 0, width-1);
    var iy = constrain(floor(this.yy), 0, height-1);
    
    fill(250, 254, 149) 
    noStroke();
    rect(this.x, this.y, this.ballsize, this.ballsize*1.5); // Draws the ellipse at (x,y) with the width and the height dimension of 'ballsize' which is a random number between 2 and 8
}



function ballspeed() {
    this.y += this.dy; // MouseY will be later assigned as 'y'
}



function drawPortrait(placeholderx, placeholdery, placeholderdy) {
    p = {x: placeholderx, 
         y: placeholdery,
         dy: placeholderdy,
         speedy: ballspeed,
         balls: makeballs,
         ballsize : random(4,10)
        }
    return p;
}


// Lanterns generated when the mouse is moved
function mouseMoved() {
        var newball = drawPortrait(mouseX, mouseY, random(-20, 20));
        balls.push(newball);
        x += random(x-3, x+3);
}

I wanted to recreate a scenic setting from my favorite Disney movie – Tangled!!!! There are total five components of the landscape, which are the moving clouds, the hill, the shadow of the hill, the lanterns, and the moving boats. There’s a little surprise hidden in this code; you could perhaps try moving your mouse to find out what it is!

Initially I wanted to make Rapunzel and Flynn Rider to randomly pop up on one of the boats but I had some difficulty coding it. It was a little annoying that I had to make multiple sets of the functions for different objects, but at the end it was rewarding because I got to recreate my favorite Disney movie.

Also I’d like to use one of my grace days for this project. Thank you!

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.

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-10

var gemboy; 
var terrainSpeed = 0.0075;
var terrainDetail = 0.06;
var gemY;

//preload image of spaceship
function preload(){
	gemboy = loadImage("https://i.imgur.com/OBAJ0Kb.png");
}

function setup() {
    createCanvas(480, 400); 
    frameRate(10);
}

function draw() {
	background(0);

    //background layer 1 farthest layer back
    //uses noise to create randomized terrain
    push();
    beginShape(); 
    fill(1, 100, 167, 100);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/20) + (millis() * terrainSpeed/20);
        var y = map(noise(t), 0, 1, height/10, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 2
    push();
    beginShape(); 
    fill(1, 83, 130);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/5, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 3
    push();
    beginShape(); 
    fill(250, 230, 162);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/50) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

	image(gemboy, 100, 60, 280, 300);

    //closest layer
    push();
    beginShape(); 
    fill(25, 176, 186);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*20);
        var y = map(noise(t), 0, 1, height-200, height*1.2);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //calling stars to be drawn
    makeStar();
}

//function to create star object with randomized opacity
//and randomized size
function makeStar() {
  var starX = random(5, width); 
  var starY = random(5, 200);
  var starW = random(2, 5);

  noStroke();
  fill(255, random(10, 255)); 
  ellipse(starX, starY, starW, starW);
}

I wanted to create a cave landscape of a character in a gem spaceship. This was a very frustrating project for me as manipulating the different terrains and their speeds, heights, etc. was confusing. I did, however, have fun creating the drawing of the spaceship and choosing the colors. The object that I chose to include in my landscape was randomized stars. I wish I had more time so I could really create a more complex landscape with more objects, that I was happy with.

above is an image of my drawing.