3D Sound Visualizer Using Papervision3D

I’ve put together a couple of examples using the new audio capabilities of Actionscript 3 combined with the Papervision3D engine. I am creating a 3D carousel of cube primitives and am setting their scaleY values according to the frequency spectrum that I get back from the MP3 file. The first example shows the cubes in wireframe mode so you can see what is happening. The second example uses a bitmap texture to create a cool effect that I think matches the music really well. The code for the first example is below as well. Just click on the images to see the examples and also make sure that you Flash Player 9.

[as]import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

var so:Sound = new Sound();
var sc:SoundChannel;
var ba:ByteArray = new ByteArray();
var array:Array;

so.load(new URLRequest(“amon4.mp3″));
sc = so.play(0,1000);

var sp:Sprite = new Sprite();
this.addChild(sp);
sp.x = 320;
sp.y = 240;

var radius:int = 2000;

var s:MovieScene3D = new MovieScene3D(sp);
var cam:Camera3D = new Camera3D();

var pl:Plane = new Plane();
pl.visible = false;
s.addChild(pl);
cam.target = pl;
cam.z = -3500;

var ang:Number = 360/15;

for(var i:int=0; i<15; i++)
{
var bam:WireframeMaterial = new WireframeMaterial(0xFFFFFF*Math.random());
bam.oneSide = false;
var p:Cube = new Cube(bam);
p.name = “i”+i;
p.scaleY = 5;
s.addChild(p);
p.z = Math.sin((ang*i)*Math.PI/180) * radius;
p.x = Math.cos((ang*i)*Math.PI/180) * radius;
}

this.addEventListener(Event.ENTER_FRAME, render);

var yOff:Number = 0;
var angleZ:Number = 0;
var a:Number = 0;
function render(e:Event)
{
SoundMixer.computeSpectrum(ba,true,0);
for(var i=0; i < 256; i=i+8)
{
a = ba.readFloat()*10;
if(Math.round(i/8)<15) s.getChildByName(“i”+ Math.round(i/8).toString()).scaleY = (a/15)*6;
}

cam.y = (this.mouseY – 240)*8;
angleZ += (this.mouseX – 320)*0.0001;
cam.z = Math.sin(angleZ) * 3000;
cam.x = Math.cos(angleZ) * 3000;

s.renderCamera(cam);
}
s.renderCamera(cam);[/as]

Lee :-)


Commentary

  1. sike says:

    U are always awesome.

  2. Ben says:

    again, i’m blown away. you really to have a thing for the carousel shape don’t you ;)

  3. tr0ma says:

    Fantastic!
    (I keep following this blog for a while, first time I ever leave a comment, but because I love so much this Amon Tobin track ;) )

  4. Very cool, Lee. A bit jittery, maybe if you tacked on like 0.5 to the scale though, so it was always at least 50% instead of bouncing down to 0 at times?

  5. xeonarno says:

    WOW ! max possibilities

  6. Simon says:

    Wow! Nice one Lee :D

  7. Amit says:

    Amazing stuff!!! would you be kind enough to post the source files and also the value for a 100HZ in the computeSpectrum function??

  8. ed says:

    you blog is cool. Why does your header only display “Fl”?!?

  9. lee says:

    It matches the new icon for Flash CS3

  10. simurai says:

    Wow Lee. That’s by far the best Sound Spectrum Visualization that I’ve seen so far.

    But most important is the choice of music. To get a cool effect the music needs loud and quite parts and some rythm.. most POP/Rock songs would look really borring..

    So, excelent song choice, Lee.

  11. reyco1 says:

    any idea when we might have access to download papervision3d?

  12. flaytech says:

    Great, congratulations

    The “computespectrum” calculates a fft of 512 points (and you take the first 256 points due to the spectrum symmetry. Is OK?). On the other hand, is possible to calculate an fft with more points and consequentely obtain better frequency resolution?

    And most important yet. What is the name of the artist?

    Thanks for your work

    Flaytech

  13. bulgaria says:

    … And I tought I knew something about Actionscript …

    What’s that version of Flash 9 you’re using ? It isn’t the final right ? I’m with Flash 8 for now .

  14. Ahmet says:

    Woawww…
    Nice idea.
    Any idea when the papervision will be available for download?

  15. albert says:

    Has anyone made this to work? I can’t seem to get the provided code working, if anyone can kindly share their working files I will greatly appreciate it!!

  16. nick says:

    quick question:

    any idea why the visible property of all cube faces (Face3D) always return false, whether or not they are visible to the camera?

    thanks

  17. 6th project says:

    hi one doubt Papervion3d or Sandy….

    check out once done flash developer london

  18. Lawrence says:

    Hi.. this is serisously cool thanks

  19. D.Ross says:

    What’s the point of this? It also look 10 years out of date as well…

  20. yariv says:

    Hey Lee
    very very cool man !!!
    really inspiring !

    one thing though
    who is the musician ?
    is it Amon Tobin ?

    cheers
    Yariv
    :)

  21. Simon says:

    Hi,

    got a bit of a dilema at the mo, in short, im doing my 2nd year digital art degree, and we have been set a project and in short agin, i want a visual representation on some some files, the visual should hopefully be random, or just like http://theflashblog.com/?p=255 the sound is a live feed so this would have to work live, does anyone have any ideas?

    Simon

    e.DJMigsy86s@hotmail.com

  22. Simon says:

    Hi,

    got a bit of a dilema at the mo, in short, im doing my 2nd year digital art degree, and we have been set a project and in short agin, i want a visual representation on some some files, the visual should hopefully be random, or just like http://theflashblog.com/?p=255 the sound is a live feed so this would have to work live, does anyone have any ideas?

    Simon

  23. M says:

    If anyone has errors on lines 33 and 56, and you see : ” ‘i<15; “, you have to replace “<” by “

  24. M says:

    If anyone has errors on lines 33 and 56, and you see : ” i&lt ;15; “, you have to replace “&lt ;” (no space between ‘t’ and ‘;’) by “<”.

    This error is due to a difference in html text coding.

    Cheers, and thanks a lot Lee for this basis.

  25. ActionScript3 is awesome, Lee.

    I started to play with the graphics and sound classes in August. Somehow it morphed into this project to play Milkdrop presets in Flash (from http://www.milkdrop.co.uk/).

    See http://flashoid.com. This is a 12×12 mesh playing about 100 different presets from the first version of milkdrop, all to the tune of Pink Floyd’s Time. Crazy.

  26. ???? says:

    var p:Cube = new Cube(bam);

    1067: org.papervision3d.materials:WireframeMaterial ??????????????????? org.papervision3d.materials:MaterialsList?

  1. [... I've put together a couple of examples using the new audio capabilities of Actionscript 3 combined with the Papervision3D engine. I am creating a 3D carousel of cube primitives and ...]

  2. [... I've put together a couple of examples using the new audio capabilities of Actionscript 3 combined with the Papervision3D engine. I am creating a 3D carousel of cube primitives and ...]

  3. [... I've put together a couple of examples using the new audio capabilities of Actionscript 3 combined with the Papervision3D engine. I am creating a 3D carousel of cube primitives and ...]

Leave a Comment