Project 10, odh

odhP10

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 10

var buildings = [];
//Declares the X location of the Moon
var moonX = 430;

function setup() {
    createCanvas(480, 240);
    for (var i = 0; i < 8; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    frameRate(10);
}
 
function draw() {
    background(10, 10, 80);
    
    //Moves the moon across the sky 
    //and resets when it exits the frame
    moonX = moonX - 1;
    if (moonX < -100) {
        moonX = 530;
        moonX = moonX - 1;
    };

    //Creates the moon
    noStroke();
    fill(250);
    ellipse(moonX, 60, 100, 100);
    fill(10, 10, 80)
    ellipse(moonX+20, 50, 80, 80);
    translate(0, 40);
    noFill(); 

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
}

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(){
    // If a building has dropped off the left edge,
    // remove it from the array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 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.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(150); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(0); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(255, 255, 50);
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

I chose to have a nighttime view of a city skyline. I have the moon behind the buildings moving across the sky until it resets and reappears on the on the opposite side of the canvas. Overall, I am not pleased with the product along with my lack of understanding to create a more interesting and developed product.

rkondrup-project-10-Landscape

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-10



var trains = [];

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

    frameRate(30);
}


function draw() {
    background(177, 214, 144); //light green
    drawTracks();

    updateAndDisplayTrains();
    removeTrainsThatHaveSlippedOutOfView();
    addNewTrainsWithSomeRandomProbability();
    textMessage();

}


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


function removeTrainsThatHaveSlippedOutOfView(){
    // If a train has dropped off the left edge,
    // remove it from the array.
    //     Our solution is to just copy all the trains
    // we want to keep into a new array.
    var trainsToKeep = [];
    for (var i = 0; i < trains.length; i++){
        if (trains[i].x + trains[i].carWidth > 0) {
            trainsToKeep.push(trains[i]);
        }
    }
    trains = trainsToKeep; // remember the surviving trains
}


function addNewTrainsWithSomeRandomProbability() {
    // With a very tiny probability, add a new train to the end.
    var newtrainLikelihood = 0.005;
    if (random(0,1) < newtrainLikelihood) {
        trains.push(maketrain(width));
    }
}


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


// draw the train and some windows
function trainDisplay() {
    var floorHeight = 100;
    var bHeight = this.nFloors * floorHeight;
    stroke(0);
    push();
    noStroke();

    //to draw each of the 8 trains and assign different speeds

    translate(this.x, 0);
    push();
    fill(214, 128, 131);//red
    rect(0, 0 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(214+30, 128+30, 131+30);
    rect(0, 0 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.5, 0);
    push();
    fill(81, 176, 185);//turquoise
    rect(0, 60 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(81+30, 176+30, 185+30);
    rect(0, 60 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x, 0);
    push();
    fill(146, 95, 182);//purple
    rect(0, 60*2 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(146+30, 95+30, 182+30);
    rect(0, 60*2 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x*1.5, 0);
    push();
    fill(145, 205, 129);//green
    rect(0, 60*3 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(145+30, 205+30, 129+30);
    rect(0, 60*3 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.2, 0);
    push();
    fill(216, 174, 107);//yellow
    rect(0, 60*4 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(216+30, 174+30, 107+30);
    rect(0, 60*4 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(92, 129, 213);//blue
    rect(0, 60*5 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(92+30, 129+30, 213+30);
    rect(0, 60*5 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(222, 157, 104);//orange
    rect(0, 60*6 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 157+30, 104+30);
    rect(0, 60*6 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*2, 0);
    push();
    fill(222, 104, 179);
    rect(0, 60*7 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 104+30, 179+30);
    rect(0, 60*7 + 13, this.carWidth, 30)//top lighter shade rect
    pop();



    stroke(200);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight*10), this.carWidth - 10, 10);
    }
    pop();
}


function maketrain(birthLocationX) {
    var trn = {x: birthLocationX,
                carWidth: 100,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: trainMove,
                display: trainDisplay}
    return trn;
}

function drawTracks() {
    fill(235, 230, 235);//long track color
    noStroke();
    for(i = 0; i < 20; i++) {
        for (j = 0; j < 200; j++) { //railroad ties
            push();
            fill(194, 175, 166); //tie color
            rect(5 + 15*j, + 5 + i*60, 5, 46);
            pop();
        }
        rect(0, 30*i + 10, width, 6);
    }
}
// to make text appear once each minute
function textMessage() {
    var s = second();
    textSize(14)
    fill(255);
    noStroke();
    if (s == 0) {
        text("ALL ABOARD !", width/2-30, height/2-28);
    }
    else if (s == 20) {
        text("CHOOCHOO !", width/2-30, height/2-28);
    }
    else if (s == 40) {
      text("ZOOM !", width/2-30, height/2-28);
    }

}

With this project, i very much wanted to avoid the elevation view that seemed to be trending among early submissions. I also wanted to create something somewhat whimsical, and so i eventually decided that rainbow trains were a childish sort of drawing that could spice up my ideate experience. I aimed for a very simple, clean aesthetic for this drawing, trying to show as little as was necessary in order to identify the moving objects. Many trains are the same base length, while others are elongated to add some variation. The trains also seem to converge at the left end of the page, which confused me but I also saw it like a visual point of interest, as if the trains are racing to be the first one across the page.

dnoh-sectionD-project10-landscape

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project 10

var planes;
var clouds = [];

function preload() {
	//loading plane image
	var planeImage = "https://i.imgur.com/bQ0w1cU.png"
	planes = loadImage(planeImage);
}

function setup(){
  createCanvas(360,480);
  //create clouds inital
  for (var i = 0; i < 45; i++){
    var rd = random(width);
    clouds[i] = makeClouds(rd);
  }
  frameRate(30);
}

function draw(){
  var a = color(53,47,73);
  var b = color(113, 85, 52);
  backGradient(0, width, a, b);

  makeSun();
  updateCloud();
  removeCloud();
  addCloud();

  image(planes, 0, 0);
}

//creates a gradient color
function backGradient (y, x, a, b) {
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

//creates a blinking sun
function makeSun() {
  for (var i = 0; i < 10; i++) {
    var number = random(7,10); //makes the opacity vary
    var transparency = 60 - number*i;
    fill (220, 200, 120, transparency);
    ellipse(width/2, height/2+60, 150+20*i, 150+20*i);
  }
	//the actual sun center circle
  noStroke();
  fill(220, 200, 120);
  ellipse(width/2, height/2+60,150,150);
}

//updates the clouds so they move and show
function updateCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

//gets rid of clouds that pass the screen
function removeCloud(){
  var cloudsKeep = [];
  for (var i = 0; i < clouds.length; i++){
    if (clouds[i].x + clouds[i].breadth > 0){
      cloudsKeep.push(clouds[i]);
    }
  }
  clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud(){
  var newCloudPercent = 0.2;
  if (random(0,1) < newCloudPercent){
    var cloudX = width;
    var cloudY = random(height/1.2);
    clouds.push(makeClouds(width));
  }
}

//adds velocity to the clouds, making them move
function cloudMove(){
  this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud(){
  var cloudHeight = 5;
  var cHeight = this.nCloud*cloudHeight;

  noStroke();
  fill(255, this.opaque);
  push();
  translate(this.x, height/1.15);
  ellipse(0, -cHeight, this.breadth, cHeight/1.5);
  pop();
  push();
  translate(this.x, height/1.15+40);
  ellipse(30, -cHeight, this.breadth, cHeight);
  pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
	var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
	return cloud;
}

I started with a simple idea that an airplane was passing through in the skies. At first I imagined birds passing by, but quickly realized that birds don’t really exist that high up in the air. Therefore, I stuck with simple clouds that changed opacity and a sun that blinked in the sky. I created this sketch:

on illustrator and used that as the overlay that would envelope the moving clouds and blinking sun.

danakim-Project-10

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-10

var moons = [];
var Terrain = [];
var terrainSpeed = 0.0003;
var terrainDetail = 0.001;

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

  //initial moons
  for(var i = 0; i < 5; i++){
    var rx = random(width);
    moons[i] = new Moons (rx);
  }
  frameRate(10);
}

function draw() {
  background(243, 178, 156);

  updateAndDisplayMoons();
  removeMoons();
  newMoons();
  citySkyLine();
  Smog();
}

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

function removeMoons(){
  for(var i = 0; i < moons.length; i++){
    if(moons[i].x < 0-moons[i].breadth){
      moons.splice(i, 1);
    }
  }
}

function newMoons(){
  var newMoonLikelihood = 0.007;
  colorList = [255, 150, 180];
  colorNum = int(random(0.5, 2.5));
  if(random(0,1) < newMoonLikelihood){
    moons.push(new Moons ( width, colorList[colorNum]));
  }
}

function Moons(birthLocationX, color){
  this.x = birthLocationX;
  this.y = random(50, 250);
  this.breadth = 50;
  this.speed = -1.0;
  this.move = function(){
    this.x += this.speed;
  }
  this.display = function(){
    push();
    fill(random(69, 126), 0, random(115, 213));
    ellipse(this.x, this.y, this.breadth, this.breadth);
    pop();
  }
}

function citySkyLine(){
  fill(189, 142, 138);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.001) + (millis() / 0.0001);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y+100);
  }
  endShape();

}

function Smog(){
  fill(149, 121, 117);
  beginShape();
  for( var x = 0; x < width; x++){
    var t = (x * 0.0005) + (millis() * terrainSpeed);
    var y = map(noise(t), 0, 1, 0, height);
    vertex(x,y);
  }
  endShape();

}

This is an abstracted version of what I had intended on making initially. I was fooling around with the code and I happened to like what I got from that and stuck with it. It still conveys my initial idea of a city skyline with smog and multiple “moons.”

cduong-Looking Outward 10-Notes On Blindness

Project: Notes On Blindness
Designer: Beatrice Latrigue
Link: http://epure.it/notes-on-blindness

This project, Notes On Blindness, by Beatrice Latrigue is a project that uses “new forms of storytelling, gameplay mechanics and VR to explore a blind man’s cognitive and emotional experience of blindness.” It was made after John Hull lost his sight back in 1983. He created an audio diary to record what he was experiencing in a new world without sight and based on these recordings this project was designed to create an animated, interactive documentary to explore the world of the blind and better understand what it feels like to be blind.

As someone who has extremely awful eyesight this project really resonated with me because I have a strong fear of going blind one day and to know that they created something that I am so afraid of into something that looks so beautiful really touched my heart. The video was actually so so so beautiful and I would really love to be able to experience the actual VR one day.

Beatrice Latrigue is a visual artist in Paris. Her education includes: Incubator, Interactive Design, and Spatial Design. Her main works include invisible relationships within images, space, and time and she creates immersive experience and physical interactive installations.

Looking Outwards 10

Claudia Hart created “Dream” in 2009 as a depiction of the physical body on the boundary between abstract and graphic. Hart created this by modeling in the 3D all the elements and then placing a “camera” in the digital space. She explains that the movements performed by the “camera” are unfamiliar to a real, physical camera, adding to the supernatural, dream-like feeling in the piece.

I admired the depth of digital modeling and creation. Despite being a “slow-action” animation, the subtle movements of the body attest to the careful craft of Hart. I think she rides along the aforementioned line of abstract and graphic very successfully. The environment elicits a sense of separation from the real world that dreams give me. The subtle movements of the woman and the environment she’s is in is calming to follow.

Link to the project(with video): http://www.claudiahart.com/portfolio/dream.html

cduong-project 10-Landscape

sketch

var skyColor;
var skyColor1;
var skyColor2;
var skyFadeValue = 0;
var skyFadeSpeed = 0.05;

var umbrellas = [];

var beachgoers = [];

function setup() {
    createCanvas(480, 400);
    frameRate(30);

    //CHANGING SKY COLOR VARIABLES
    skyColor1 = color(211, 232, 252); //Light Blue Color (Morning)
    skyColor2 = color(48, 70, 92); //Dark Blue Color (Night)
    skyColor = skyColor1;

    //INITIALIZE UMBRELLAS
    for (var i = 0; i < 10; i++){
     var rx = random(width);
     umbrellas[i] = makeUmbrella(rx);
 }
}

//CHANGING SKY COLOR CODE
function changingSkyColor() {
	skyFadeVal = ((millis()*skyFadeSpeed)%900)/900;
	if (floor(millis()/900*skyFadeSpeed)%2 == 0) {
		skyColor = lerpColor(skyColor1, skyColor2, skyFadeVal);   //Morning to Night
	}
	else {
		skyColor = lerpColor(skyColor2, skyColor1, skyFadeVal);   //Night to Morning
	}
}
//CHANGING SKY COLOR CODE

//UPDATE AND DISPLAY CODE
function updateAndDisplayUmbrellas(){
    // Update the building's positions, and display them.
    for (var i = 0; i < umbrellas.length; i++){
        umbrellas[i].move();
        umbrellas[i].display();
    }
}

//UPDATE AND DISPLAY CODE

//REMOVE OUT OF VIEW
function removeUmbrellasThatHaveSlippedOutOfView(){
  var umbrellasToKeep = [];
  for (var i = 0; i < umbrellas.length; i++){
      if (umbrellas[i].x + umbrellas[i].breadth > 0) {
          umbrellasToKeep.push(umbrellas[i]);
      }
  }
  umbrellas = umbrellasToKeep; // remember the surviving buildings
}
//REMOVE OUT OF VIEW

//ADD RANDOM NEW THINGS
function addNewUmbrellasWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newUmbrellaLikelihood = 0.007;
    if (random(0,1) < newUmbrellaLikelihood) {
        umbrellas.push(makeUmbrella(width));
    }
}
//ADD RANDOM NEW THINGS

//UPDATE POSITION TO BUILDING EVERY FRAME
function umbrellaMove() {
    this.x += this.speed;
}
//UPDATE POSITION TO BUILDING EVERY FRAME

// DRAW THINGS
function umbrellaDisplay() {
    var floorHeight = 3;
    var bHeight = this.nFloors * floorHeight;
    fill(0);
    stroke(0);

    //Umbrellas Row 2
    push();
    translate(this.x, height - 160);  //Location of Umbrella
    rect(0, -bHeight, this.breadth, bHeight); //Umbrella Stick
    stroke(255);
    fill(43, 71, 99)
    arc(1, -bHeight, 30, 20, PI, 0, PI);  //Umbrella Top
    pop();

    //Beachgoers
    push();
    noStroke();
    translate(this.x * 2, height - 130);  //Location of People
    ellipse(0, -bHeight, this.breadth, bHeight / 2); //Body
    ellipse(0, -bHeight - 8, 5, 5); //Head
    pop();

    //Umbrellas Row 1
    push();
    translate(this.x * 1.5, height - 100);  //Location of Umbrella
    rect(0, -bHeight, this.breadth, bHeight); //Umbrella Stick
    stroke(255);
    fill(43, 71, 99)
    arc(1, -bHeight, 30, 20, PI, 0, PI);  //Umbrella Top
    pop();
}
// DRAW THINGS

//MAKE THINGS
function makeUmbrella(birthLocationX) {
    var umb = {x: birthLocationX,
                breadth: 2,
                speed: -1.6,
                nFloors: round(random(2, 10)),
                move: umbrellaMove,
                display: umbrellaDisplay}
    return umb;
}
//MAKE THINGS


//MOUNTAINS
function drawMountain(){
  noStroke();
  var mountainDetail = 0.01;
  var mountainSpeed = 0.0001;

//MOUNTAINS (Back)
  fill(204, 216, 133); //dark Green color
  beginShape();
    for (x = 0; x < width; x++) {
      var t = (x * mountainDetail) + (millis() * mountainSpeed);
      var y = map(noise(t), 1, 0, 10, 50);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
    }
  endShape();
//MOUNTAINS (Back)

//MOUNTAINS (Front)
  fill(234, 230, 161); //Green color
  beginShape();
    for (x = 0; x < width; x++) {
      var t = (x * mountainDetail) + (millis() * mountainSpeed);
      var y = map(noise(t), 0, 1, 30, 150);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
    }
  endShape();
}
//MOUNTAINS (Front)
//MOUNTAINS

//GROUND (Sand)
function displaysand(){   //try to make it wavy ish
    noStroke(0);
    fill(251, 249, 231);  //Sandy Tan Color
    rect(0, height-180, width, height);
}
//GROUND (Sand)

//WAVES
function drawWaterWaves(){
  noStroke();

  fill(157, 204, 190);
  rect(0, height-80, width, height);
}
//WAVES


function draw() {
    background(skyColor);

    //CHANGING SKY COLOR
    changingSkyColor();

    //MOUNTAINS
    drawMountain();

    //FLOOR
    displaysand();

    //WATER
    drawWaterWaves();

    //UMBRELLAS
    updateAndDisplayUmbrellas();
    removeUmbrellasThatHaveSlippedOutOfView();
    addNewUmbrellasWithSomeRandomProbability();

}

I’ve been feeling homesick lately and I know I won’t be able to go back home til possibly next summer so I wanted to make something that reminded me of home, hence, the beach!! And there’s always a lot of tourists at the beach, especially the one I live close to, and it’s always really hot and sunny, hence the umbrellas, so voila!!

dnoh-sectionD-lookingoutwards10

Chole Varellidi

Project: Minicade

This project seems to be a very simple project in general. However, the innovative idea, as well as the beauty in the graphics hooked me on. The idea behind is project was to create a website that allows people to make a playlist of simple coded minigames. Chole Varellidi is an artist and programmer who has worked with Mozilla and is currently working at littleBits. She graduated with a B. Architecture and a Masters in Fine Arts. I feel more so inclined to this person because I am in architecture and desire to work in something like Varellidi–graphics with a bit of technology.

 

 

LookingOutwards-10-Chickoff

Swing is a video piece created by Yael Kanarek who is an Israeli American new media artist. She is based in New York City, where she was born, while having been raised in Israel. Returning to NYC for art school in 1991, she began her path into the internet art scene, while also having founded Upgrade!, a network of international artists concerned with combining activism with art and technology.

This artwork in particular is a screen capture of a computational video. As Kanarek states, “In this piece, a digital clock is used as the compositional device. The work runs live on a computer and is played by software that syncs video and audio with the computer’s internal clock. Thus, actual time is represented by the audiovisual experience on-screen.” More importantly, the children in the video (brothers and friends) discuss the issues of water scarcity in Israel as well as the lack of peace with Syria. Time being integral to such issues, and whether they are dealt with accordingly is incredibly present in this piece—the rhythmic swinging of the boy is the timekeeper.

Still from Swing
Kanarek-Generative Lanscape

Project 10-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project 10

var terrain = [];

function setup() {

    createCanvas(480, 400); 
    frameRate(13);
    
    // create an initial collection of terrains
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        //"terrain" is the mountainous 
        //landscape at bottom of screen
        terrain[i] = makeTerrain(rx);
    }
}

function draw() {
    background(190, 140, 20); 
  
    updateAndDisplayTerrain();
    removeTerrainThatHasSlippedOutOfView();
    addNewTerrainWithSomeRandomProbability(); 

    drawTerrain(); 
}

function updateAndDisplayTerrain() {
    // Update the terrain's position, and display them.
    for (var i = 0; i < terrain.length; i++) {
        terrain[i].move();
        terrain[i].display();
    }
}

function removeTerrainThatHasSlippedOutOfView() {

    var terrainToKeep = [];
    for (var i = 0; i < terrain.length; i++) {
        if (terrain[i].x + terrain[i].breadth > 0) {
            terrainToKeep.push(terrain[i]);
        }
    }
    terrain = terrainToKeep; // remember the surviving terrain
}

function addNewTerrainWithSomeRandomProbability() {
    // With a very high probability, add a new terrain to the end.
    var newTerrainLikelihood = 1; 
    if (random(0,3) < newTerrainLikelihood) {
        terrain.push(makeTerrain(width));
    }
}

// method to update position of terrain every frame
function terrainMove() {
    this.x += this.speed;
}
    
// draw the mountain range
function terrainDisplay() {
    
    var floorHeight = 400;
    var bHeight = this.nFloors * floorHeight; 
    
        fill(154, 176, 119); 
        stroke(210, 164, 54); 
        strokeWeight(random(0,9));
        push();
        translate(this.x, height - 40);

        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(0, -bHeight);

        stroke(74, 115, 119, 80); 
        strokeWeight(random(0,9));

    for (var i = 0; i < this.nFloors; i++) {

        beginShape();
        curveVertex(5, i * floorHeight);
        curveVertex(floorHeight, 34);
        curveVertex(68,  1);
        curveVertex(21,  107);
        curveVertex(400, 100);
        curveVertex(32, 100);
        endShape();

        beginShape();
        curveVertex(04, i * floorHeight);
        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(3, 100);
        curveVertex(32, 100);
        endShape();
    }
        pop();

}

function makeTerrain(birthLocationX) {
    var trn = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: terrainMove,
                display: terrainDisplay}
    return trn;
}

function drawTerrain() {

    fill(230, 160, 190);
    
    beginShape(); 
    for (var x = 10; x < width; x++) {
        var t = (x) + (millis() * 40);
        var y = map(noise(t), 0, 30, 10, height);
        vertex(x, y); 
    }
    endShape();

    //moon
    fill(240, 230, 74, 250);
    strokeWeight(random(0,9));
    ellipse(0, 0, width - 1, height - 1);

    //crater 1
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 33, 33);

    //crater 1 faded edge
    fill(250, 245, 230, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 23, 26);

    //crater 2
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(123, 93, 33);

    //crater 3
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 53, 53, 46);

    //crater 4
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 153, 13, 16);

    //crater 5
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(180, 0, 30, 30);

}

When I started this project, I knew that I wanted to create a landscape that involved nature. I wasn’t sure where to go with this until I started thinking about the idea of doing the opposite of a really lush landscape, and create something a bit more dead or barren. When I sketched, I thought about the idea of an asteroid, planet, or even our moon coming a little too close to Earth, enough to hurt the organisms living there.

I knew that to create this uneasy feeling, I’d have to play with color as well as a dizzying/shaky effect, which usually signals that something is wrong, and not everything is as it should be.