Drawing with Code

For our first assignment in computational media, we were tasked to draw something that spoke to us using p5.js. I have a bit of experience with Processing in the past, programming arduinos to control LED lights. However, I’ve never had to draw anything with it, so this looked like it’ll be fun.

Earlier in the week, Carter Emmart spoke to our Applications class about space. He demonstrated the Hayden Planetarium’s digital universe, illustrating the utter vastness that is space. Inspired by his talk, I sought to make a little space scene with p5.js.

The code is made up of many ellipses, for the stars, the moon, and the planet. Creating land masses proved to be a bit difficult, since I was mostly using rectangles, quadrangles, and triangles. I had to combine these shapes to draw irregular shapes for my continents. The most difficult part of this assignment was navigating the cartesian coordinates to get my shapes to align. I’m curious to know how we can group shapes (like my continents) so that we can move them all together, as I had trouble navigating the cartesian coordinates when I needed to move my continents around. I’m sure variables will help with this problem.

Lastly, with my scene mostly complete, I added a UFO to balance the drawing. Carter Emmart’s 3D Digital Universe was so incredibly massive that it seemed wrong not to include some kind of alien ship in my drawing.

The p5.js web editor made it super easy to see the results of the code. The only thing I did not enjoy about my experience with the web editor was that the image would disappear whenever I would start to add a line of code. I would have liked the image to stay so that I could reference the image when I needed to make any edits in my code. Moreover, some IDEs indicate errors in your code. The web editor doesn’t seem to have this capability yet, but that also might be a good thing as it keeps me ultra-vigilant about my code 🙂

You can check out the code here!


Although I’m unsure what exactly I will focus on in my time at ITP, I figure that computational media will play a big role in my creative endeavors. Before I came to ITP, I used Processing to program Arduinos to control LEDs for various side-projects for Burning Man. We used LEDs to decorate dance domes–programming these lights to respond to movement and music that emanated from the dome.

I was first inspired by Yayoi Kasuma of the awe-inspiring beauty of lights in her work Infinity Room.

A few months after I saw Kasuma’s work at the Broad in Los Angeles, I stumbled upon TeamLab’s work in the Pace Gallery in San Mateo, CA. Crystal Universe took lights and made them interactive and truly experiential. The viewer controlled these lights with a mobile/web application, and I was blown away by this work.

None of my projects had the sheer scale and detail that these works of art have, but I hope to continue exploring experiential LED installation art at ITP.

I also wish to dive into data visualizations, in which I’m sure that Processing and Javascript will come in handy. I had to analyze a lot of data as a marketer in the tech industry, and I got a first-hand understanding of how data runs the world. The problem with data though is that it’s needlessly esoteric. I hope to leverage my computation skills to make data more available to the public. That I don’t come from a necessarily visual background makes me nervous about this endeavor, but I came to this school with the purpose of building these visual skills and I look forward to the challenge.