Play with gravitational fields and pretty colors

No readers like this yet.
open source button on keyboard

You’re on a city block. It's windy, and a light rain is falling. People scamper to and fro, carrying armloads of chalk and tarps. Many are crouched in the street, suffering over their chalk art and cursing the rain. The street extends to the south. A dingy concrete stairwell leads down, beneath street-level.

> go down

At the bottom of the stairs is an open door leading into a dark room. The darkness seems to spill out of the doorway and pool at the bottom of the stairwell. The stairs lead up. An unlit doorway opens to the east.

> go east

You enter. With such little light, there isn't much you can make out. You hold up your hand and are barely able to discern its shape. As you withdraw your hand, what was a tiny splash of light on the far wall suddenly explodes, straining your vision with a rainbow of colors.

Welcome to DiMo

Digital Motion (DiMo) is an annual interactive art exhibit at GeekSpark, which is held during SparkCon each year in Raleigh, North Carolina.

On the surface, it's an event where you swing your arms around to interact with a huge projection screen (this year, players waved light-up batons to interact with the wall of computer-generated graphics). At a deeper level, the GeekSpark goal is to engage visitors with fun, then empower them to explore the tech behind it. To that end, all the code behind DiMo is open source.

2014 was my first year as a volunteer, and it was a tremendously educational and fun experience to work with everyone involved. Here's a brief description of the team effort that went into creating these exhibits:

Fellow Red Hat engineer Ian Hands created a light sensor system, enabling players to interact with the display by waving the batons. There were three visualizations, which were all built around the light sensor system. The display rotated from one visualization to the next every five minutes.

Jonathan Rippy created an interactive version of "Conway's Game of Life."

Wray Bowling created a fun three-player game that combines Doritos, hillbillies, geometry, and soda.

I created a particle physics sim that allowed players to interact with gravitational fields (and pretty colors).

Before going into the tech details, check out this live demo.

The demo allows you to play around with the particle sim using your mouse instead of the light-up batons. A modern web browser is needed, preferably Firefox or Chrome. Press the spacebar to switch between the players, and use the settings panel sliders to create brand new visualizations.

DiMo’s origins

Last May, Ian approached me about contributing to GeekSpark. After a bunch of breakroom conversations and figurative napkin sketches, I got to work on the particle sim while he worked on the sensor system. From outside Red Hat, Jonathan and Wray generously volunteered to contribute.

The idea: pass out glowing batons to players, which they could then wave around to interact with a cool wall display. How it worked: A computer equipped with a wide-angle webcam near the ceiling would keep tabs on the positions of each player and relayed those positions to the visualizations, which caused the player pieces to move on screen.

The three DiMo visualizations are regular webpages composed of HTML, CSS, and JavaScript. The choice to use the Web for this project was made for several reasons:

  • The low barrier to entry was a big one. With a few minutes and a little instruction, even someone without programming experience could start to make it their own. Graphics programming is uniquely rewarding among all types of programming. Often, an unanticipated quirk of an equation (or even a typo!) will result in a very cool surprise. "Just trying stuff" pays off far more than in any other branch of programming.
  • Sharing the pages after the event is as easy as clicking a link. The Web puts your pixels in front of people more easily than any other platform.
  • The Web is inherently open. Every (desktop) web browser has a ‘View source’ button, so anyone with an inclination can find the code.

Next up, DiMo 2015!

Would you like to make your own DiMo display? Get in touch! Planning for 2015's DiMo activities will be starting soon, so there's no better time to get involved than now! Being local to Raleigh is nice, but isn't at all required. Bonus points if you can make it down for SparkCon, though. Nothing beats the joy of seeing total strangers enjoying themselves with something you made.

Links and other curiosities:

User profile image.
Michael Clayton is a senior software engineer at Red Hat, and a lover of programming, science, and imagery. After work, he unwinds with creative visual programming projects.

1 Comment

Useful article. Thanks. I think that our designer have to read it for their inspiration.

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.