The concept behind this project is the rotating sushi bar I used to love when i was a child living in china. The sushi chef will prepare the sushi in dishes and place them on top of the transporting track. Customers will just wait and select the different sushi and sea food dishes they want. So I drawn this graphic sushi bar from the customer standing perspective. The dishes will change randomly between two types: Sushi roll, Sushi and fish head that I illustrated. It will also generate randomly size and color of the dishes.
//Zining Ye
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu
//Project-10
var speed= -4;
var linex=-100;
var disk = [];
var sushilink =
["https://i.imgur.com/b6hRo0j.png",
"https://i.imgur.com/QaOb647.png",
"https://i.imgur.com/099E6kA.png"]
var roll;
var sushi;
var fish;
function preload(){ //load sushi image
roll= loadImage(sushilink[0]);
fish= loadImage(sushilink[1]);
sushi=loadImage(sushilink[2]);
}
function setup() {
createCanvas(480, 480);
var rx = 0;
// create an initial collection of disks
for (var i = 0; i < 30; i++){
disk[i] = makeDisk(rx);
rx+=250;
}
frameRate(10);
}
function draw(){
background(80);
translate(0,-20); //frame shift upward
sushiBar(); //calling sushi bar function
displayLine();
updatedisplayDisk(); //call disk draw funciton
displayChopstick(); //calling chopstick draw function
displayChopstick1(); //calling second chopstick function
}
function sushiBar(){ // drawing of the sushi bar
noStroke();
//drawing the transporting trail
fill(120,120,90);
rect(0,0,width,120);
fill(220,180,130);
stroke(0);
strokeWeight(3);
rect(0,height/2-140,width,20);
fill(170,140,100);
strokeWeight(1);
rect(0,height/2-130,width,20);
fill(180);
strokeWeight(3);
rect(0,height/2-120,width,150);
//drawing the sushi counter
fill(220,180,130)
rect(0,height/2+30,width,10);
strokeWeight(1);
fill(170,140,100)
rect(0,height/2+39,width,10);
strokeWeight(1.5);
fill(190,170,130)
rect(0,height/2+49,width,80);
fill(230,220,190)
rect(0,height/2+129,width,140);
}
function updatedisplayDisk(){ //keep the sushi and disk display
for(var i=0;i<disk.length;i++){
disk[i].move();
disk[i].display();
}
}
function diskMove(){ //moving the disk by updating the speed
this.x += this.speed;
}
function displayDisk(){ //drawing the disk
push();
fill(this.color);
//line(30,height/2-120,30,height/2+30)
strokeWeight(2); //the ellipse of the plate
ellipse(this.x,this.disky,this.diskw,this.diskh);
fill(120);
noStroke();
ellipse(this.x+5,this.disky+10,80,30); //shadow of the food
//deciding which food will be on the plate
if(this.food == roll){
image(roll,this.x-230,50,roll.width*0.7,roll.height*0.8);
rectMode(CENTER);
fill(250);
}else if(this.food == fish){
fill(0);
image(fish,this.x-70,120,fish.width*0.8,fish.height*0.8);
} else{
image(sushi,this.x-190,70,roll.width*0.6,roll.height*0.7);
}
pop();
}
function displayLine(){
push();
//drawing the sushi trail
stroke(0);
strokeWeight(2);
for(var i=0; i<300;i++){
var space = i*30
line(linex+space,height/2-120,linex+space,height/2+30);
}
linex += speed
pop();
}
function displayChopstick(){ //drawing of the chopstick
translate(-120,0);
var chopx=190
var chopy1= height/2+180
var chopy2= height/2+192
fill(90,80,70);
noStroke();
rect(chopx+17,chopy1-10,7,38);
fill(120,120,70);
rect(chopx+17,chopy1-10,7,33);
strokeCap(ROUND);
stroke(220,70,60);
strokeWeight(6)
line(chopx,chopy1,chopx+120,chopy1)
line(chopx,chopy2,chopx+120,chopy2)
stroke(20);
line(chopx+90,chopy1,chopx+120,chopy1)
line(chopx+90,chopy2,chopx+120,chopy2)
stroke(190,190,20);
strokeCap(SQUARE);
line(chopx+85,chopy1,chopx+90,chopy1)
line(chopx+85,chopy2,chopx+90,chopy2)
}
function displayChopstick1(){ //same chopstick drawing copyed to a different position
translate(220,0);
var chopx=190
var chopy1= height/2+180
var chopy2= height/2+192
fill(90,80,70);
noStroke();
rect(chopx+17,chopy1-10,7,38);
fill(120,120,70);
rect(chopx+17,chopy1-10,7,33);
strokeCap(ROUND);
stroke(220,70,60);
strokeWeight(6)
line(chopx,chopy1,chopx+120,chopy1)
line(chopx,chopy2,chopx+120,chopy2)
stroke(20);
line(chopx+90,chopy1,chopx+120,chopy1)
line(chopx+90,chopy2,chopx+120,chopy2)
stroke(190,190,20);
strokeCap(SQUARE);
line(chopx+85,chopy1,chopx+90,chopy1)
line(chopx+85,chopy2,chopx+90,chopy2)
}
function makeDisk(diskx){ //object of the disk
var disk = {x: diskx,
disky: 200,
diskw: random(100,200),
diskh: random(70,130),
speed: -4.0,
move: diskMove,
display:displayDisk,
color: random(190,230),
food: random([roll,fish,sushi])
}
return disk;
}