The
efnx code blog.

In my last post, Plotting a Sound Wave in Flash AS3 I detailed a method to use when displaying audio data. The method itself works great, but due to Flash’s frame-based code execution and event processing the user looses input capabilities while the flash player chugs through millions of numbers adding, rounding and comparing. In order to make displaying an audio waveform easier on both the programmer and the user I wrote a class that analyzes a Sound object progressively, and dispatches a special event containing the analyzed data. The class will construct a left and right channel Vector, each containing one data point [a number between 0 and 1] for a given number of windows, between two positions in the sound. The left and right position are measured in samples and two types of analyzation are offered. Here is a demo of the class in action:

Screen Capture of Waveform Plot

Thanks to the Summit Projects Flash Blog and Thibault Imbert at ByteArray for their posts on the different techniques that went into my class.

Source
Here is the source for my TextMate project: Sources
Documentation: class and event

And here is a Flex version (made in windows): // Thanks dem!
Sources (Flex version)

I’ve always been really into wave editors. I used to make songs in Amadeus by piecing together samples from other songs. Tedious but very rewarding. In a post I made not a long time ago I detailed a little Theremin project which included some wave data visualization. In this post I”ll be going further into detail about plotting sound data.

Digital audio in it’s rawest form [PCM wave data] is a long list of numbers from 1 to -1, which represent the sound’s amplitude. Another way of thinking about this is that each number represents your speaker’s distance away from it’s rest position. At 1 the speaker is fully extended, blowing out your ears and scaring your cats, while at -1 it is fully retracted, blowing out your ears and scaring your cats. To make a meaningful visual out of this we just set up a graph where time is plotted on the horizontal axis and amplitude on the vertical. So at a really high resolution, that might look like this:

Okay, maybe it would look like that if you were living in the 80’s. Or if you were really into oscilloscopes. In reality with most popular songs being two to five minutes long, we’d be looking at HUGE graphs. One three minute song sampled at 44.1kHz/s comes out to be eight million samples per channel. Per channel. Since most modern music is in stereo, we’re looking at two graphs now. So how do we compress this data and view it in a meaningful way? We cheat a little. We kinda scrap the whole graph/function thing. Well kinda. Let’s say you have a window 1000 pixels wide and a sound 3 minutes long. We have to compress enough samples together in order to represent them using each pixel [about 7,938 samples per pixel]. Averaging doesn’t work because with values oscillating between -1 and 1 the mean is usually zero. We could take one sample every so often to represent an entire chunk and plot that, but that’s just resampling at a much lower resolution, which results in aliasing and all sorts of bogus stuff. Take this video for instance:

Just instead of helicopter blades not moving, it’ll be your data points. No, instead what we do is we scan every single sample and pick out the largest and the smallest numbers from the chunk, which in our case means running through every 7,938 samples and picking the biggest and smallest ones. Then we plot them on top of each other, maybe with a line connecting them. Flash gets a little slow working with lists and arrays this big, but I’m sure we’ll figure out some neat tricks to get this stuff working fast. That said, here’s a little demo. If you can figure out the song I’ll give you a million bucks. [Let it chug for a while, Flash is a slow beast]:

pcm wave data plotted in flash

Project Source

ps – don’t cheat, guess the song before you download the source, goofball.

While at ZendCon08 I saw a lot of people sharing the same love for TextMate as myself. I fricken love TextMate. Some of my friends laughed at me, saying “Bah, TM’s not an IDE, why do you want to write shell scripts to try to make it one?” And I’d be like, “I’m an ActionScript developer, there’s no point in using a sledge hammer to pound in nails.” This makes sense because my friends use Eclipse. I tried Eclipse but it’s so huge and the plugins are huge and the interface is cluttered and theming syntax-coloring is a pain. So when I got home from ZendCon, with my renewed love for PHP, and my continual quest to eventually be a good C programmer, I decided to write a gcc parser script that linked back into TextMate to go directly to my errors. I use a dark syntax theme, a slightly modded Amy, and the parser reflects that. Check out a picture of these gcc errors:

Picture of colored gcc output.

Next select Output as “Show as HTML” so we can see our output. Now create a file called “make_format_gcc.sh” in the folder ~/Library/Application Support/TextMate/Support/bin/
Once you’ve created the file, use TM or vim to fill it with this:

This bash script executes the make on the makefile and directs the standard and error output to the same file. Then the script calls php to parse and display the file. So now create a file named “gcc_format.php” in the same folder as make_format_gcc.sh and fill it with the meat of our parser:

This example assumes that you are working in a directory with a makefile, but I’m sure it can be easily modded to work with any build script. The colors reflect my favorite theme, but they should also be easily modded with lines 32-38 of the php script. Happy coding, peoples!

