Project Title: Boba

link: https://editor.p5js.org/jl14064/sketches/rSURhuHVR

Description:

This is a cup of boba.

By default, it has little tea in it.

If you press “v”, the volume of the tea would rise.

If you click the mouse within the area of the tea, there would be some boba created.

If you press “s” afterward, there will be a boba “sipped” in the straw.

I was waiting for a food delivery of boba during the recitation session. That became my inspiration. After listening to my idea, Professor Godoy suggested I include the movement of a boba in it. 

In the future, I hope that I can learn how to use the loop in p5 to make the movement of boba duplicates instead of just being activated once.

Reflection:

I used many variables in this project for restraining the workplace for drawing and the storage of the color of “tea” and “boba” and the size of the “cup” and “straw”.  The control of the area of drawing makes the project reflect reality. The storage of the features helps me to call these elements more easily.

I used “if” to change the volume of the “tea”, add “boba” and “sip” the “boba” and “tea”. With the operation on keyboard and mouse, the interaction comes alive.

“Key” is used when the input is an ASCII key while “keycode” is used when the input is a non-ASCII key.

Code:

let x1 ;
let x2 ;
let y ;
let sx1;
let sx2;
let ty;
let my;
let bR;
let bG;
let bB;
let tR;
let tG;
let tB;

function setup() {
createCanvas(400, 400);
background(400);

//boba color set
bR = 94;
bG = 82;
bB = 71;

//tea color set
tR = 214;
tG = 201;
tB = 193;
ty = 3/4*height;

//volume line
x1 = width/4;
y = 3/4*height;
x2 = 3/4*width;

// body of the cup
rect(width/4, height/4, width/2, height/2);

//bottom of the cup
fill(tR,tG,tB);
stroke('black');
arc(width/2, y,width/2,height/4, 0, PI);

//hide the line
stroke(tR,tG,tB);
line(x1, y, x2, y);

//straw set
sx1 = width/2-20;
sx2 = width/2+20;
sy = 3/4*height;

//straw
stroke('black');
line(sx1, height/8, sx1, sy);
line(sx2, height/8, sx2, sy);
stroke('white');
line(sx1, height/4, sx2, height/4);

//MOVE BOBA
my = 3/4*height;

}

function draw() {

//tea line
stroke(tR, tG,tB);
line(x1+1, y, sx1-1, y) ;//left tea
line(sx2+1, y, x2-1, y) ;//right tea
line(sx1+1,ty, sx2-1, ty); //middle tea

//ADD some tea
if (keyIsPressed && key == "v") {
y = y - 1;
ty = ty - 1;
}
//full cup
if (y < width/4 + 15) {
y= width/4 + 15;
ty = width/4 + 15;
}

//ADD some boba
if (mouseIsPressed && mouseX<3/4*width-30 && mouseX>1/4*width+30 && mouseY>y+15 && mouseY<3/4*height+15 ) {
noStroke();
fill(bR,bG,bB);
ellipse(mouseX, mouseY, 30, 30);
}

//SIP tea
if(keyIsPressed && key == "s") {
//DECREASE tea
stroke('white');
line(x1+1/2, y, sx1-1/2, y) ;//left tea
line(sx2+1/2, y, x2-1/2, y) ;//right tea
y = y + 1;
ty = ty -1;

//RESTORE straw
stroke('black');
line(sx1, height/8, sx1, y);
line(sx2, height/8, sx2, y);

//SUMMON boba
noStroke();
fill(tR,tG,tB);
rectMode(CENTER);
rect(width/2,my,39,39);

//UP boba
noStroke();
fill(bR, bG, bB);
circle(width/2,my, 30);
my = my -1;

}

//bottom boundary
if (y > 3*width/4) {
y = 3*width/4;

fill(tR,tG,tB);
stroke('black');
arc(width/2, y,width/2,height/4, 0, PI);
}

fill(tR,tG, tB);
noStroke();
text("Press v to fill the cup \nClick to add boba \nPress s to sip at your tea", 10, 20);

}