Archive for September, 2008

Plotting a Sound Wave in Flash AS3

Friday, September 26th, 2008

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:
80's Oscilloscope
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

pcm wave data plotted in flash

Project Source

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

Formatting gcc, g++ Output Using PHP In TextMate

Saturday, September 20th, 2008

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.

Picture of colored gcc output.

To do this you’ll need PHP installed on your machine. After that, the first step is to create a new command in TextMate’s C Bundle. Call it “Build, Format With PHP,” or anything else. Set it to save all files in the project when run [from the pull down at the top] now enter this into the text area:

export FILE=`basename ${TM_FILEPATH}`
~/Library/Application\ Support/TextMate/Support/bin/

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

make &> ${FILE}.mkout
php -f ~/Library/Application\ Support/TextMate/Support/bin/gcc_format.php ${FILE} ${DIR}

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 and fill it with the meat of our parser:


    // get stdout and stderr then delete temp file
    $dir = $argv[2];
    $commandFile = $argv[1] . '.mkout';
    $commands = file_get_contents($commandFile);
    // break lines up by line ending
    $lines = explode("\n", $commands);
    // find errors and link them to pages and line number
    $errors = 0;
    for ($i=0; $i < count($lines); $i++)
        $fnpos = strpos($lines[$i], ':');
        $filename = substr($lines[$i], 0, $fnpos);
        $lnpos = strpos($lines[$i], ': error:');
        $linestart = $lnpos - $fnpos - 1;
        if($linestart < 0) continue;
        $line = substr($lines[$i], $fnpos+1, $lnpos - $fnpos - 1);
        $link = "txmt://open/?url=file://$dir/$filename&line=$line&column=1";
        $lines[$i] = substr_replace( $lines[$i], '</a>', $lnpos, 0);
        $lines[$i] = "<a href=\"$link\">" . $lines[$i];
    $output = implode("<br />\n", $lines);
    echo '
        <style type="text/css">
        body    {background:#000000; color:#999999;}
        #comment{width:100%; background: #230021; color:#6060BF;}
        #fail   {width:100%; background:#3E0018; color:#9918B8;}
        #succ   {width:100%; background:#230021; color:#B0FFF0;}
        dslsh   {color:#A96AA9;}
        a:link  {color:#008080;}
        a:hover {color:#80A0FF;}
            <div id="comment">
                <dslsh>//</dslsh> '
. $argv[1] .'\'s build results:
    echo $output . '<br />';
    if($errors > 0)
        echo '<div id="fail">Build failed with '. $errors .' errors.</div>';
        echo '<div id="succ">Build Succeeded!</div>';

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!

ZendCon 08

Thursday, September 18th, 2008

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.

I’ve moved servers!

Tuesday, September 2nd, 2008

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

Follow me on GitHub
Follow me on Google+
Follow me on Twitter