HTML5 3D FFT Visualization with CubicVR from Bocoup on Vimeo.
Generative, audio-reactive three-dimensional visuals have been a staple of the language of audiovisual performers and live visualists for a long time. Finally, that language can be executed in browser windows as well as in dedicated software.
This topic deserves ongoing attention, but just to whet your appetite, a bit of what’s on the horizon:
You can follow Andor Salga’s efforts with Processing.js and 3D. It’s brilliant stuff, and incredibly, you can more or less copy and paste the code from Processing.js into the downloaded Processing IDE. That means Web sketching, prototyping, and sharing can be complemented by more serious efforts on your desktop tool.
Note that you’ll need to grab a nightly/developer build of Google Chrome/Chromium, Safari/WebKit, or Firefox. Very often, even that isn’t enough – I finally got Firefox “Minefield” 3.7 nightlies working, but only after I changed a configuraiton setting. This is all coming in the next dot-releases of these browsers, though, and it works today – not in some far-off sci fi future.
On Create Digital Music, here’s a first look at how live sound processing is coming to Firefox – and could become a new HTML standard. Not only does this allow audiovisual Web apps, but it can even visualize sounds as they play.
Real Sound Synthesis, Now in the Browser; Possible New Standard?
Lastly, if you’re playing around with Processing.js, I love this bookmarklet. Select code (even most standard Processing code will work), hit the bookmarklet, and it executes in the Processing.js JavaScript library. I may actually use this to help my students with their programming efforts in (desktop) Processing.
PJDBox @ Sancho the Fat (Robert O’Rourke)
And you can even try out Processing as rendered in the browser-based Bespin IDE. (I still wouldn’t mind making it work inside Eclipse/Aptana, though, if anyone has tried that. Call me old-fashioned / antiquated.)
If you know how to use Processing, you know how to use this:
http://code.bocoup.com/processing-js/bespin/
Lastly, the stunning demo at bottom comes from GLGE, which has the insanely great tagline “WebGL for the lazy.” Not since “Don’t Panic” have I seen a better slogan.
And yes, this is JavaScript. I’ll let that sink in.