ITP Blog

ICM - Week 1: Basic of Drawing

TITLE:  Portrait

DATE:  September 2016

INSTRUCTORS:  Daniel Shiffman


TOOLKITS:  JavaScript + P5.js + Sketch


Before I came to ITP, I was an online game designer and tired of getting money out of players’ pocket. Other than games, the other interest area I care about is health and happy living, which seems quite a potential field for computation to cultivate.

At first, I thought entertainments like games, which could also be considered as computation, would lead a happy life. It turned out to be more like time wasting. I got temporary escape from boring daily life and that’s all.

I felt empty and disappointed until I saw an art piece in an unknown museum. It was a chair with the breath sensors. When a tourist sat on it, it caught his breath and showed interactive graphics of Chinese font writing. When he felt sad and had abnormal heart beats, the font was handwriting with a crazy style. It would be neat and beautiful if you have strong heartbeats and happy emotion. That is my Aha moment. Computation here together with physical devices create an experience that is not only interesting as entertainment but also enlighten one’s life and wisdom. I can image those who have tried this art installation will end up a good living style to keep their hearts healthy.

My sketch is a portrait of me with the full moon. Because today is one the of the most important festival in China called Mid-Autumn Festival, in which families will get together to celebrate the reunion of a big family and the farming harvest. The full moon stands for family’s reunion.



My idea came from @Louie Mantia, and I created a rebound of his work in Sketch 3.

In fact, I planned to draw a pixel portrait of our instructor Shiffman at first. However, I accidently put the first two rectangles in the wrong positions and they looked like my man bun…You know what happened next.




It wasn’t easy to find the right position of shapes. I tried a lot of graphic design tools and Sketch 3 turned out to be the most convenient which had the same methods and arguments to define shapes as P5.js. Also, p5.js and Sketch 3 had the same logic of layers.It was addictive, like a new version of Minecraft but more powerful and customized. And the designer’s instinct, if I had, made the background black.


The Final Work

Here is the Original Code.