Audio Visualizer w/ as3isolib

Click grid to start and stop audio
Audio: Flying Lotus – “Kill Your Co-workers”
As usual, if YouTube or another video site is open in another tab, it is likely that you won’t be able to view the visualization.

This is the first experiment that I’ve done with as3isolib. I was so hopeful when I started working on this a couple of hours ago, only to realize pretty quickly that the library is quite slow. Perhaps it renders bitmap textures faster than the vector primitives, but I have a feeling that the bottleneck is elsewhere. This demo can eek out about 20-25 fps in both full-screen mode and in the browser with high quality rendering and about 40 fps in low quality mode. This just doesn’t seem sufficient for large projects especially given this demo’s simplicity. Press the “s” key to view a performance monitor.

Nonetheless, it was fun to build and I’m hopeful for the next version of as3isolib. It was also a good introduction to isometric geometry and now I’ve got a bug to try something similar in some variety of OpenGL.

Posted in Actionscript, Audio, Visualizations | Tagged , , , , | 6 Comments

6 Responses to Audio Visualizer w/ as3isolib

  1. Really digging this one.

  2. 28inch says:

    Hey Man! I can`t beleive you posted this. I was playing with the very same idea a couple of months ago. I was using hype framework for audio processing but I had similar (dissapointing)results on performance.

    I got the idea watching an FOTB video from 2008/2009…not sure. Some fella did a really nice `video to iso projection` experiment, where the height of the boxes were up to the color shade of the current pixels.

    as3isolib also has a polygon primitive, that might be a better approach to build boxes, although I couldn`t figure it out, how that class works. Got confused with the coordinate system.

    I also tried to do pixel mapping from lo-res images(hype/pixelColorist)..same results. Even just rendering a 50×50 grid, without any animation took forever.

    some examples:
    http://dl.dropbox.com/u/30790002/k0.jpg
    http://dl.dropbox.com/u/30790002/k1.jpg

  3. Craig Swann says:

    wow. small world this interweb is. :)

    First off, Jeremy – in general – nice stuff. 28inch the FOTB session was one I gave around that time where indeed I was using the brightness values of live video to determine the height of individual cells. It wasn’t using iso, but allowed for several controls for perspective. Keen to see where you get with it – the idea in general is intriguing. Cheers!

  4. Jeremy says:

    Hi Craig, thanks for reading!

  5. as3isolib says:

    really cool demo. To address the performance issue you speak of, yes rendering sprites and spritesheets is more performant than the vector-based primitives. Each resize of the primitive invalidates it, requiring a redraw of the visual data. Another thing you can do to improve render speed is to turn off the sorting for the sceneLayout renderer considering these boxes are not repositioning, only resizing.

    Hit me up on the forum if you have any other questions. Thanks for sharing :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>