Self-Portrait: Me Meme

My idea was creating a portrait of myself with some simple and fun interaction. After looking online, I saw that eye movement is quite common and flexible. I was thinking about which type of movement I should implement when I remember a meme that is quite popular on the internet:

The awkward monkey meme

I decided to use interaction in p5js to depict the eye movement. When the cursor is far away from the face, the eyes will be looking towards the left, when the cursor is near, the eyes will look away (like when you just did something wrong and someone look at you).

To implement this in programming, I calculate the distance between the cursor and the center of the face. If the distance is smaller than the radius, the eyes movement is triggered.

if (distance < 90){
  eyePositionLeft = 230;
  eyePositionRight = 280;
} else{
  eyePositionLeft = 210;
  eyePositionRight = 262;
}

For the rest of the portrait, I use circle, ellipse, line and rect to draw a simplified version of myself. Here is the final version:

Reflection

Because I am used to using graphic software with a wide range of shapes and tools, drawing with p5.js initially felt limiting. However, I rather enjoy the challenge of using only a limited number of shapes and seeing what I can create with them. I also enjoy planning the interactivity I could incorporate, which is a different experience compared to drawing with graphic software.