Author: Sihyun Kim

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.