ICM - p5 Self Portrait

For our first assignment in Intro to Computational Media (ICM), we were assigned to make a self portrait using the p5.js editor.

My self portrait’s code.

Immediately after the class I started to create the self portrait. I mistakenly did not follow the rules of the homework, which was to watch Daniel Shiffman’s Coding Train 1-7. Instead I just kept on going with working on my self portrait, by means of trial and error and going back to the p5 reference.


I decided the way I wanted to portray myself was with only my face. The first base for a self portrait began as a cube, with two smaller cubes for my glasses. I then added eyes inside the glasses to make it a little clearer for myself as a base to start with.

As I built this, I kept on thinking about Picasso and cubism. I thought of ways I could interpret the different levels and features of my face with geometric shapes in a more abstract direction than I was already going down.


The next goal I had was to create the effect of a mouth, teeth, and jaw with as few shapes as possible. I decided to use two quads, one on top of the other to form the teeth below and the jaw on the layer above it.

My main issue with this portion was having the angle of teeth look normal underneath the jaw. This required lot of playing with different coordinates for the 3+4 corners.

Working with different ways of portraying my face, I played with sizing my glasses differently.

I moved on to my nose next, and thought of how I could play with it’s presentation. I went through each of the different shapes in the reference and came across bezier(). I’m still not totally sure how exactly each of the coordinates work with regards to how I got my line to curve the way that it did.

gilad in p5. 2018.

gilad in p5. 2018.

My largest regret with making this piece is not knowing about push() + pop() before starting the portrait. I was doing the math for the entire thing for each of the coordinates relative to their space in the canvas ex. Instead of starting the main quad for the head at (0,0) it starts at (50,50).

I will absolutely watch The Coding Train videos before each next assignment.