The Art of Data Visualization: WebGL and Three.js Q&A with Michael Chang
Maps are not only visual, but also spatiotemporal objects. They communicate across past, present, and future societies and move between local and global geographies. For the past three years, my research of maps has enriched my perception that maps serve as artistic representations of bodies as well as historical movements of bodies and knowledge.
Data mapping also conveys differentiated movements of objects and knowledge. However, unlike maps of the past, data mapping’s capacity to make sensible and legible its precisely measured content extends directly to the end user. Maps have the potential to reveal global patterns and trends through representations of exceedingly more intricate and complex sets of data. As humans continue to develop more elaborate systems of knowledge, so too do civilizations require more nuanced means of artistic representation in order to communicate their historical data. In particular, the current trend toward web-based 3-dimensional rendering libraries like Three.js springs to mind with shining prominence.
This interview provides a background for those interested in joining us for Michael Chang’s upcoming Three.js class and the parallel Three.jsfest Meetup. Michael’s accomplished work as Creative Technologist on the Data Arts Team at Google emanates from his recently completed Global Arms Trade Visualization project. This work quantifies national imports and exports of arms and ammunition across the world and allows users to explore how small arms trading relates to conflicts worldwide. In this dialogue, Michael expands on his use of the Three.js library to handle OpenGL and elaborates on the inspiration behind his practice of mixing martial arts with creative coding in an ever widening optical and tactile framework.
Michael will be teaching Introduction to WebGL with Three.js at GAFFTA in the coming weeks. We are excited to have him demonstrate his craft of making the Three.js library and its rendering features accessible to students and coders of all levels. Be sure to Register if you haven’t already!
GAFFTA will also be hosting a gathering of the WebGL Developers: Three.jsfest on Wednesday, September 12, which will focus specifically on emerging project presentations that explore Three.js and WebGL. The Meetup is free, but be sure to Register before it fills up!
How do OpenGL and Three.js enhance our ability to create systems that are visually interesting and informative?
Michael: OpenGL has been around and people have been making really cool things with it for a while now (games, demos, data viz). However most of the time developers like myself never use OpenGL directly, we like having libraries that wrap GL and make things easier, for example having a scene graph is really powerful for doing hierarchical scenes. Three.js is one such library, and now we can do all those things that we used to do offline, but in a browser, available for anyone to see it without downloading anything.
What do you hope students get out of the course when working on their own practices?
Michael: I hope that no matter what skill level they come with, they leave with a better ability to think visually with code. Three.js and WebGL are just tools, but the ideas presented should be transferable across many disciplines.
What is the most exciting project you have done using Three.js/WebGL? Which project is your favorite?
Michael: I recently wrapped up a data visualization on global arms trade, of whose development process I have written about here. It was recently featured on Huffington Post and FastCompany.
I’m really happy with the way this turned out, it was a very straightforward data viz, with legit and relevant data, and I ended up getting a lot of freedom to do what I wanted with the visuals.
Interactive Globe: Small Arms Imports & Exports, an HTML5 Chrome Experiment, Google Chrome Required
I am impressed by your work on the Small Arms & Ammunition Data Visualization project. What are the local and global implications of the need for a wider optic representing armed violence?
Michael: There are a few dimensions this topic can go down. On one hand, data visualization is not new, however putting some fresh candy on the top gets more people talking about it, more eyes looking at it. The hope is that it demands more attention, because of the way it is presented, and so people can draw their own conclusions and investigate the data themselves. The visualization should not be the stopping point or the end goal.
Google Ideas INFO Summit – Disrupting Illicit Arms with Moderator Robert Muggah
I’m no expert on the implications of the data, so I find myself working with experts on the topic such as Robert Muggah, and having him explain to me what it is that I’m looking at ended up being vital to getting the work accurate and honest.
How do WebGL and THREE.js compare to earlier coding tools? How do newer tools allow you to communicate higher volumes of data while creating more legible ways to read, visualize, and decode it?
Michael: Three.js is really good at displaying large quantities of things, or static things of high complexity. Shaders can get you even further, but a lot of this comes down to how you use it. Compared to Processing for example, it is more linear and constrained in terms of drawing things directly, but you get the raw speed and power of OpenGL when working with Three.js.
How have communities of creative coders and data artists helped you to build and develop content for your projects?
Michael: I sit next to Ryan Alexander all the time, and he gives me a lot of technical advice on what I’m trying to achieve. I also work with a bunch of really talented creative coders at Google who all give valuable input. It’s very important to constantly show the work to them since, like any software, it requires lots of testing.
How do your passions for martial arts and creative coding merge to inform the unique movements and abilities of your game characters?
Michael: So on my off time I work on Blade Symphony, an up and coming indie game that I started back in 2009. I also worked with Neal Stephenson on Clang which had me to take sword fighting lessons every weekend. Both projects have different requirements, the former being more stylized and we can just animate anything we can dream up, allowing for more stylized combat. The latter requires knowledge of several hundred year old European martial arts stances. I studied A Swordsman’s Companion to get a good grasp on how the game was to be designed around these fighting systems.
Why do you prefer the more cinematic, third person perspective rather than the standard first person shooter?
Michael: Games are still pretty limited in terms of what you can do with melee fighting. Being aware of what your avatar’s body is doing is not translated so well in a first person POV, so that is definitely the biggest drawback. Is your opponent to the left of you? Where is that in relation to your sword and where you’re standing? Can you swing quickly enough to catch them off guard? These things are better shown in comparison to your own avatar and your opponents’, when you can see them both at the same time.
What are some new projects that you are currently working on?
Michael: I’m currently working on a procedural mech generator. It’s not ready yet.
Since OpenGL’s initial release in 1992, what do you anticipate in the future of creative coding tools like WebGL and Three.js?
There’s a lot of interesting developments with live coding and live editing. See Khan Academy’s new coding lessons that utilize Processing.js and John Resig’s own brand of tools. I think tools like this benefit not only beginners, but creative coding overall.
[person name=”Michael Chang” title=”Instructor” url=”http://www.ghost-hack.com/” thumb_url=”https://grayarea.org//wp/wp-uploads/2012/07/michaelchang-300×300.png”] Michael Chang is a Creative Technologist at the Data Arts Team at Google, and the lead designer and programmer for independent video game Blade Symphony. He’s responsible for creating data visualizations at Google as well as procedurally animated brand and ad elements at Google. He is a graduate of UCLA Design Media Arts program and a martial arts film aficionado.
[/person]
