Audio ShaderToy

Early March was a good time to be a creative coder in San Francisco. Organised by the Gray Area Foundation For The Arts (GAFFTA) and The Creators Project, ArtHack Weekend SF was a hackathon dedicated to creating HTML5 and WebGL toys and demos with an artistic bent.

Over two pizza-and-beer-fuelled days, coders created a variety of demos and interactive installation art. Unfortunately, most of the finished works can’t be viewed online, but the two jury-selected winners are available. In addition to the kudos of winning, these projects were also featured in The Creators Project: San Francisco which took place March 17-18th alongside new interactive art pieces from Chris Milk (of The Wilderness Downtown fame) and Casey Reas (co-creator of Processing).


SoundQuake is a visualisation and audio representation of San Francisco earthquake data since 1973 (using banjoes). The tool uses three.js to create a 30×30 voxel representation of the Bay Area then ‘plays through’ seismic records along a timeline with each earthquake sending ripples through the land accompanied by a lonely banjo chord. The authors’ intention was to create a “meditative experience that is simultaneously literal and abstract” and they’ve succeeded. If you leave it on the default settings, you do find yourself strangely anticipating the late-1980s where there’s a swell of activity turning the calm landscape into a storm-whipped sea and making the banjo play dischordant bluegrass.

The source is available from GitHub but can be prone to throwing exceptions and breaking, unfortunately.

Audio ShaderToy

The Audio ShaderToy is a combination of the Web Audio API and WebGL into a tool to enable visualisations of audio files dragged into the browser. It’s kind of like the GLSL Sandbox for audio. When I say “It’s kind of like”, I mean “It’s exactly like” although, in addition to using elapsed time and mouse position to vary the output, it also exposes the current frequencies of the audio track and allows you to set the number of bands in the analysis.

In much the same way that the GLSL Sandbox can be a time sink, there is something wonderfully hypnotic about hacking away at some floating-point calculations while patterns shift in the background in time with the data you’re working with. Given the right backing track, one could easily surface from the keyboard head swimming after several hours of mixing music, colours, equations and algorithms. Personally, I had They Might Be Giants on repeat. Each to their own…

SoundQuake by bowman224
Audio ShaderToy by notlion
Other demos created during ArtHackSF