Month: November 2018

Romi Jin – Looking Outwards 10

Something I have always been interested in is the field of virtual reality. Milica Zec, a NYC-based film and virtual reality director, created a virtual reality experience entitled “Giant”. This experience is based on true events and represents what her and her family went through in Serbia during the 1990s, pulling directly on personal experience. This kind of virtual reality reminds me of an exhibit I saw at the Whitney about a year or two ago — a violent but symbolic VR scene, except this one is based on real events. The media takes you through an American family attempting to survive in an active war zone by hiding in a basement during bombing outside their home. The parents fabricate a story about a giant to tell to their six-year old daughter and says he wants to play with her, creating a parallel between the footsteps outside and the loud explosions (similar to the story of Life is Beautiful, one of my favorite movies, in which the father tells his son that they are in a competition to win a tank instead of WWII).


(Giant VR experience still.)

Zec states that it was difficult to create this film in that many technical aspects of the project had not been tackled previously, requiring technology that had not been fully developed yet. The process also included live-action actors (instead of computer renders) with depth data and three-dimensional environments inside a video-game engine. Combining reality with technology was a challenge, but she wanted to create an emotional impact, making the viewer feel trapped in this dangerous and frightening situation. Virtual reality possesses the power to do so, and it amazes and excites me at how much potential (whether scary or not) this type of technology has.

Project 10: Pat

pat


var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var xStart = 0, pat, patY;
var swimmer = 'https://vignette.wikia.nocookie.net/spongebob-polska/images/d/d5/Patryk.gif/revision/latest?cb=20180830203043&path-prefix=pl';

function preload(){
    pat = loadImage(swimmer);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    c2 = color(179, 77, 37);
    c1 = color(200, 200, 200);
    c = color(247, 222, 85);
 patY = height/2;
		

}



function waveback() {
	beginShape();
	stroke(250, 250, 255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 5, 0, height / 4);
        line(x, y + (height / 10), x, height); 
    }
    endShape();
}

function wavemidback() {
	beginShape();
	stroke(224, 224, 224);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 4, 0, height / 2);
        line(x, y + 15 + (height / 10), x, height); 
    }
    endShape();
}

function wavemidfront() {
	beginShape();
	stroke(192, 192, 192);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3.5, 0, height);
        line(x, y + 25 + (height / 10), x, height); 
    }
    endShape();
}

function wavefront() {
	beginShape();
	stroke(160, 160, 160);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3, 0, height);
        line(x, y + 50 + (height / 1.9), x, height); 
    }
    endShape();
	
	imageMode(CENTER);
    image(pat, width/1.5, (15*noise((width/5+xStart)))+height/2);
	xStart+=10;

}

 
function draw() {
    background("white");
    setGradient(0, 0, width, height / 3, c1, c2, yaxis);
    setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

    fill(247, 222, 125);
    //ellipse(width / 2, 25 + (height / 2), 50, 50);

    push();
    waveback();
    wavemidback();
    wavemidfront();
    wavefront();
    noFill();
    rect(0, 0, width, height);
    pop();
}



function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yaxis) {  // Top to bottom gradient
	    for (var i = y; i <= y+h; i++) {
		    var inter = map(i, y, y+h, 0, 1);
		    var c = lerpColor(c1, c2, inter);
		    stroke(c);
		    line(x, i, x + w, i);
		}
	}

}

 

I came about this thinking that I wanted to do something just very very weird. I found this gif on giphy, but could not effectively call it in my code, I ended up resolving the issue by just moving the static image

Carley Johnson Project 10

sketch 

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/

 
var stripes = [];
var offset = 0;
 
function newStripe(px, py, ph) {
    color: setColor();
    return {x: px, y: py, h: ph};
}

function setColor(){
    return color(random(1, 255), random(1, 255), 70);
}
 
 
function setup() {
    createCanvas(480, 300);
      stripes.push(newStripe(600, 200, 200));
}

function stripeRight(p) {
    return p.x + p.h;
}

function stripeLast() {
    return stripes[stripes.length - 1];
}
 
function draw() {
    background("lightblue");
    
    stroke(0);
    for (var i = 0; i < stripes.length; i++) {
        var p = stripes[i];
        fill((random(0, 255)),(random(0, 255)), (random(0, 255)));
        rect(p.x - offset, 0, 50, p.h + 100);
    }
 

    if (stripes.length > 0 & stripeRight(stripes[0]) < offset) {
        stripes.shift();
    }
 
    if (stripeRight(stripeLast()) - offset < width) {
        var p = newStripe(stripeRight(stripeLast()),
                            random(50, 225), 
                            200); 
        stripes.push(p); 
    }
 
    offset += 1;
}

