Category: Section D

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.

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.

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.”

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!!

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.