Category Archives: Web

Visualizing Social Data using Grasshopper and Google Earth

Below is a case study on using Grasshopper and several other plugins to generate visual representations of (social) data on a map. This method along with some additions to query and pull social data automatically and possibly the functionality of tying directly back into Google Earth to update the imagery will provide very useful to inform us of how social systems shift on local and macro levels.

From Metaball Diagrams with Google Earth and gHowl

“Google Earth presents an intuitive, dynamic platform for understanding spatial context. Combined with a parametric modeler likeGrasshopper, Google Earth presents complex datasets relative to geo-positioning in a way that is understandable. Facilitated by GH plugin gHowl, GH meshes and lines can be exported in Google Earth’s .kml format to be viewed by Google Earth or an enabled web browser.

Creating legible geometry for Google Earth is challenging, but one type of geometry I’ve experimented with is GH’s metaballs, which are about as old school as it gets for 3D curvature. Metaballs, as described by Yoda (Greg Lynn), are “defined as a single surface whose contours result from the intersection and assemblage of the multiple internal fields that define it.” (Lynn, Blobs, Journal of Philosophy and the Visual Arts 1995). This aggregation of internal fields can provide an intuitive understanding of various contextual forces relative to the spatial context of a site. While GH metaballs are only curves and not meshes / surfaces you can easily use a delaunay mesh to begin to create a mesh.

This tutorial will walk through the process of creating metaballs from Geo coordinates. I’m using a map I created with Elk that is based off of Open Street Maps info, if you’re interested in doing something similar look here.

Just click on the images below if you’d like to see them in more detail.

Start by positioning your Geo coordinates in GH space through gHowl’s Geo To XYZ module.”

Read More…

Arcade Fire – Just a Reflector: Explorations in Web 2.0

A friend of mine just shared this with me and I had to write about it. It’s an interactive music video using a handful of web 2.0 tech that lends to a really impressive interactive experience. First and foremost you’ll have to check it out for yourself at


Second, after you’ve checked the video out, here is a list of the tech they used and a short explanation of what it does.

Web Technologies

JavaScript library that uses WebGL to create fast 2D and 3D graphics

JavaScript API that allows access to the user’s GPU for image processing. Part of the HTML5 canvas element.

An open source project that makes it simple for JavaScript developers to deploy on Google App Engine. Includes a mesh network for connecting multiple devices through WebRTC and WebSockets.

web technology that allows browsers to communicate with each other, enabling near real time communication.

web technology that gives JavaScript developers access to the webcam and microphone. Using camera vision, the site can then track your phone’s position in front of the webcam.

web technology that lets developers analyze and manipulate audio files.

Device Orientation
Your phone’s orientation is tracked using accelerometer and gyroscope data, which is passed to your computer via WebSockets.

Google Technologies

Google Chrome’s advanced features, such as WebSockets, WebGL and getUserMedia(), help create an immersive, interactive experience.

App Engine
App Engine lets web developers build and deploy instantly scalable web applications on Google’s infrastructure.

Compute Engine
Compute Engine is used to run the project’s mesh network, keeping both phone and desktop browsers communicating at all times.

Cloud Storage
Video files are stored via Google’s Cloud Storage for cost effective file serving online.

Information sourced from

Facebook Mosaic 2.0: Painting with social data

Facebook Mosaic is a platform I developed to allow people to create art using their social data. My current work is highly focused around capturing and visualizing social data to provide utility to the masses. We upload an extensive amount of data to our social networking sites every day, however we, for the most part, can only view that data in the prescriptive context of our virtual social networks i.e. Facebook, Instagram, Twitter, etc. My goal is to find ways to capture this data and visualize it in ways that can actually improve our day-to-day lives.

Although Facebook mosaic may not achieve that goal, the development process was crucial to my understanding of what it takes to query various social networks and make use of the information returned. It also gave me a chance to use my creative side to develop something fun and interactive. You can use Facebook Mosaic to generate images with you social data by visiting the website.

Here is a statement I wrote for the piece:

As an Electronic Artist I am always looking for ways to re-contextualize the role technology plays in our lives. Facebook Mosaic is a program that takes three profile pictures from a user’s Facebook news feed, and blends them together dynamically using one color channel from each photo.

Many of us use Facebook daily to communicate and share with friends and family, locally, and around the world. This forum has become a global “water cooler,” with a reach not bound by time or space. As a result, we are forced to think about our interactions in an entirely different way.

Although there is a distinct level of separation between our “real” selves and our profile, Facebook provides a melting pot for our ideas and identities to blend together like a large mosaic with many facets coming together to create a dynamic collaborative whole. My goal with this piece is to frame this abstract concept in a concise, playful fashion so as to depict our social interactions as works of art.


Pedestrian is a video game I created in Processing with Carissa Simmons and Isaiah Griego. The game is meant to mimic the old 8-bit “style” visually as well as in game play; we even heisted some clouds from Super Mario Bros., an homage to Cory Arcangel. The game is Frogger-like, but with a twist, the pedestrians you are trying to avoid move faster if you “shout” at them. We tapped into the computer’s microphone to do this so if there’s no built in mic it won’t work.

The game is actually impossible to win unless you discover the “cheat” we inadvertently built in. It was a fun project and gave us a chance to explore and incorporate alternative modes of HCI (Human Computer Interaction) in the context of a video game.

You can play the game online here.


A Walk Home Orchestra

 A Walk Home OrchestraThis project is an interactive performance piece that uses four JavaScript web based instruments to recreate an aural walk home from school. The performance requires at least four people and a conductor, each at their own computer with speakers, however the piece is written for a room of at least twenty people.

The intention of the piece is to recreate a walk home and then emphasize the repetition of similar sounds heard every day in roughly the same order and time.

Listen to A Walk Home Orchestra Now!

Satellite Coffee

Satelite CoffeeThis project was a website that I created specifically to deceive. I used the real home page from our local coffee shop as a template and then with some custom web design, a well set photo, and some look-alike graphics I created a new home page that offered a free cup of coffee to anyone who brought in the digital coupon on their smart phone. I posted the deal on Facebook and even got some friends to help me publicize it without knowing it was a farce. Unfortunately, the add didn’t fool the manager at Satellite. When I went to get my free cup of coffee she told me she didn’t know what I was talking about. Guess I’ll have to get someone on the inside in on it next time.

Get your free cup Now!

One Free Cup