Lol seizure warning honestly.

The idea was to have moving stripes in a pattern, creating a sort of ever-changing wallpaper. I got the moving landscape working alright, but missed how to assign one color to one stipe, so now it’s a psychadellic wallpaper I guess

cmhoward-project10-landscape

cassie-week10

var colorFill;
var pictures = []; //empty picture array 
var next = 0;
var maxX;

function setup() {
    createCanvas(480, 480);
    frameRate(100);
    //background fill
    colorFill = random(150, 255);

    //implement pictures in empty array, also check to make sure they are not within the boundary of another picture
    for (var i = 0; i < 10; i++) {
        var done = false;
        var px = next + random(10, 50);
        var b = random(50, 150);
        next = px + b
        maxX = next 
        pictures[i] = makePicture(px, b)
    }
}

function draw() {
    background(colorFill);
    updateAndDisplayPictures();
    removePictures();
    addNewPictures();
    makeBorder();
}

function updateAndDisplayPictures() {
    //detect border of pictures
    maxX = 0
    for (var i = 0; i < pictures.length; i++) {
        pictures[i].move();
        pictures[i].display();
    }
}

function removePictures() {
    var picturesToKeep = [];
    for (var i = 0; i < pictures.length; i++) {
        if (pictures[i].x + pictures[i].breadth > 0) {
            picturesToKeep.push(pictures[i]);
        }
    }
    pictures = picturesToKeep;
}

function addNewPictures() {
    var newPicturesProb = 0.01;
    //set breadth of image, detect border of picture
    var b = random(50, 150);
    if (random(0, 1) < newPicturesProb) {
        if (maxX < width) {
            pictures.push(makePicture(width, b));
        }   
    }
}

function pictureMove() {
    this.x += this.speed;
}

function pictureDisplay() {
    stroke(153, 76, 0);
    push();
    //random frame size 
    strokeWeight(this.frame);
    //random picture background
    fill(this.fill);
    //move frames across canvas
    translate(this.x, height - 150);
    //create frames 
    rect(0, -this.place, this.breadth, this.height);
    //give object in picture color
    if (this.typeColor < 1) {
        fill('red');
    }
    if (this.typeColor > 1 & this.typeColor < 2) {
        fill('blue');
    }
    if (this.typeColor > 2 & this.typeColor < 3) {
        fill('yellow');
    }
    //select object shape
    if (this.type == 0) {
        noStroke();
        ellipse(this.breadth/2, -this.place + this.height/2, this.breadth/4, this.height/4)
    }
    if (this.type == 1) {
        noStroke();
        rectMode(CENTER);
        rect(this.breadth/2, -this.place + this.height/2, this.breadth/4, this.height/4)
    }
    if (this.type == 2) {
        noStroke();
        triangle(this.breadth/2, -this.place + this.height/2, this.breadth/2 + this.breadth/4, -this.place + this.height/2 + this.height/4, this.breadth/2 - this.breadth/4, -this.place + this.height/2 + this.height/4)
    }
    pop();

    //check to make sure picture is not overlapping with another 
    if (this.x + this.breadth > maxX) {
        maxX = this.x + this.breadth 
    }
}

//create picture object 
function makePicture(px, b) {
    var pictures = {x: px, move: pictureMove, display: pictureDisplay, speed: -1, breadth: b, height: random(50, 150), place: random(50, 250), frame: random(3, 10), fill: random(50, 255), type: int(random(0, 3)), typeColor: random(0, 3)}
    return pictures; 
}

//create borders at top and bottom of screen to imitate baseboards 
function makeBorder() {
    noStroke();
    fill(255 - colorFill);
    rect(0, 0, width, 20);
    rect(0, height - 20, width, 20);
}

For this project, I was inspired by a museum gallery wall where you walk through a room of framed paintings, photographs, etc. and it creates a landscape of art.

I used this sketch to begin my project. I wanted to randomize the size of the art, the size of the frame, and the colors of the wall, border, and painting. Adding in the small abstract shapes to the paintings increases the randomness of the landscape. Because all of these are in flux, it creates a compelling composition of objects in space.

