Juanma’s Self Portrait (Assignment 1)

When tasked about developing a self portrait through basic shapes  in .p5js, I was a bit confused as to how to start. I first spent a long time playing arround with shapes to choose a body figure fitting to my vision. However, this body was not a self portrait in any way. It was not me. So, I asked my suit mates which physical elements characterize me. To this, I was told my glasses, my curly hair, my bee necklace and my white T-shirts mark my style. So I decided to focus on these elements as I built an image of myself. Here are some of them: (My hair and clothes you’ll see in class)






I designed my portrait from top down using the following elements:

  1. Hair: My hair was composed of a multitude of circles with “noStroke();” that would illustrate my curly hair. I made three different hair colors to give this element depth and importance in the image.
  2. Face: My face was composed of ellipses for the shape, eyes, and ears; and arcs for the nose, eyebrows and the smile.
  3. Neck: My neck was built with rectangles and an ellipsis.
  4. Body: The body is made with rectangles and lines for the holes between the arms and the core.
  5. Glasses: My glasses are composed of two circles, an arc and to lines.
  6. Necklace: Two lines and two ellipses.

The greatest challenge in designing the portrait was making sure that the elements I included made sense. Sometimes a specific color or shape that I thought would fit in a specific place, looks horrible. In these situations, playing with individual values was the only way I knew how to fix this, and thus was very time consuming.

I also learned the importance of shadows, as adding them had a significant impact on the final product and took much less time than I initially expected.

Furthermore, in an attempt to include an interactive element, I added mouseX and mouseY qualities to the variable defining the color of my glasses so that the user could change it according to their preference.

Here’s my portrait:

Some elements to improve is that I hard coded my body, so if the dimensions of the canvas are changed, my head will adapt accordingly but my body will not. I would have also liked to include a background and more interactive portrait. Regardless, with this exercise being my first experience with .p5js and processing I am very happy with the final result.

So, which color of glasses do you think better fit me?

Leave a Reply