Random Face Generator — Jovana Gavrilovic

Creative Coding, 2024
p5js

My design process came to me immediately: I wanted my face to be the shape of a heart, with eyelashes and full lips. Part of the reason I wanted my sketch to be a heart is because it actually takes a lot of detail to get a heart correctly in p5: using 2D primitives, combine two circles with an upside down triangle. The challenge here is to make sure the corners of the bottom of the upside down triangle aren't jutting out of the shape. To smooth the heart shape, I used arc to soften those triangle edges. It isn't perfect, but I am proud of the heart that I ultimately created.

In terms of altering the face itself, I wanted to play with the emotionality of the heart and what it represents. Almost like a beating heart, I wanted the eyes to bulge and the lips to expand and contract ( like a kissy face!) with the mouseX/mouseY function. I could have chosen to make the entire eye change in shape, not simply the pupils, but decided that only altering the pupils sat well with this theme of the heart: when we see something we find attractive our pupils dilate.

I consider this final product to be a type of metaphor for the human heart, in terms of emotions. Even changing the color of the heart represents emotionality and feeling. How does the changing color from the original rosey pink make you think of different emotions as you click through? While I thought about having the heart itself expand and contract with the cursor, to simulate a kind of "beating heart" motion, I think the other elements of cursor movement achieve this sufficiently, and I actually like this simpler design, as an alternative form of a heartbeat.

What I discovered about the form I chose through this assignment is that you can combine shapes to create one fluid object. For instance, with my mousePressed function, I was successfully able to have the heart seemlessly change color when clicked, despite the various strokes, arcs, and shapes involved in getting the heart just right. I was worried that only one circle would alter color, or that the triangle wouldn't change along with the circles' color changes. This really showed to me the opportunity to turn something simple (a circle and a triangle) into something more complex (a heart). The additive abilities of p5 make me really excited for what's to come, and the possibilities that coding in this editor offer.