I just got back from ZendCon 2008 and it was pretty fun. Much more fun than a typical work week. I got to learn a lot about the new features of PHP, some common and not so common security pitfalls and I met a lot of rad programmers. The highlight for me though, was the Yahoo party. Yahoo raffled off a Nintendo Wii, which I happened to win! When I went to pick it up from the rafflers the crowd of PHP developers started shouting “Speech! Speech!” So I stood up on a chair and told them I was an AS3 developer, and they promptly booed me down. I escaped unscathed, with the Wii.

Look at that happy lad! Time to get this thing ready for some homebrew apps.

After a little down time I’m back up in a much better situation! This blog is now hosted by 600RECORDS, which rocks. Tanks!

Button
Calculating Frames Per Second [and memory usage]
MultiLoader
Example and Project Source

I’ve created a number of tools for people to use in the past, most of which I update regularly. In this post I’d like to revisit some of my old classes and post new updated code for those classes, as in their current form they don’t much represent my coding style. Please note that my class hierarchy has also changed, so make sure to update your includes if you are using these in your projects.

Button
I posted code for a button class here ->here about a year ago, since then I’ve changed things and really cleaned up that class. It’s simpler than before and faster. Given one to three images this class will create a clickable button that has the option to trigger up to four functions [on roll over, mouse down, mouse up and roll out]. Here is a snippet showing its use:

Calculating Frames Per Second
The next class I’d like to revisit is my FPS counter. It’s basically a textfield that displays an instantaneous fps count, and an averaged count. I have now removed the average frames per second and included a display of used memory in MB. Before I had used a timer to calculate the fps, which wasn’t quite accurate enough. Now the class uses flash.utils.getTimer() and is very precise and accurate. The class extends TextField so custom coloring, etc is very straightforward:

MultiLoader and MultiLoaderEvent
The next entry is a class created for downloading and importing files from your server or local file system into your flash application. It is what I use in place of my Multiple Bitmap Loader and my Bitmap Resource Handler. MultiLoader extends Loader to support multiple asynchronous downloads of images/swfs. They trigger specific (read “specially named”) ProgressEvents based on the names of entries supplied by you in their load functions. Alternatively, they also trigger a MultiLoaderEvent for every ProgressEvent or complete Event dispatched. One can access the bytesLoaded and bytesTotal for each event, as well as the entry name of the event (which matches the entry name given to MultiLoader). For example, to load a gif and listen to progress and complete events, code the following:

In this example my entry name is “efnx” and so MultiLoader triggers events of type “efnx_Progress” and “efnx_Complete”. By listening for these events, we can get updated information about our downloads. Another option is to listen for “progress” and “complete,” which will trigger an event of type MultiLoaderEvent, which extends ProgressEvent to include an “entry” member. The value of event.entry will be the name of the entry triggering the event, in this case “efnx.” Now to use our images we “get” the resource from MultiLoader, which has been storing it for us. A great feature of this class is being able to specify what the return type of your loaded object when calling the “get” function. Here I’m going to want to return a Bitmap object, so for the third parameter of the “load” function I’ll pass the string “Bitmap”. Here’s an example:

Now inside my efnxComplete function I’ll add the get function to get my Bitmap and display it.

Using the third parameter of the load() function is optional and if omitted Multiloader will by default choose an appropriate return type, here is a list of the valid strings to pass as a return type:

MovieClip
Sprite
Bitmap
BitmapData

If no third parameter is supplied, MultiLoader will return a type it thinks is appropriate, given the extension of the loaded material. For example loading a .swf will return a MovieClip, where as loading a .jpeg, .png or .gif will return a BitmapData.

Example App and Project Source
Here is a project that shows all three updated classes being used:

And here is the source to my classes:
Example Project and Source [includes classes]

Here is a little example:
updatedExample

And as always you can find the classes by themselves [along with all my other classes] here efnx AS3 classes, as well as some limited documentation efnx Class Documentation

Yesterday I started fooling around with FP10’s sound generation capabilities and I got the idea to code a little Theremin. It came out pretty good, but was bland in aesthetics. I decided to try my hand at coding a visualization algorithm similar to the type of visualization one would see while using Amadeus or Digital Performer, etc. I wanted to plot the wave form on the stage. Taking a copy of the sound buffer and selecting equally spaced samples I plotted them on the bitmapData of a Bitmap object and drew lines between data points. This is what it looks like:

The mouse position in x controls the frequency of a sine wave [from 220Hz to 440Hz or A3 to A4], while the y position controls volume. There’s some tearing that occurs when modulating volume, I haven’t figured that out how to fix that yet. As you move your mouse the wave that is generated is plotted on the stage. The pink dots represent sampled data points [which correspond to speaker movement] while the purple lines are approximations of the in-betweens [just lines drawn from point to point]. After playing with that for a while I wrote a class that matches note names to frequencies and drew markers indicating where on the x-axis of the stage one would have to place the cursor to generate a given note between A3 and A4. This is just a small example of the possibilities of sound in flash, and one way to interact with it. I’m looking forward to building on the classes I made for this example. I’ve included my entire TextMate project and source below [which will be the foundation of many more experiments], you can chop it up and use it however you want, although I didn’t copy any license to it, but trust me I won’t sue.

