Actionscript particles - Fountain equalizer

Particles, actionscript 3, equalizer

Here’s a new experiment.
It uses the computeSpectrum method together with a simple particles class i wrote.

I think the effect is graphically very satisfing and personally cannot stop to look at it.
The song is “Aria regina della notte” from Mozart’s “Flauto Magico”.

Tomorrow I’ll post code and sources of this.

Hope you’ll be hypnothized from this as I am.

The picture is not well explaining, you must see this in action.

EDIT:

Ok, sorry for the late but here we are with the source code:

Download the SimpleParticleGenerator and SimpleParticle class zipped togheter, then just use this code to build the equalizer.
I release the code just now because I wanted to wrap the main code in a class too, and maybe add some methods to scale it like a component, but I realized it’s totally unuseful for few lines of code, and I don’t wanna loose the fun part in the experiment.

I promise that from now I will be faster to release the source code :)

// Author: Pierluigi Pesenti
// Web: http://blog.oaxoa.com
 
import flash.media.Sound;
import flash.net.URLRequest;
import flash.media.SoundMixer;
import flash.utils.ByteArray;
import flash.events.*;
import flash.display.Sprite;
import flash.filters.GlowFilter;
import com.oaxoa.fx.SimpleParticleGenerator;
import com.oaxoa.components.FrameRater;
 
var req:URLRequest=new URLRequest("mozart.mp3");
var sound:Sound=new Sound(req);
var ba:ByteArray=new ByteArray();
var samples:uint=32;
var offset:uint=256/samples;
 
// create a sprite and add 1*samples istances of the SimpleParticleGenerator class
var _holder:Sprite=new Sprite();
for(var i:uint=0; i<samples; i++) {
	var pg:SimpleParticleGenerator=new SimpleParticleGenerator();
	pg.y=252;
	pg.x=15+i*offset*2;
	pg.angleDeg=-90;
	_holder.addChild(pg);
}
 
// add the holder sprite and start music
addChild(_holder);
sound.play();
 
// listener for frame based animation
addEventListener(Event.ENTER_FRAME, onframe);
 
// some fancy glow filter
// the glow filter is added to the holder sprite
// and not to the single particle for two reasons
// a lot of speed gain, and visually better blend result
var glow:GlowFilter=new GlowFilter();
glow.color=0xFFAA00;
_holder.filters=[glow];
 
// at every frame
function onframe(event:Event):void {
	// compoute sound specturm
	SoundMixer.computeSpectrum(ba, true);
	var count:uint=0;
	//for every generator
	// with a 0-256 range only the left channel is sampled
	// you can easily goto from 256 to 512 for the right or sample both and average value
	for (var i:uint=0; i<256; i+=offset) {
		var t:Number=ba.readFloat();
		var n:Number=t*20;
		var g=_holder.getChildAt(count);
		// set the particles speed at a value of n
		// n = the sound peak * 20 to raise the effect
		g.speed=n;
		count++;
	}
}
 
//add frame rate meter
var fr:FrameRater=new FrameRater(0xffFFFF, false, true, 0x0099ff);
addChild(fr);

Expect more equalizing fun.

