ICM Week 1: Personal Applications of Computing and Drawing in p5.js

Computation & My Interests

My academic background is in psychology and public health, and in one of my very first psychology lectures, our professor referred to computers as "dumb giants," because they had the ability to perform so many tasks and solve so many problems with incredible speed and accuracy, but they needed to be told what to do by humans. Ever since then, I've been really fascinated with how we might use technology to solve big, complex social problems--how we could create perfect instructions for our devices to execute. I worked for several years in healthcare research and saw multiple opportunities where computing could have enhanced or improved the experiences of doctors, nurses, and patients who were reliant on systems like the electronic medical record (EMR). Seeing how often the EMR complicated things for the already-overworked healthcare professionals and already-stressed patients made me want to learn how to program and create systems of my own, for the areas I'm interested in.

I have been really inspired by projects like the Slavery Footprint survey, which walks users through an interactive look at how their purchases, consumption and behaviour supports modern-day slavery and indentured servitude, and Subway Deserts, which illustrates the accessibility (or lack thereof) of public transit in New York City. I find the Slavery Footprint project particularly compelling because it personalizes the user's experience (you get to customize many aspects of the survey) and there is a really intense call to action at the end, which I think is useful in the day and age of media overload--it can be easy to become numb to all the bad things we hear about, but this one brings you back to the reality of the situation for a moment. I enjoy the Subway Desert project because I find the data visualization powerful: it creates this topography of subway-less areas in New York that are easy to see and immediately understand. 

This term, I'm looking forward to building some interactive data visualization projects of my own. I hope to focus on social justice issues, particularly social determinants of health and education in the USA, as these are two topics I really care about. 

Creating a screen portrait in p5.js

For my first drawing in p5.js, I chose to make a self-portrait. I was partially inspired by the DuoLingo avatars, which are comprised mainly of primitive shapes, and still manage to be incredibly expressive. 

I first built it with primitive shapes in Adobe Illustrator, so I would know the dimensions of the shapes I wanted to use. I didn't take a screenshot of this (note for next time: document literally everything!) Using this as a guide, I got to work in the p5.js web editor.


My finished portrait (code here).

My inspiration (Source: Pinterest)

I made heavy use of the p5.js reference and the Coding Train videos when creating my drawing. The most helpful functions were the noStroke(), which helped create more of a sense of continuity between the shapes, especially hair, and ellipseMode(CENTER), which helped me when trying to figure out the Cartesian positioning of the shapes. I mainly used trial and error to correctly position the shapes on the canvas. Using the automatic refresh option was really helpful for getting immediate feedback to see how changing the arguments changed the results. I had fun fiddling around with the opacity feature of the fill() function, which made the nose of my portrait stand out a little less. 

I also used this color picker to help translate the colors I wanted from Hex into RGB values.

I'd be interested to know, for next time, if it's possible to create more irregular shapes, e.g. an ellipse that tapers towards the bottom to make a less round-ish face, if I could create crescents instead of half-circles with the arc() function. I would also like to know a better way to plot out where my shapes are going to appear, instead of figuring it out via trial-and-error. 

ICM, ITPCaroline Neel