Category: Project-10-Landscape

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project 10 - Generative Landscape
*/

// array that holds flower objects
var flowers = [];
var terrainSpeed = 0.0005;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.005;
var image0;
var image1;
var image2;


function preload() {
    image0 = loadImage("https://i.imgur.com/qqE2J0x.png?1");
    image1 = loadImage("https://i.imgur.com/4xXEj18.png");
    image2 = loadImage("https://i.imgur.com/j45lLa7.png");
}

function setup() {
    createCanvas(480, 480); 
    // creates an initial collection of flowers
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        flowers[i] = makeFlowers(rx);
    }
    frameRate(10);
}


function draw() {
    // loads image as background
    image(image2, 0, 0, width * 2, height * 2);
    // start mountains
    push();
    noStroke();
    //purpl-ish color
    fill(51, 0, 51); 
    beginShape(); 
    for (var mx = 0; mx < width; mx++) {
        var t = (mx * terrainDetail) + (millis() * terrainSpeed2);
        var my = map(noise(t), 0,1, height / 10, height - 90);
        vertex(mx, my); 
    }
    // includes bottom corners of canvas to fill in the color of the shape
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop();
    //end mountains

    // begin grass
    push();
    noStroke();
    fill("green"); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height - height / 4, height - 80);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop()
    //end grass


    // drawing flowers
    updateAndDisplayflowers();
    removeflowersThatHaveSlippedOutOfView();
    addNewflowersWithSomeRandomProbability(); 

    // V flying on a turtle (eh why not?)
    flyingV(mouseX, mouseY);
}

// draws me flying on a turtle hehehe
function flyingV(x, y) {
    imageMode(CENTER);
    image(image1, x, y, 100, 80);
    image(image0, x - 15, y - 20, 200, 250);
}

// makes flowers appear on the grassy area
function updateAndDisplayflowers() {
    for (var i = 0; i < flowers.length; i++){
        flowers[i].move();
        flowers[i].display();
    }
}

    // If the flowers drop off the left edge, remove them from the array
function removeflowersThatHaveSlippedOutOfView(){
    var flowersToKeep = [];
    for (var i = 0; i < flowers.length; i++){
        if (flowers[i].x + flowers[i].breadth > 0) {
            flowersToKeep.push(flowers[i]);
        }
    }
    flowers = flowersToKeep; // remember the surviving flowers
}

function addNewflowersWithSomeRandomProbability() {
    // with a small probability add a new flower to the end.
    var newFlowersLikelihood = 0.8; 
    if (random(0, 1) < newFlowersLikelihood) {
        flowers.push(makeFlowers(width));
    }
}

// method to update position of flowers every frame
function flowersMove() {
    this.x += this.speed;
}
    
// draw the flowers baseed on my design from the wallpaper project!
function flowersDisplay() {
    push();
    translate(this.x, this.y);
    scale(.25);
    flowerStem(0, 0);
    flowerPetals(0, 0);
    stem(0, 0);
    leaves(15, -15);
    pop();
}

function makeFlowers(birthLocationX) {
    var flwr = {x: birthLocationX,
                y: random(height - 80, height),
                breadth: 50,
                speed: -8.0,
                nFloors: round(random(2,8)),
                move: flowersMove,
                display: flowersDisplay}
    return flwr;
}

// function to draw the stem
function stem(x, y) {
   strokeWeight(7);
    stroke(0, 155, 0);
    line(x, y, x + 85, y - 35);
}

// function to draw the leaves
function leaves(x, y) {
    noStroke();
    // leaf color
    fill(0, 190, 0);
    // actual leaves
    ellipse(x, y - 1, 24, 10);
    ellipse(x + 25, y + 9, 24, 10);
    ellipse(x + 21, y - 10, 24, 10);
    strokeWeight(2);
    // leaf vein color
    stroke(100, 230, 100);
    // each leaf also has a little line to represent its veins
    line(x - 12, y - 1, x + 12, y - 1);
    line(x + 13, y + 9, x + 37, y + 9);
    line(x + 9, y - 10, x + 33, y - 10);
}

