Remix The Frenzied Interactive Video for ingMob's 'i/o'

New media artist Chris Shier is the digital alchemist behind some of internet's most mind-bending cyber art. His work was recently exhibited at The Wrong Biennale, and featured on [KENZO's Secret Room](http:// https://www.kenzo.com/en/blog/tete-tete-chris-shier_7726/). Shier also designed the drifting day-glo animations for MGMT's website. Now, in a collaboration with electronic music producer ingMob, Shier ups the ante with a mesmerizingly beautiful interactive visualization for the single “i/o”.

Finding early inspiration in animated GIFs as part of the dump.fm community, the Vancouver-based Shier eventually moved on to canvas animations when, as he puts it, he couldn't force the form to go any slower. Earlier this year, Shier found viral success with gifmelter paintings, which blended animated GIFs with a bleeding paint feedback effect.

For the collaboration with ingMob (a.k.a., Raymond Weitekamp), Shier wanted to create both a “passive” music video and interactive visualization experience. While trippy patterns abound, variously floating on screen in gauzy slow-motion or frenzied kaleidoscopes, users can introduce glitches and other beautiful psychedelic-soaked errors into the experience—all of it synced to inMob's equally prismatic electronic track “i/o.”

Yesterday, Shier and Weitekamp fielded some questions via email about the interactive visualization. Aside from discussing the concept behind the project, the two talked influences, and let us in on a little easter egg that the curious can exploit for bonus fun.

The Creators Project: What was the idea behind the interactive visualization?

Raymond Weitecamp: I approached Chris about collaborating on this project after being blown away by his online portfolio. I had originally planned to code an interactive site for “i/o” myself, but Chris's work was so perfectly aligned with my vision for the project that I decided to approach him about it. Our overarching concept for the piece was “i/o”—specifically, to emphasize user interaction, as well as stark contrast between the different sections of the song. We started by outlining themes for four distinct song sections, and Chris used those ideas to code the visuals. I'm really proud of the final product. Chris absolutely nailed it.

Chris Shier: I've wanted to work directly with a piece of music for a while now, since I've been seeing people create their own music videos by screen-capturing their playing with my works. The opportunity presented an interesting challenge—as I usually only incorporate one effect into my own pieces—to create something that responds to the tone and movements of his song “i/o.” The other new thing for me was working within a fixed duration, instead of an endless sandbox environment, so it could develop and build but with an end in sight.

It's psychedelic and almost dreamy, but then when a user interacts, it becomes glitchy. Is there a concept behind that dichotomy?

Weitekamp: “i/o” is ultimately about interfaces. It's an exploration of the / that both connects and divides.

Shier: I wanted to make the piece function both as a passive video, and as an interactive plaything. To that end, the piece should respond to the amount of energy and action the user puts in. If they want to relax and absorb it, they can, but if they want to play along and add their mark to it, they should be able to participate. I think people enjoy adding chaos to things, so they can mess up what I've made as much as they like.

How are the visuals synced to the song?

Weitekamp: The visuals are synchronized to the song on a number of levels. There are four unique visualizations for the separate sections of the song, each with different user interactions. Additionally, there are animated events within the visualizations that are synchronized to rhythmic elements of the song. Chris intentionally tied much of the motion to the user's mouse movements and clicks to encourage people to dance along with their mouse. (Easter Egg: You can remix the visuals by scrubbing through the track with the playback controls in the top right.)

Shier: They're synced as well as I could, based on some pretty rough math. It shifts along with the major verses of the song, and fire brushes along with audio elements. I didn't want to make just another Winamp visualizer (as much as I do love them), so it required a more timeline-based approach than an audio analysis approach.

What software and other tools did you use?

Shier: A text editor, Sublime Text, and a browser (Chrome). It's written in CoffeeScript-flavored JavaScript, and relies on the HTML5 element, API. I used Audacity to figure out the timing on the audio elements.

Were you inspired by any other online interactive visualizations?

Shier: I really liked Vince McKelvie and YE/\RS' “Gradient Forest” interactive piece, and the music videos of Sabrina Ratté and Sara Ludy. For online works, the people who make tools like YooouuuTuuube by David Kraftsow, Kim Asendorf's Wendypaint, Tim Baker's image layering, or guys like Mr. Doob and Steve Wittens, who make what I do look like scratching in the dirt.