Trying to define the boundaries of these objects so that they wouldn’t overlap was quite challenging, but I learned a lot more about objects and conditions through this process.

Joanne Lee – Looking Outward 10

SUPERHYPERCUBE (2016, Heather Kelley).

The project I chose to discuss is called SUPERHYPERCUBE. It is a “VR first person puzzler” that was originally developed for PlayStationVR. In order to play this game, you must figure out how to rotate the cubes on your screen to fit the approaching wall. With each successful completion, you get more and more cubes, making it more difficult to see the shape of the wall behind you. At that point you must quickly peek around the cubes to see the shape of the wall and figure out the correct rotations.

This fascinating game was created by Heather Kelley who is a veteran game designer, digital artist, and media curator among many things. She has served as the co-chair of the IGDA’s Women in Game Development Special Interest Group for 7 years and is clearly very passionate and good at what she does. She is the co-founder of Kokoromi (an experimental game collective) and has created many creative games under her belt. I admired this game in particular because I really love puzzle games and the idea of a VR version was very interesting to me. I also admire how involved she has been in advocating women in game development and it has inspired me to try to create a small, simple game as a side project during the remainder of this semester!

Anthony Ra – Project 10 – Landscape

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-10 */

var boats = [];
var c1, c2;

function setup() {
  createCanvas(480, 200);
  frameRate(20);

  c1 = color(255, 70, 0);
  c2 = color(204, 143, 0);

  for (var i = 0; i < 5; i++) {
    var rx = random(width);
    boats[i] = makeBoats(rx);
  }

}

function draw() {

  /* background gradient */
  for (var i = 0; i < height - 70; i++) {
    var inter = map(i, 70, 110, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, i, width, i);
  }

  drawOcean();
  drawSun();

  updateAndDisplayBoats();
  addNewBoatsWithSomeRandomProbability();
}

/* draws ocean at bottom of canvas */
function drawOcean() {
  noStroke();
  fill(66, 31, 0);
  rect(0, height - 70, width, 70);
}
/* draws sun */
function drawSun() {
  noStroke();
  fill(255);
  ellipse(width/2 + 30, 68, 80, 80);
  fill(255, 235, 0);
  ellipse(width/2 + 30, 70, 80, 80);
  fill(115, 76, 0);
  rect(width/2 + 20, 140, 20, 5, 2.5);
  rect(width/2 + 10, 150, 40, 5, 2.5);
  rect(width/2, 160, 60, 5, 2.5);
  rect(width/2 - 10, 170, 80, 5, 2.5);
}


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

function addNewBoatsWithSomeRandomProbability() {
  var newBoatLikelihood = 0.007;
  if (random(0, 1) < newBoatLikelihood) {
    boats.push(makeBoats(width));
  }
}

function moveBoats() {
  this.x += this.speed;
}

function displayBoats() {
  noStroke();
  push();
  translate(0, 35);

  fill(0);
  quad(width/2 + this.x - 20, height/2 - 10,
    width/2 + this.x + 20, height/2 - 10,
    width/2 + this.x + 10, height/2,
    width/2 + this.x - 10, height/2);
  quad(width/2 + this.x - 5, height/2 - 15,
    width/2 + this.x + 5, height/2 - 15,
    width/2 + this.x + 10, height/2 - 10,
    width/2 + this.x - 10, height/2 - 10);
  fill(255);
  rect(width/2 + this.x - 3, height/2 - 13, 2, 2);
  pop();
}

function makeBoats(birthLocationX) {
  var bt = {x: birthLocationX,
  breadth: 50,
  speed: -1.6,
  r: random(0.1, 0.5),
  move: moveBoats,
  display: displayBoats,
  }
  return bt;
}

One of my favorite places to relax when I am home is Laguna Beach during the sunset. With its warm weather, the tranquility and warming color palette of the sky and ocean reflection makes it a prime destination to stop everything and enjoy the view. Because the setting is so calm, there is very minimal movement overall, barring any unconditional weather or wind. The only thing that moves in this script are the boats faraway, and even the boats seem to be moving at a peaceful movement.

rough sketch and mathematical estimates of placement of boats

landscape

sketch.js

var terrainSpeed = 0.001;
var terrainDetail = 0.005;


function setup() {
    createCanvas(480, 300);
    frameRate(10);

    
  

}
 
