One trivia about me is that I really love hiking, but I’m not very good at it. For most of my life, I’ve lived in a mountainous area in the Philippines, providing me with ample opportunities to go hiking. While I love the activity, I easily get tired and take hours to reach the top of a mountain. I thought it would be nice to create a self-portrait about my hiking experiences. Inspired by Pauline Wee’s Koala portrait from the examples provided, I decided to add some interactive elements when the mouse is pressed.
The concept is ‘Me Before and After Hiking.’ I have created changes in facial expression and background color that occur when the mouse is pressed. Specifically, when the mouse is not pressed, you can see me with a happy face with blushes, indicating excitement before hiking. And, when the mouse is pressed, you can see me sweating with an exhausted face and a change of background color to indicate the exhaustion after hiking and the passage of time.
The section of code that I am particularly proud of is presented below. I was particularly proud of this section of code made for the change of facial expression when the mouse is pressed because I felt like I did a great job in making my code concise. Originally, I had multiple if-statements for each of the changes. However, I realized that I could just combine all these if-statements into one! It was quite challenging to combine the if-statements because I had to consider all the orders of the shapes to make a great-looking self-portrait.
// change of facial expression when mouse is pressed
if (mouseIsPressed) {
//left eye
line(146, 193, 168, 203);
line(146, 209, 166, 203);
//right eye
line(256, 193, 233, 203);
line(256, 209, 233, 203);
// mouth
fill("red");
arc(faceX, faceY + 73, 40, 40, PI, 0);
line(faceX - 20, faceY + 73, faceX + 20, faceY + 73);
// sweat drops
sweatdrops(0);
sweatdrops(30);
sweatdrops(60);
}
//when mouse is not pressed
else {
//eyes
fill(0);
ellipse(160, 200, 15, 18); //left eye
ellipse(242, 200, 15, 18); //right eye
// eyelashes
line(146, 193, 154, 197); //left eyelash
line(256, 193, 250, 197); //right eyelash
// mouth
fill("red");
arc(faceX, faceY + 53, 40, 40, 0, PI);
line(faceX - 20, faceY + 53, faceX + 20, faceY + 53);
// blush
stroke("#FE847E");
fill("#FE847E");
ellipse(faceX - 60, 245, 20, 15);
ellipse(faceX + 60, 245, 20, 15);
}
Overall, I am very satisfied with the outcome of this assignment, although it may not be perfect. I find my self-portrait quite cute. This was my first time working with P5.js, and I found it very fun. Actually, I found this experience to be similar to my experiences with Python and Processing. For improvements, I think adding animations like pouring rain or dripping sweat to my self-portrait would have made it more interesting. Also, it would have been more engaging to add additional interactions, like the body moving in response to cursor position.