Amatorski, one of Belgiums finest bands, has been fascinated by the way the internet is deleting borders. They collaborated with us to create an art project bringing together music and visuals, in a mix of online and offline interaction.

The online part consists of a music sequencer that allows anyone to make their own track, using their own images for the visual and share their creation with the world.

The content that is created online by people all over the world then makes the jump to the real world and is driving the live visuals for the concerts in Antwerp and Amsterdam.

Working with Amatorski
We want to be inspired by the artists we work with. So we started off by spending a week at Amatorski's studio in Ghent. We worked on ideas while they were working on new tracks. It's great to break out from our own office and you can have a chat about the project whenever something comes up.

Music machines on the web
A lot of sequencers have been build in the golden years of Flash and it has been done a few times in HTML5 as well. In Flash it's easy, you have a reliable clock to keep all assets in sync. There's no such thing in HTML5, all sequencers are using the setInterval() method which is not really accurate.
What we had in mind had to be in sync with a background track so we were facing a serious challenge that would make the difference between a nice try and a surprising experience.

steadyBeat.js
We couldn't find an HTML5 metronome on the web so we did what we had to do, rolled up our sleeves and made our own..
It's a very precise timer that relies on the browser time() clock to keep up with the pace. Even when the browser has a hickup it automatically lands back on it feets and guarantees a synchronous experience.
Source code: https://github.com/recyclerobot/steadyBeat.js
Demo: http://recyclerobot.github.com/steadyBeat.js

HTML5 Audioplayback
The audio API's are still in their infancy and inconsistencies across browsers make it a pain in the a*s to work with. We used Howler.js to take care of most of them, thank god for that one.

Delaunay Visual
Most people in creative coding come across Delaunay triangulation at one time or another. For good reasons, the math behind it translates well in a coding environment and it (mostly) looks good because it tends to avoid skinny triangles. We made a <canvas> implementation for fun and tried to give the technique a twist. While experimenting Thijs came up with the idea to subdivide the triangles resulting in the visual language that defines the project.

Learn along the way
We devised the instructions as a real person who is standing next to you to explain what to do next. There are no next or previous buttons or timers because the system checks if you do it right to move to the next step. This allows everyone to explore at their own pace.
We believe steps like these are a much better solution than a static manual at the start of an interactive project. You should be able to dive right in and learn along the way.

The order of menu-items is the same as the instructions and the icons provide a mental link back tot the instructions.

Custom Background
Facebook isn't the most reliable friend to build stuff on but it's where most people have some pictures ready so we went ahead with it.
Below are some of the artworks that have been shared by users.







Browser support
The project was build in Chrome and extensively tested in Firefox and Safari. During develoment we didn't bother with Internet Explorer but to our suprise IE9 worked just fine after some very small adjustments. Users who have a browser without \ support are kindly asked to use a modern browser. The website works perfectly on iPhone but of course the hitareas are a little bit small.

Server Performance
The website is hosted on it's own VPS instance so we can scale quickly if the need arises. The server runs a deadly cocktail of nginx and node.js so we can take some heat :)

Avoiding firewalls
Using a custom node.js on a selected port is easy but because a lot of people these days are sitting behind a firewall we had the do some nginx configuration to tunnel every call trough an upstream proxy to be able to circumvent the blocked calls to a tropical portnumber on our server. Having to deal with tons of data we use some SSH tunnels to divide the data on multiple servers and just keep an index card of every point stored. This kind of power is just one of the many advantages we have building projects on our own servers.

More details to come..