function draw() {
    background(0,50,400);
  
    for (var x = 0; x < width; x++){

        var t =((millis()*terrainSpeed));
        var y = map(noise(t), 0,1, 0, height);
          vertex(x, y); 
    }
    
    
    noFill(); 
    noStroke();
    beginShape(); 
    fill(50,112,255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    endShape();


    noFill(); 
    noStroke();
    beginShape(); 
    fill(0,112,255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed*2);
        var y = map(noise(t), 0,1, 10, height);
        vertex(x, y); 
    }
    endShape();
    
     beginShape(); 
     fill(0,200,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,10, 5, height*2);
        vertex(x, y); 
    }
    endShape();

      beginShape(); 
     fill(0,100,255)
    for (var x = 0; x < width; x++) {
        var t = (y * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,3, 5, height*3);
        vertex(x, y); 
    }
    endShape();



    noFill();
    
//yellow
    stroke(255,255,0)
    strokeWeight(150)
    ellipse(240, 150, width/2 +180, height+130);

//gray 
    stroke(100)
    strokeWeight(30)
    ellipse(240, 150, width /2  +60, height-20);

//outline
    stroke(0);
    strokeWeight(4)
    ellipse(240, 150, width /2 +30, height - 50);
//nails

//nail 1(upper middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 10, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 9, 5, 5);
//nail 2 (down middle)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(240, 290, 15, 15);
fill(225)
noStroke(0);
ellipse(238, 289, 5, 5);
//nail 3 (left)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(90, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(88, 149, 5, 5);
//nail 4 (right)
fill(100)
stroke(40)
strokeWeight(2)
ellipse(390, 150, 15, 15);
fill(225)
noStroke(0);
ellipse(387, 149, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 54, 5, 5);

//nail 6

fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 55, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 54, 5, 5);

//nail 7
fill(100)
stroke(40)
strokeWeight(2)
ellipse(350, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(348, 244, 5, 5);

//nail 5
fill(100)
stroke(40)
strokeWeight(2)
ellipse(130, 245, 15, 15);
fill(225)
noStroke(0);
ellipse(128, 243, 5, 5);



}

For this project I decided to do an underwater scape and portray the ripples, waves and movement of the water when you see it beneath the surface . I made a submarine window and made the interior of the submarine yellow inspired by the classic Beatles song “ Yellow Submarine”. For the window I added the typical bolts that you see inside of a submarine circular window. I played with the terrain example code, to create the movement in the underwater waves portraying the different colors and shapes that the underwater ripples have. The underwater scenery inspires me as it contrasts but also is similar to the shapes in the ground terrain of landscapes.

Project 10 Landscape rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 10 */

var ab = []; //stands for abstract
var backcolor; //for a mouse changes color backdrop
var beanFill;

function setup() {
    createCanvas(400, 400); 
   
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        ab[i] = makeAbs(rx);
    }
    frameRate(2);
}


function draw() {
	var R = mouseX
	var G = mouseY
	var B = mouseY
	backcolor = color(R, G, B);
    background(backcolor); 
    

    updateAbs();
    removeAbs();
    addNewAbs(); 
}

function updateAbs(){
    // update abstract position
    for (var i = 0; i < ab.length; i++){
        ab[i].move();
        ab[i].display();
    }
}

function removeAbs(){

    var Keep = [];
    for (var i = 0; i < ab.length; i++){
        if (ab[i].x + ab[i].breadth > 0) {
            Keep.push(ab[i]);
        }
    }
    beans = Keep;
}


function addNewAbs() {
    var Likelihood = 5; 
    if (random(0,4) < Likelihood) {
        beans.push(makeAbs(width));
    }
}

function abMove() {
    this.x += this.speed;
}
    
function absDisplay() {
    var AHeight = random(10, 30);
    var bHeight = this.nheight * AHeight; 

    var RR = mouseY
    var GG = mouseY
    var BB = mouseX
    beanFill = color(RR, GG, BB)
    fill(beanFill); 

    noStroke(0); 
    push();
    translate(this.x, height - 20);
    ellipse(0, -bHeight, this.breadth, bHeight); 
    pop();

    push();
    translate(0, 0);
    strokeWeight(7);
    stroke(beanFill);
    line(0,400, random(100,350), 0);
    pop();

    push();
    translate(0,0);
    strokeWeight(7);
    stroke(beanFill);
    line(400, 400, random(0,400), 0);
    pop();
}


