Assignment: draw something using p5.js

Intro to Computational Media

Because I am a masochist, I attempted a self-portrait using p5.js. I decided to make my canvas 500 x 500. I started with an oval at the center, and made a little reference drawing to remind myself where the vertices of the ellipse occur, given a width of 300 and a length of 400. This reference image was ultimately of little use, because I grew impatient and just trial-and-errored the shit out of every object. Here is the concept image and oval:

concept-face     reference-oval

Fast-forward an hour or so, things are going swimmingly:

Then I made the critical error of thinking fill() would be chill guy. Like, “Have you met fill()? Everybody loves fill()!” Turns out, fill() is a pain in the ass:

As you can see above, in the 21st command I tried to fill in that last ellipse to create a more legitimate nostril. BLACKOUT. I spent a long time trying to fix this, to no avail. Okay fine javascript, I’m just gonna accept that you have a grudge against nostrils and move on.

As pictured below, I had a similar issue with the stroke() command. When I tried to make my hair swooshes purple, my whole face became purple. whyjavascriptwhyyyy:

Here is my final drawing, side-by-side with the original concept image:

face-alone  concept-face

It was really frustrating to spend ages trying to de-bug and getting nowhere, but overall I enjoyed the assignment. My secondary headache was arc() going clockwise, when it really should go counter-clockwise (starting in Quadrant I). That’s just common sense!

Leave a Reply

Your email address will not be published. Required fields are marked *