Author: Shota Matsumoto

Fullscreen sketch

Main Concept / Background:

My original concept was to draw the most beautiful self-portrait that I’ve ever made in my life, because, honestly, I’ve only drawn the worst self-portraits ever my friends used to make fun of. So, I wanted to capture every tiny detail of my face as accurately as possible. This was my first plan. But, once I looked at my passport picture, I realized that it was not going to happen due to the complicated structure of my hairstyle. 

What I struggled with and How I overcame it:

During the ideation phase, I came up with the idea of trying to use as many different shapes as possible for my hairstyle to make it as realistic as possible. For example, I realized that the sides of my hair can be represented by two ovals tilted at 30 degrees to make fluffiness. The top of my hair can be imitated by a trapezoid, and the bottom sides can be represented by two opposite triangles. I also added the feature where users can move the top of my hair up and down because I wanted to incorporate a funny interactive element. At the same time, I embedded my personal wish that I don’t go bald in the future. You can make me bald by moving your cursor downward from the middle of the self-portrait! This is my self-portrait: 

I drew a Japanese flag and cherry blossom at each corner to represent Japan. It was really hard to locate each petal at the correct transformation (position and rotation). I first used for loops but they did not work in a way I wanted, so I calculated each position and rotation one by one.

My Favorite Code:

The part of the code that I particularly like is the sides of my hair composed of two ovals. I struggled to position and rotate them in a way that matched the structure of my face. After about  half an hour of searching methods online, I found three functions that were really useful for controlling transformations of those geometries. These functions are push(), pop(), and translate(). The translate() function allows you to reset the origin, while push and pop() allow you to apply changes only to specific objects you want. 

//sides of hair 
  fill(0); 
  stroke(0); 
  push(); 
  translate(x1, y1);
  rotate(10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();   
  
  push(); 
  translate(x2, y2);
  rotate(-10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();

 

Reflections & Future Improvements:

Since it was my first time using p5, it took some time for me to get used to some functions. But, after using the same geometry functions multiple times and exploring new functions that I’ve never seen before, I was able to build a solid foundation in how p5 works. Although I believe I could have made a better self-portrait, considering the fact that I am bad at drawing, I think I did relatively well this time!

In terms of future improvements, I think I should use for loops for the cherry blossom part to make the codes more readable and reduce repetition. I tried to auto-generate all five ellipses simultaneously, but due to strange positions and rotations, I was not able to achieve it, even  after I tried multiple times. Also, all the objects are not fully centered, so the shapes are slightly misaligned. Next time I create my self-portrait again, I want to reduce the number of values I use for positions of each shape and use more variables instead to centralize each shape and improve the readability of my code.