src -> Theremin Project/Visualizing Wave Data

I had some problems installing the under-the-radar Flash 10 Debug version mentioned in a couple blogs in the past months. So here is my work around just in case anyone else can’t seem to get Flash 10 to trace to their flashlog.txt.

1. Download installer from Adobe’s svn repository and select your OS [the rest of these steps are for mac, mind you, but you'll get the idea].
2. Unarchive and mount “Install Flash Player 10 UB.dmg”
3. Here’s the funny part, I couldn’t install the package. I got an error saying “nothing to install”, so instead, right click on “Adobe Flash Player.pkg” and choose “Show Package Contents”. It should show two archives, a plist, pkginfo and a resources folder.
4. Unarchive “Archive.pax.gz” to your desktop.
5. Inside you’ll find “Flash Player.plugin,” “flashplayer.xpt” and “version.txt.” The version.txt file says the player is version 9.0.45.0, but after looking at the info for “Flash Player.plugin” you’ll see it’s version 10.0.0.525, which isn’t the newest, but it traces and that’s what I need it for.
6. Copy “Flash Player.plugin” and “flashplayer.xpt” to your internet plugin folder, on my machine that’s /Library/Internet Plug-Ins
7. Restart FireFox/Safari/whatever.

That’s it!

I’m sorry if this info is un-needed, I definitely needed it, maybe everyone else can simply install that package, but I couldn’t, so that’s the fix. Happy coding.

Hey guys, I’m not sure who reads this on a regular basis, but I’ve been super swamped with work lately and haven’t had a lot of time [or energy] for my own development. Hopefully I’ll be seeing things clear up soon and I’ll have some new classes and new projects to share with you. Thanks for sticking in there, tiger. In the meantime, here’s a rad video.

This tutorial is for those of your who might have to write your own Photo-shop-a-like applications or anyone who has to merge [flatten] two BitmapData together at pixel-level, without using BitmapData.copyPixels or BitmapData.merge. Furthermore this tutorial deals with bitwise operations, which are super fast and rad for color computation. Boom. Color. If you’re not familiar with bitwise operators I suggest you check out Polygonal Labs’ Bitwise Gems: Fast Integer Math. Done? Great. Okay, on with our discussion. I hope this stuff makes sense because this is my first tutorial. Ever…. …so first let’s create some colored Bitmaps on the page.

Building our project we should see somethin like this:

As you can see we’ve created a super green bmd, a bloody red bmd and a half-hearted (half-opaque) blue bmd. When the half-opaque blue bitmap is placed over the green and red bitmaps it filters the green and red bitmaps, altering the percieved colors. Our goal is to be able to calculate those percieved colors given two 32 bit colors in order to merge them onto a new BitmapData.

Now let’s begin our pixel layering function. We can start by outlining what the function is going to do. Let’s give it two 32 bit colors, (like the red and blue or the green and blue) and let’s make it give us back a 32 bit color that represents the two colors layered on top of each other.

Now let’s extract each color’s ARGB channels. Traditionally the method would look like this:

But since we’re working with what the colors *should* look like when layered, we have to figure out how much each channel actually shows through, according to the alpha channel. To do this we’ll multiply each channel by the color’s alpha channel’s opacity. The opacity is simply the alpha channel value divided by 255. So 100% opacity (255 or 0xFF) would turn out as 1, and 1 times each channel means 100% of each channel will show. 50% opacity (127 or 0×7F-0×80) would turn out as .5 and .5 times each channel shows 50% of each channel. Thus:

Now that we have our individual channel values we can begin to calculate our new color. Remember that the maximum color value is 255 (0xFF) so we’ll be constraining our channel additions to 255.

If you combine our channels and return the new color you’ll get something much brighter than what we should see. We’re going to have to filter the bottom color through the top color to fix this. You might be saying “ah man, I’ll just use BitmapData.copyPixels,” but don’t worry, we’re almost done. It’ll be so much more satisfying to figure out this stuff in the end, believe me. You’ll be a color scientist. So, all we need to do is multiply each channel of the bottom color by a number that represents how much light penetrates the top layer. So, if our top layer alpha channel is 0×7F, our ’show through’ variable is going to be 50% (0×7F) and if our top alpha channel is 0×40 (25%) then 75% of the bottom channel will show through. To do this we’ll create our ’show through’ var and multiply the bottom channels by it.

Now for the last bit. Let’s combine all our new channels and return that value.

Awesome! Were done. Using this function, for loops and some creativity, you can compile any number of 32 bit BitmapData on top of each other. Boom. Color. So, let’s use this function and compare it to the blending that happens within DisplayObjectContainers with transparency! Let’s alter our first bitmap generating/placing code to use our new function:

Let’s take a look at it.

Wow, I don’t believe. Well, there you have it. Bust out your color schemer (or equivalent) and check those hex codes. Exact are they not? I hope you enjoyed this! Yay color.