Author: Richmond Agyenim-Boateng

Self Portrait

Concept

In this assignment , I wanted to  create a simple cartoon-style portrait using  p5.js. I wanted to practice how basic shapes like circles, rectangles, and arcs can be layered to form a face. Instead of making it realistic, I focused on keeping it playful and expressive.

I also wanted my portrait to react to the viewer. That’s why I added interactivity with the mouse. The eyes follow the mouse pointer around the screen, and the mouth changes its size depending on how high or low the mouse is. This makes the portrait feel alive, almost as if it is looking back at you.

Code Highlight

One part of the code I am most proud of is how I handled the pupils. Normally, if you just link the pupils to mouseX and mouseY, they will move all over the canvas and leave the eyeballs. To fix this, I used the constrain() function. This keeps the pupils inside a specific range so they stay within the white part of the eyes.

// Pupils follow the mouse but stay inside the eyes
let pupilLeftX = constrain(mouseX, 140, 180);
let pupilLeftY = constrain(mouseY, 225, 255);
let pupilRightX = constrain(mouseX, 220, 260);
let pupilRightY = constrain(mouseY, 225, 255);

fill(0);
ellipse(pupilLeftX, pupilLeftY, 20, 20);
ellipse(pupilRightX, pupilRightY, 20, 20);

Here is my portrait:

Reflection

This assignment has  showed me how even the simplest shapes can be combined to make something expressive. The interactivity made it more engaging, and I enjoyed seeing how the eyes and mouth could “react” to movement.

If I had more time, I would like to:

  1. Add more details to the hair using curved lines or shapes to make it less blocky.

  2. Experiment with different facial expressions (for example, changing the mouth to a frown when the mouse is at the top of the screen, or raising the eyebrows).

  3. Change the background color based on the mouse position to give the portrait different moods.

  4. Add accessories like glasses or a hat using more shapes.In all , I enjoyed creating this portrait.