p5.js Drawing

Published September 11, 2017

Computation as a tool is most exciting to me in its ability to facilitate real-world experiences – to build some level of intelligence or reactivity into passive objects.  By adding a layer of software between cameras, microphones, and other sensors, and lights, motors, and speakers, we can imbue these unthinking inputs and outputs with the ability to understand and react to their surroundings.  This can feel very close to magic!

One project that excites me is this Arduino-based motor controller for a telescope mount.  It allows a telescope to be positioned through a computer for star tracking and astro-photography.  The concept isn’t terribly complex, and all of the math relating to converting celestial coordinates into Earth based coordinates has long since been figured out, but the project’s (apparently) comprehensive and elegant execution allows an amateur astronomer to capture incredible images of deep space objects.

Another computing project which allows amateurs to use simple and cheap hardware to explore a previously hidden part of their world is Software Defined Radio.  This uses a simple radio receiver with an analog-digital converter and open source software to allow amateurs access to broad swathes of the radio spectrum.  I have been able to listen to Radio Cuba on shortwave as well as my local ham enthusiasts with about $25 dollars worth of equipment.

I would like to use computation to build real-world experiences which give previously passive objects some level of intelligence and understanding.


Above is my first drawing made in the p5.js javascript library.  It is composed entirely of 2D shapes (triangles, ellipses, and curved lines) with some adjustments in the stroke weight and color throughout.  The most challenging part was trying to remember which coordinate I was defining in which parameter of the various functions.  In the curves especially (in which you define 4 coordinates for a total of 8 parameters) it would have been helpful to have the parameter names x1,y1, etc. auto-populate after entering the function.  Another fun feature for the editor would be the ability to click on the preview section and have the x,y coordinates of your mouse click appear onscreen.