Project Link
https://editor.p5js.org/YuzhuoSun-Zora/sketches/nW7bQ1P0U
Brief Description
In this mini project, I exchanged the portfolio with my partner and exchanged our dreams or a nice experience. She told me she likes delicacies, especially sushi, so I designed an “eating game” with her portfolio. In the game, we can use the mouse to drag sushis to the mouth and click to eat. If all the sushis are eaten in a limited time, red hearts will appear to show satisfaction. Otherwise, the girl will be sad.
Visual Documentation
Coding
Complete codeļ¼
//values for sushis
let sushiX1 = 30;
let sushiY1 = 200;
let sushiX2 = 70;
let sushiY2 = 60;
let sushiX3 = 330;
let sushiY3 = 150;
let sushiX4 = 280;
let sushiY4 = 40;
let sushiTransparency1 = 255;
let sushiTransparency2 = 255;
let sushiTransparency3 = 255;
let sushiTransparency4 = 255;
//mouth transparency
let mouthTransparency = 255;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(188, 159, 191);
console.log(frameCount);
//hair
noFill();
fill(54, 34, 4);
rect(100, 138, 200, 220);
//top of head
fill(0);
ellipse(200, 122, 180, 100);
ellipse(110, 125, 30, 40);
ellipse(289, 125, 30, 40);
//neck
fill(241, 194, 150);
rect(173, 290, 60, 40);
//face
noStroke();
fill(241, 194, 150);
circle(200, 200, 200);
//eyes
noStroke();
fill(255);
ellipse(165, 180, 40, 20);
ellipse(235, 180, 40, 20);
fill(0);
ellipse(165, 180, 20, 20);
ellipse(235, 180, 20, 20);
fill(255);
ellipse(169, 176, 8, 8);
ellipse(239, 176, 8, 8);
ellipse(160, 182, 5, 5);
ellipse(230, 182, 5, 5);
fill(0);
rect(165, 160, 1, 11);
rect(160, 161, 1, 9);
rect(170, 161, 1, 9);
rect(155, 165, 1, 6);
rect(175, 165, 1, 6);
rect(235, 160, 1, 11);
rect(230, 161, 1, 9);
rect(240, 161, 1, 9);
rect(225, 165, 1, 6);
rect(245, 165, 1, 6);
//nose
stroke(0);
fill(241, 194, 150);
ellipse(200, 210, 25, 15);
noStroke();
fill(241, 194, 150);
ellipse(200, 206, 21, 10);
//dimples
stroke(0);
fill(241, 194, 150);
ellipse(248, 235, 7, 10);
noStroke();
fill(241, 194, 150);
ellipse(247, 235, 7, 15);
stroke(0);
fill(241, 194, 150);
ellipse(261, 235, 7, 15);
noStroke();
fill(241, 194, 150);
ellipse(260, 235, 7, 16);
stroke(0);
fill(241, 194, 150);
ellipse(150, 235, 7, 10);
noStroke();
fill(241, 194, 150);
ellipse(151, 235, 7, 15);
//mouth state 1
// mouth close
stroke(4);
line(175, 240, 224, 240);
//mouth state 2
//mouth open
noStroke();
fill(215, 107, 120, mouthTransparency);
arc(200, 230, 65, 60, 0, radians(180));
fill(255, mouthTransparency);
rect(175, 230, 50, 10);
fill(0);
//mouth open again
//when mouse leave the head
if (mouseX <= 100 || mouseX >= 300 || mouseY <= 70 || mouseY >= 300) {
// mouth state 2 turns to transparent
mouthTransparency = 255;
}
//bodyr
fill(241, 194, 150);
rect(60, 354, 40, 50);
fill(241, 194, 150);
rect(301, 354, 40, 50);
noStroke();
fill(130, 143, 171);
rect(80, 325, 240, 90);
circle(115, 370, 115);
circle(285, 370, 115);
//ear
noStroke();
fill(241, 194, 150);
ellipse(105, 200, 30, 50);
ellipse(295, 200, 30, 50);
// bangs
noStroke();
fill(0);
triangle(88, 240, 120, 100, 200, 100);
triangle(200, 100, 280, 100, 313, 243);
//heart necklace
noFill();
stroke(229, 184, 11);
strokeWeight(1.5);
ellipse(203, 328, 60, 50);
noStroke();
fill(241, 194, 150);
rect(173, 290, 60, 35);
fill(229, 184, 11);
circle(199, 350, 11);
circle(206.5, 350, 11);
triangle(193, 350, 212.5, 350, 203.5, 364);
fill(241, 194, 150);
ellipse(203, 320, 59, 30);
noFill();
noStroke();
fill(241, 194, 150);
rect(173, 290, 60, 35);
//hide the bottom part
fill(188, 159, 191);
rect(0, 400, 400, 200);
//mouse positon
// let MousePosition = mouseX + "," + mouseY;
// fill(0);
// text(MousePosition, mouseX, mouseY);
// draw 4 sushis
fill(255, sushiTransparency1);
rect(sushiX1, sushiY1, 50, 20, 10);
fill(255, sushiTransparency2);
rect(sushiX2, sushiY2, 50, 20, 10);
fill(255, sushiTransparency3);
rect(sushiX3, sushiY3, 50, 20, 10);
fill(255, sushiTransparency4);
rect(sushiX4, sushiY4, 50, 20, 10);
fill(255, 153, 0, sushiTransparency1);
arc(sushiX1 + 25, sushiY1 + 5, 55, 25, PI, TWO_PI);
fill(255, 153, 0, sushiTransparency2);
arc(sushiX2 + 25, sushiY2 + 5, 55, 25, PI, TWO_PI);
fill(255, 153, 0, sushiTransparency3);
arc(sushiX3 + 25, sushiY3 + 5, 55, 25, PI, TWO_PI);
fill(255, 153, 0, sushiTransparency4);
arc(sushiX4 + 25, sushiY4 + 5, 55, 25, PI, TWO_PI);
//sushi move with mouse
if (
mouseX >= sushiX1 - 20 &&
mouseX <= sushiX1 + 50 &&
mouseY >= sushiY1 - 20 &&
mouseY <= sushiY1 + 20
) {
sushiX1 = mouseX;
sushiY1 = mouseY;
}
if (
mouseX >= sushiX2 - 20 &&
mouseX <= sushiX2 + 50 &&
mouseY >= sushiY2 - 20 &&
mouseY <= sushiY2 + 20
) {
sushiX2 = mouseX;
sushiY2 = mouseY;
}
if (
mouseX >= sushiX3 - 20 &&
mouseX <= sushiX3 + 50 &&
mouseY >= sushiY3 - 20 &&
mouseY <= sushiY3 + 20
) {
sushiX3 = mouseX;
sushiY3 = mouseY;
}
if (
mouseX >= sushiX4 - 20 &&
mouseX <= sushiX4 + 50 &&
mouseY >= sushiY4 - 20 &&
mouseY <= sushiY4 + 20
) {
sushiX4 = mouseX;
sushiY4 = mouseY;
}
//random heart
if (frameCount >= 600){
if(sushiTransparency1 == 0 &&
sushiTransparency2 == 0 &&
sushiTransparency3 == 0 &&
sushiTransparency4 == 0){
// the frequency of the hearts appearing
frameRate(3);
// the hearts appear in random position
let heartX = random(width);
let heartY = random(height);
//draw the hearts
fill(255, 0, 0, 150);
triangle(heartX, heartY, heartX + 60, heartY, heartX + 30, heartY + 30);
arc(heartX + 15, heartY, 30, 30, PI, TWO_PI);
arc(heartX + 45, heartY, 30, 30, PI, TWO_PI);
} else {
//sishu cannot move
sushiX1 = 30;
sushiY1 = 200;
sushiX2 = 70;
sushiY2 = 60;
sushiX3 = 330;
sushiY3 = 150;
sushiX4 = 280;
sushiY4 = 40;
//the mouth goes sad
noStroke();
fill(241, 194, 150);
rect(130,220,140,40);
noFill();
stroke(2);
arc(200, 270, 70, 50, PI, TWO_PI);
}
}
}
function mousePressed() {
//when mouse is close to the mouth
//sushi disappear
//and the mouth close
if (mouseX >= 170 && mouseX <= 200 && mouseY >= 200 && mouseY <= 250) {
if (sushiX1 == mouseX && sushiY1 == mouseY) {
sushiTransparency1 = 0;
mouthTransparency = 0;
}
if (sushiX2 == mouseX && sushiY2 == mouseY) {
sushiTransparency2 = 0;
mouthTransparency = 0;
}
if (sushiX3 == mouseX && sushiY3 == mouseY) {
sushiTransparency3 = 0;
mouthTransparency = 0;
}
if (sushiX4 == mouseX && sushiY4 == mouseY) {
sushiTransparency4 = 0;
mouthTransparency = 0;
}
}
}
challenge:
- The condition of the object moving with the mouse.
In the beginning, I assumed that if the mouse reached the corner point of the object, then the corner point would change following the mouse. However, it didn’t work because the precision of one pixel is too high to meet the if conditions all the time. So I changed the condition to a range.
- Let the objects disappear/change state.
I used the most straightforward way to let the objects disappear/change state. I hid different objects in different layers to cover each other. At some point, when the condition is met, the transparency of the upper layer turns to 0. So that the lower layer appears.
- MousePressed function.
with Ricci’s help, I set a function mousePressed(). All the conditions and actions that happen when the mouse is pressed can be gathered here.
Reflection
- Interact with mouse.
In this mini project. I used a lot of mouseX and mouseY values in the position of the objects to make them move with the mouse. In these steps, declaring a value before the draw begins is necessary. On one hand, it’s a requirement for objects to move. On the other hand, It makes the adaption convenient.
- A shortcut for producing repeatable work
During my coding, I found it fussy to write repeating patterns in random positions, which meant I had to copy the code many times and design the position artificially. In the following class, I hope I can learn how to deal with these issues.
- Reflection from Ellen
I really like the interactive element in your project especially when I am eating the sushi. I also think it was a great idea in changing my expression based on how many sushi I ate. The hearts at the end were a great touch! For my suggestion, I would maybe add some text in the beginning to tell the person interacting with your project that you are supposed to do.