36 Responses

  1. Russ  •  December 28, 2007 @5:52 pm

    very nice, even though I am not a big opera fan, I watched it all the way through…

  2. Pierluigi Pesenti  •  December 28, 2007 @6:07 pm

    Thanks, I am not an opera fan too (only opera Browser :)) but I was searching for a song to better render the effect.
    bye

  3. Ryan  •  December 30, 2007 @8:04 pm

    This is so amazing, very hypnotizing indeed… I wonder how long it took you to think of and create this? It’s just so very stunning…

  4. Pierluigi  •  January 21, 2008 @8:41 pm

    Am-az-ing!!!
    Do you still plan to post the source code of your effect? I want it! Thanks ;-)

  5. Pierluigi Pesenti  •  January 21, 2008 @9:01 pm

    Hey! We have the same name ;)
    Sure I want to release the code, I’ll post it (hope) tomorrow.
    Byez

  6. Romain  •  January 22, 2008 @7:11 pm

    Oups!
    Wrong copy/paste ;-)
    Thanks for the source!

  7. Lamer  •  January 25, 2008 @8:52 am

    Where is the code?

  8. Mike Lowry  •  February 5, 2008 @5:35 am

    wow great effect… I’d like to learn how you did this.
    But I can’t find the code on your website?

  9. SCaSic  •  February 15, 2008 @2:51 pm

    Outstaning. Please share the code. Equalizer is needed.

  10. Thomas Joos  •  February 15, 2008 @3:38 pm

    hey dude really nice but I’m also waiting on the source code ;)

    could you please post it on your website please?

    grtz thomas

  11. Lawrence  •  February 16, 2008 @7:58 pm

    Very interesting! Stunning visual effect!
    I’d also love to have a look at the code. Please and thank you.

  12. Sprint-Debugger  •  February 23, 2008 @9:35 pm

    PLEASE, dude, man, post the coolest actionscript ever made! P L E A S E !!!

  13. [...] just edited the Fountain equalizer post adding the source code. You’ll just need to download the two particles classes and copy the [...]

  14. zap  •  March 4, 2008 @4:51 pm

    com.oaxoa.components.FrameRater

    where is it?

  15. Pierluigi Pesenti  •  March 4, 2008 @4:54 pm
  16. Olivier  •  April 1, 2008 @2:08 pm

    Very nice, I would have put a bit more of red into the particles so that it looks like fire but it is already amazing ;)

  17. davidgarcia  •  May 4, 2008 @2:18 am

    hi!!!…….. its an amazing job…. really love it…. i got a question i dont know how what and where to put the code..and which of the three use…… i know i have to change the mp3 name which is the music but besides that ….nothing…. could someone please please help me?????? its in the actions panel or where.. do i have to put someting in the fram or layer ……

  18. Pierluigi Pesenti  •  May 4, 2008 @9:24 am

    simply download the zipped classes and extract them in any folder.

    Then if you use flash CS3 just do these simple steps:
    - open a new fla
    - open “publish settings” panel and in the flash tab near to the “actionscript” combobox press settings.
    - push the crossair button and browse to the folder where u saved the classes.
    - paste the above code in the first frame actions of the newly created fla.
    - compile and enjoy.

    if you use flex builder I am almost sure you know the process, very similar.

  19. davidgarcia  •  May 5, 2008 @3:02 am

    Thank you very much…. i dont know whats goin on …. i did just what you say… and nothing.. i dont know if being a mac affects in somehow??…..

  20. [...] Read more | Source [...]

  21. locurnus  •  September 20, 2008 @5:19 pm

    hmm…

    did this, but nothing work… do you have another download with ready liked fla, please?

    at all very cool work….

  22. subblue  •  October 9, 2008 @8:22 pm

    That’s very nicely done!

  23. Aric  •  December 10, 2008 @7:41 am

    Thanks for this, I am working on an assignment for an AS3 class and this helping out a lot.

    One thing I notice is that in my copy only the first 4 bars are generating a particle. Any idea on what this might be. Would it be okay to send my source?

    Thanks again

  24. Pierluigi Pesenti  •  December 10, 2008 @7:57 am

    No problems Aric. Send it at: info (put an AT sign here) oaxoa dot com.
    Bye

  25. viaria  •  April 19, 2009 @11:23 pm

    thanks man.. i will follow you..

  26. Pirsey  •  April 24, 2009 @12:07 pm

    Hey, cool tips. I’ll buy a glass of beer to that person from that chat who told me to go to your blog :)

  27. Pierluigi Pesenti  •  April 24, 2009 @1:25 pm

    Wouldn’t be simpler buy a beer directly to me? :-D

  28. Free MP3 @ www.jagmp3.net  •  April 29, 2009 @7:05 am

    Wow! what an idea ! What a concept ! Beautiful .. Amazing

  29. Josh  •  May 1, 2009 @6:23 pm

    Pretty good stuff. Nice to see you work in some 5th Element.

  30. Amir  •  June 7, 2009 @12:04 am

    good work man.

  31. Alex  •  July 6, 2009 @1:43 pm

    Hi, Pierluigi! Your effect is great!!

    I’m learning AS3 at the moment.
    Was trying to figure out how the code works.
    I wanted to make an EQ for both left and right channels, but there were some troubles. ..cant express myself in english well) so here’s the code:

    for (var i:uint=0; i<512; i+=offset) {

    }

    But if I set panning to 1 (so, only right channel would sound), nothing would happen.
    So, after a while, I thought, maybe you read only some first bytes of the byteArray (~(4*samples) of 2048) and its position should be moved every iteration. Maybe like this:

    ba.position+=((offset-1)*4);

    Thanks again!

    p.s. sorry for my english

  32. Morris  •  October 20, 2009 @1:21 pm

    You are fascinating.

  33. jous  •  May 22, 2010 @3:59 pm

    can publish the file. fla

  34. Ronnie Swietek  •  July 23, 2010 @6:59 pm

    that is badass

  35. roket  •  May 5, 2011 @2:40 pm

    radio does not work with url streamig
    cs3 works program within the Particles but not compiled into swf

  36. Amit  •  September 26, 2011 @10:59 am

    Wicked !!!

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>