0

Alright, I am trying to build a FFT audio visualizer and have two questions to make it better. Right now I have a bit of working code that does the basics of what I want, but as always, I want more.

Here is the code that I currently have:

var s:Sound = new Sound(new URLRequest("mix 3 v1.mp3"));
s.play(0, 1);

var ba:ByteArray = new ByteArray();

addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void {
    graphics.clear();
    //Create ByteArray of song
    SoundMixer.computeSpectrum(ba, true);
    //For every 8 bytes to a max of 256
    for (var i:uint=0; i<256; i+=32) {
            var index = (i / 4);//or bitshift using i >> 3
            var num:Number = -ba.readFloat()*250;
                //Generate Bars
                graphics.beginFill(0xFFFF00);
                graphics.drawRect(191 + (index * 14), 500, 12, num-2);
    }
}

What I want now, is to be able to change the colour after a certain amount of time. How would I go about doing that? Would I just go to that frame in the timeline and do a different set of AS3 code? Or is it better practice to leave everything on frame one?

Also how would I ease the updating of the bars? Right now I believe it clears all of the graphics, and redraws everything, leaving for a very jumpy/flickering visualizer. Should I just draw the rectangles and then scale the height? Or is there a way to make a buffer of the frequency values to transition between the current and next value? (Which now that I think about it isn't really possible cause if it is updating every frame, you can't transition between frames...)

Thanks in advance.

G-Schmu
  • 27
  • 7

1 Answers1

0

Well, I think to achieve what you want you have to redesign and rethink your code a little bit.

At first I would remove your ENTER_FRAME loop and use Timer instead - this way you will not be dependant on frame rate.

Second, I would do the loop looking something like this:

function loop(e: TimerEvent): void
{
  processData();
  draw();
}

In processData() you may perform any calculations you need and save them in for later usage during drawing. You may google for Game Loop to learn more if you wish.

If you want to keep things simple I can suggest you to save the bars heights in array or vector, then use this data to draw the bars. You may even have two arrays - one for old data and one for current iteration - this way you can make some nice effects like first drawing semi-transparent bars with old data then drawing new ones on top of them.

This is all just bunch of ideas but hope this will be useful :)

twoface
  • 131
  • 6
  • I get what you are saying and it makes sense, but I am extremely new to AS3 don't really know how to do what you are talking about. Could you provide some code as to how you would do it? – G-Schmu Apr 19 '14 at 00:43
  • Hey, you may take a look [here](http://todaycreate.com/2009/01/17/another-computespectrum-example) - that is note my own code though but is really nice. – twoface Apr 22 '14 at 13:53