function makeAbs(birthLocationX) {
    var abst = {x: birthLocationX,
                breadth: 40,
                speed: .4,
                nheight: round(random(2,6)),
                move: abMove,
                display: absDisplay }
    return abst;
}

***Move the mouse around image to work***

For this project I wasn’t interested in a stereotypical landscape, so I created a sort of abstract landscape with ‘jumping beans’, spotlights, and an RGB spectrum that changes based on mouse movement. I am really interested in how certain colors interact with one another and I used this project to explore that by watching the intersection of the moving beans and background color. Below is an early process sketch:

 

Xiaoying Meng Project 10 Landscape

sketch

//Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 10
var ghosts = [];
var frames = [];

//loading background pictures
function preload(){

    var filenames = [];
    filenames[0] = "https://i.imgur.com/UFAJ1Wu.png";
    filenames[1] = "https://i.imgur.com/snYvk3n.png";
    filenames[2] = "https://i.imgur.com/WhWuQcd.png";
    filenames[3] = "https://i.imgur.com/u4YZIhW.png";
    filenames[4] = "https://i.imgur.com/WhWuQcd.png";
    filenames[5] = "https://i.imgur.com/snYvk3n.png";

    for ( var a = 0; a < filenames.length; a++){
        frames.push(loadImage(filenames[a]));
    }
}
function setup() {
    createCanvas(480, 480); 
    frameRate(10);
    // initial collection of ghosts
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        ghosts[i] = makeghost(rx);
    }
}


function draw() {
//display pictures to create motion
    push();
    scale(0.5);
    image(frames[frameCount % 6], -200,10);
    pop();

    updateAndDisplayghosts();
    removeghostsThatHaveSlippedOutOfView();
    addNewghostsWithSomeRandomProbability(); 


}


function updateAndDisplayghosts(){
    // Update ghost positions
    for (var i = 0; i < ghosts.length; i++){
        ghosts[i].move();
        ghosts[i].display();
    }
}


function removeghostsThatHaveSlippedOutOfView(){

    var ghostsToKeep = [];
    for (var i = 0; i < ghosts.length; i++){
        if (ghosts[i].x + ghosts[i].gWidth > 0) {
            ghostsToKeep.push(ghosts[i]);
        }
    }
    ghosts = ghostsToKeep;
}


function addNewghostsWithSomeRandomProbability() {
    // With a very tiny probability, add a new ghost to the end.
    var newghostLikelihood = 0.005; 
    if (random(0,1) < newghostLikelihood) {
        ghosts.push(makeghost(width));
    }
}


// move ghosts
function ghostMove() {
    this.x += this.speed;
}
    

// Draw ghosts
function ghostDisplay() {
    var ghostHeight = this.gHeight * 70; 

    push();
    fill(255,255,255,170); 
    noStroke(0);
    translate(this.x, height -400);
    //enlarge ghosts
    scale(1.5);

    //create ghost body
    beginShape();
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/5-10,ghostHeight/5+30);
    curveVertex(this.gWidth/5+5,ghostHeight/5+20);
    curveVertex(this.gWidth/5+25,ghostHeight/5+40);
    curveVertex(this.gWidth/5+50,ghostHeight/5);
    curveVertex(this.gWidth/5+100,ghostHeight/5);
    curveVertex(this.gWidth/5+80,ghostHeight/5-70);
    curveVertex(this.gWidth/5+50,ghostHeight/5-100);
    curveVertex(this.gWidth/5+25,ghostHeight/5-100);
    curveVertex(this.gWidth/5+5,ghostHeight/5-70);
    curveVertex(this.gWidth/8,ghostHeight/5);
    curveVertex(this.gWidth/8,ghostHeight/5);
    endShape();

    //creat ghost eyes and mouth
    fill(0,0,0,170);
    ellipse(this.gWidth/5+50,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+30,ghostHeight/5-70,this.gWidth/5+5,this.gWidth/5+5);
    ellipse(this.gWidth/5+40,ghostHeight/5-20,this.gWidth/5+5,this.gWidth/5+20);


    pop();
}


function makeghost(birthLocationX) {
    var ghost = {x: birthLocationX,
                gWidth:random(70,80),
                speed: -1.0,
                gHeight:random(2,10),
                move: ghostMove,
                display: ghostDisplay}
    return ghost;
}

Since Halloween just passed, I thought I’d do something spooky. So I thought about ghosts. I found a gif of Simpson “can’t fall asleep” and I thought it was perfect for it.