// function to draw the stems branching to the petals
function flowerStem(x, y) {
    strokeWeight(4);
    stroke(0, 190, 0);
    // actual stem
    line(x + 56, y - 27, x + 46, y - 43);
    // each stem also has a little bulb
    ellipse(x + 46, y - 43, 7, 7);
    line(x + 55, y - 18, x + 72, y + 2);
    ellipse(x + 72, y + 2, 8);
    line(x + 70, y - 33, x + 78, y - 60);
    ellipse(x + 78, y - 60, 8);
    line(x + 79, y - 28, x + 100, y - 3);
    ellipse(x + 100, y - 3, 10);
    line(x + 85, y - 35, x + 105, y - 57);
    ellipse(x + 105, y - 57, 11);
}

// function to draw flower petals
function flowerPetals(x, y) {
    noStroke();
    // main petal color
    fill(255, 125, 165);
    // petal 1
    ellipse(x + 43, y - 55, 23);
    //petal 2
    ellipse(x + 75, y + 12, 25);
    //petal 3
    ellipse(x + 74, y - 70, 20);
    // petal 4
    ellipse(x + 104, y + 10, 21);
    // petal 5
    ellipse(x + 108, y - 70, 27);
    fill(255, 65, 105);
    // sub-petal 1
    ellipse(x + 39, y - 45, 13);
    ellipse(x + 52, y - 55, 11);
    // sub-petal 2
    ellipse(x + 67, y + 6, 13);
    ellipse(x + 81, y + 4, 10);
    ellipse(x + 64, y + 15, 11);
    // sub-petal 3
    ellipse(x + 70, y - 61, 16);
    // sub-petal 4
    ellipse(x + 100, y + 5, 12);
    ellipse(x + 112, y + 8, 9);
    // sub-petal 5
    ellipse(x + 97, y - 63, 14);
    ellipse(x + 109, y - 58, 10);
    ellipse(x + 119, y - 64, 13);
    // detail color in petals
    fill(185, 0, 25);
    // sub-sub-petal 1
    ellipse(x + 32, y - 50, 9);
    ellipse(x + 48, y - 50, 8);
    // sub-sub-petal 2
    ellipse(x + 64, y + 2, 8);
    ellipse(x + 74, y + 4, 10);
    ellipse(x + 60, y + 9, 8);
    //sub-sub-petal 3
    ellipse(x + 78, y - 65, 13);
    ellipse(x + 62, y - 67, 8);
    // sub-sub-petal 4
    ellipse(x + 92, y + 9, 8);
    ellipse(x + 108, y + 5, 9);
    // sub-sub-petal 5
    ellipse(x + 102, y - 60, 9);
    ellipse(x + 90, y - 65, 10);
    // other detail color in petals
    fill(255, 205, 205);
    // many sub petals 1
    ellipse(x + 40, y - 67, 11);
    ellipse(x + 52, y - 60, 8);
    // many sub petals 2
    ellipse(x + 64, y + 16, 8);
    ellipse(x + 77, y + 9, 10);
    ellipse(x + 67, y + 23, 7);
    // many sub petals 3
    ellipse(x + 78, y - 79, 10);
    ellipse(x + 66, y - 71, 8);
    // many sub-petals 4
    ellipse(x + 94, y + 18, 12);
    ellipse(x + 114, y + 14, 9);
    // many sub-petals 5
    ellipse(x + 103, y - 69, 9);
    ellipse(x + 90, y - 64, 8);
    ellipse(x + 121, y - 74, 10);
}

In this project I decided to represent a sort of dream-sequence. I am riding on a turtle’s back…..for whatever reason, flying through a trippy dream-scape. I incorporated my flower design from the wallpaper project because I really like it, it represents some sentimental value, and for these reasons seems quite fitting in a personal dream-world. I love the mountains so flying through the mountains would be a dream of mine.

I had a lot of other plans for things I wanted to include in this project, and I spent a bunch of hours trying to figure it all out and work things out, but I just hit obstacle after obstacle when I couldn’t find where I was committing errors, and had to abandon some of my plans.

Ultimately, I like the concept of the project. The implementation itself I just found really difficult and still don’t really understand how all the mechanics work for creating a generative landscape.
I made me riding on a turtle though. So that’s pretty rad.

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.

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.

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.

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