Thought you’d seen it all, huh?

Join Scumbag Brian, The Wizard and Smooch in celebration of the fact that as long as we have the Internet we’ll have nonsense to amuse us!

Place, scale & depth-sort any combo of 17 familiar characters then sit back and relax while they Twist the night away. “No Shorts” + “We Got You” is particularly entertaining

GIF DANCE PARTY by Fuzzy Wobble

Rocking Dendrites is another beautiful WebGL experimentation from Jaume Sánchez Elias at clicktorelease.com. Drop an mp3 onto the page or let the provided music play as beautiful dendrite objects are formed, swirling around the misty display and pulsating in time to the beats of the music. An extensive control panel allows you to tweak the dendrite shapes – from adding arms to picking from 5 different render effects such as metallic, cloudy and fuzzy.

three.js provides the WebGL mojo as usual but is supported by dat-gui, a compact GUI library for tweaking values in real time, used to create the modification panel. And dancer.js, a powerful audio API dedicated to creating great visualisations, of which this certainly is one. Be sure to drop a fast and furious tune onto the page to see just how wild it can get. And in case you were wondering what a dendrite is; they’re the projection of electrically stimulated neurons.

So find some music and play with the dendrites for yourself.

Spectrascade is an interactive, tunable WebGL music visualisation project that takes inspiration from both HelloEnjoy’s Lights, and the fun music game Auditorium. (check out both, if you haven’t already!)

The running visualisation can be manipulated using the mouse (both buttons) or tweaked via a myriad of parameters in the control panel.

Interestingly they chose to perform the audio analysis on the server side, with results streamed to the browser for visualisation. I can only presume that this was for performance… and to avoid some of the mess that is cross-browser HTML5 Audio.

The accompanying blog post details their implementation and plans for the future.

Spectrascade: a WebGL music visualisation game
Accompanying blog post
Lights
Auditorium

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

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

You may have noticed that we’re fond of a bit of retro, so it was hard to resist this pixelated music video from Wildlife Control… from their blog:

We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool. At the time, we were thinking it would be a quick little animated ASCII thing. After digging in a little more, we decided to go way bigger.

Each jumbo pixel in the grid is a plain old <div> with a coloured background, while scenes are broken down into reusable sprites to keep things snappy.

Cute 8-bit dinosaurs, robots & zombie dogs all make an appearance, with SoundCloud comments embedded at the correct time-index – a nice touch.

I strongly suspect there’s some nice tooling behind this, if the large arrays of data in the source are anything to go by. Perhaps they’ll let us know!

The song isn’t half bad, either

Analog or digital – Wildlife control

Here’s a fun project from Mr doob and Paul Lamere – it’s an homage to 90s CGI music video project Animusic, built with JavaScript using three.js.

It came out of a Music Hack Day in Cannes in the South of France, the latest in a series of such events all around the world.

They use data from the EchoNest platform, which I’d never heard of before. They have data for music tracks that you can download as JSON files. This data includes beats, bars, tempo and notes for each track – it’s a dense file, see for yourself.

Paul was responsible for pulling out that data and making sense of it, while Mr doob sorted all of the 3D rendering.

Paul Lamere demos Music Machine in Cannes. Photo by Eliot Van Buskirk.

Considering the note information is computationally extracted out of audio tracks, it’s astonishingly accurate (although the musicians amongst you may notice certain discrepancies in the notes!).

But the great thing is that, unlike the original Animusic, which must have been a massively labour-intensive project, this will work on any music track that EchoNest have in their database. Here’s the demo running with Herbie Hancock’s classic funk track Chameleon.

It’s also worth checking out the JS drum machine on this hack day report from the conference that hosted the event, Midem.

Music Machine by Paul Lamere and Mr doob from the Cannes Music Hack Day 2012.