Self-portrait
Assignment
The first assignment in our Creative Coding course is to create a self-portrait using p5.js.
Research
At the beginning of the project I wasn’t really sure which direction to go creatively, so I stalled by reading the documentation. After digging into the constraints of the library, I found it to be surprisingly powerful with a rich plugin ecosystem. I saw that there was features for typography and animation, and knew right away I’d want to play with both.
At some point during this research, I was trying to determine which aspect of myself to portray in the self-portrait. A piece of The Walt Whitman poem Song of Myself came to mind:
Do I contradict myself?
Very well then I contradict myself,
(I am large, I contain multitudes.)
To me, this poem represents our own individual complexity and potential to change. I thought it would be interesting to represent these multitudes programatically. Each row of text in the background parading back and forth represents individuals carrying about their own unique both. The recursive-ish faces also suggest the inner-selves that lies beneath the way we present ourselves at a given time.
The Work
The first step was familiarizing and experimenting with the p5 lifecycle. The ones that seemed most helpful at the moment were preload to load fonts and other assets, setup to draw the beginning state and set globals, draw which functions a lot like main.
The draw function runs continuously, resetting any transforms you make during the previous iteration. To get around this, and track transforms over time, you can use globals or create classes to represent objects with multiple instances. I created a class for the faces and the rows of text individually, since each instance would have it’s own behavior.
The p5 library has some really neat helper functions for common animation applications. One interesting helper is the map function, which takes a value and maps it from one range of numbers to another. In this way, you could take a Face for example, and map index/position in the array (say 0-20) to a much larger pixel value (200px-900px). It also makes it trivial to reverse these relationships.
Swapping between different colors/thickness of stroke became a little tedious, for the next project, utilizing pop and push to invoke previous settings could be helpful.
Takeaways
At first I was a bit concerned about take this project too far. It is, after all, an introductory pre-class assignment. On the other hand, once I had an idea that I was pursuing, it found myself getting lost in the process. By researching constraints, I was able to stay productive while giving myself space and time to come up with a novel idea that excites me.