Project-10-Landscape-Veronica

sketch

// Veronica Wang
// Section B 
// yiruiw@andrew.cmu.edu
// Project-10

var sushi1 = [];
var sushi2 = [];
var sushi3 = [];

function setup() {
    createCanvas(480, 300); 
    frameRate(100);
}


function draw() {
    background("wheat"); 
    
    displayRoom();

    displayPlates();
    removePlates(sushi1);
    removePlates(sushi2);
    removePlates(sushi3);
    newPlate(); 

}


function displayPlates(){
    for (var i = 0; i < sushi1.length; i++){
        sushi1[i].move();
        sushi1[i].display1();
    }
    for (var i = 0; i < sushi2.length; i++){
        sushi2[i].move();
        sushi2[i].display2();
    }
    for (var i = 0; i < sushi3.length; i++){
        sushi3[i].move();
        sushi3[i].display3();
    }
}


function removePlates(plates){

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


function newPlate() {
    // With a very tiny probability, add a new sushi to the end.   
    var prob = 0.008;
    //sandomly select which type of sushi to serve
    if (random(0, 1) < prob) {
        var sunum = random(0,3);
        if (sunum < 1){
            sushi1.push(makePlate(width));
        } else if (sunum < 2){
            sushi2.push(makePlate(width));
        } else {
            sushi3.push(makePlate(width));
        }
        
    }  
}


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

// draw the building and some windows
function sushi1Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi1
    fill("black");
    noStroke();
    ellipse(12.5, 10, 25, 10);
    rect(0, 0, 25, 10);
    fill("white");
    ellipse(12.5, 0, 25, 10);
    fill("red");
    ellipse(10, 0, 5, 5);
    ellipse(11, 2, 5, 5);
    ellipse(12, -1, 5, 5);
    ellipse(14, -3, 5, 5);
    ellipse(10, 2, 5, 5);
    ellipse(11, -4, 5, 5);
    ellipse(15, -2, 5, 5);
    ellipse(16, -3, 5, 5);

    pop();
}

function sushi2Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi2
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("orange");
    rect(0, -3, 22, 5);
    fill("black");
    rect(7, -5, 5, 10);

    pop();
}

function sushi3Display() {

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 135);

    //sushi3
    fill("black");
    noStroke();
    ellipse(10, 10, 20, 10);
    rect(0, 0, 20, 10);
    fill("white");
    ellipse(10, 0, 20, 10);
    fill("salmon");
    ellipse(10, 0, 10, 5);

    pop();
}


function makePlate(birthLocationX) {
    var plt = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nItems: round(random(1,3)),
                move: platesMove,
                display1: sushi1Display,
                display2: sushi2Display,
                display3: sushi3Display}
    return plt;
}

//drawing elements in the room
function displayRoom(){
    //curtain panels
    fill("cornsilk");
    noStroke();
    rect(0, 0, width, 75);

    stroke("peru");
    strokeWeight(1);

    for (var i = 0; i < 20; i++) {
        line(i * 30, 0, i * 30, 75);
    };
    
    strokeWeight(10);
    line(0, 75, width, 75);

    //lights
    stroke("black");
    strokeWeight(2);

    for (var i = 0; i < 5; i++) {
        line(50 + i * 90, 0, 50 + i * 90, 100);
        triangle(50 + i * 90, 100, 40 + i * 90, 110, 60 + i * 90, 110);
        rect(45 + i * 90, 100, 10, 5);
    };

    //conveyor belt
    fill("gray");
    noStroke();
    rect(0, 150, width, 40);

    //table
    noStroke();
    fill("tan");
    rect(0, 190, width, 200);
    
    fill("peru");
    rect(0, 190, width, 10);

    strokeWeight(1);
    stroke(0);
    line(0,height-70, width, height-70); 

    //plate
    fill("white");
    ellipse(width / 2, height - 40, 90, 30);

    //chopsticks
    noStroke();
    fill("lightgray");
    rect(300, height - 50, 20, 8);
    fill("black");
    rect(305, height - 55, 2, 40);
    rect(310, height - 55, 2, 40);

}

Rotating sushi bars are one of my favorite types of restaurants, so I tried to create a conveyor belt serving scene in this project. It took me some time to figure out how to randomly select different objects, and also the overlapping of objects being generated. I tried playing around with probability/count/ etc. but some instances are still overlapped. 🙁

Initial sketch