Integrate Processing on the web

I worked with Dan Shiffman this past semester as an intern for Processing. My goal was to create documentation about various ways to integrate Processing on the web. I go over how to control a sketch from a webpage, how to control a webpage from a sketch, how to use audio and video with Processing.js, and how to port java libraries to javascript:

Life Patterns

Curious about my daily patterns I decided to explore the location data from my cell phone recorded over the course of a year. I set out to make a year long installation where people could see where I was in real time, as I move about my life.

I started out by creating a map with TileMill and then laser-etching it onto wood, creating a 16 square foot map of NYC:

I used openPaths on my phone to record the location data. To access that data I wrote a Ruby script that goes online and gets any new locations I’ve been too and updates a CSV file containing all my locations:

This script is run from within openFrameworks automatically, which I used for the visuals. I wanted to create something similar to a flight pattern map that airlines use. To do this I decided that if the next point was above the preceding point the path would curve upwards, and if it was below, downwards. Also, I thought the radius of the arc should be based on the distance between the current point and the destination point, so some fun trigonometry ensued:

I then used MadMapper to projection map on the wood:

Of course, can’t have the grey map image projected too, so just black for the background:

What was really interesting to me, was how beautiful the predictability of my life ended up being, drawn out like this. But perhaps I should explore all those blank areas on the map more? Let me know where you think I should go…

Here’s some video: