Actionscript 3 Browser Theremin / Wave Data Visualization
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.
May 26th, 2009 at 11:29 am
Hi man!
Nice Theremin and implementation.
One detail, the E4 note show “A3″.
Sucess man!
Regards.
May 26th, 2009 at 11:42 am
Ah! Thanks. Don’t know what I was thinking. I would fix it, but I think this project is a little dated! Thanks.
January 19th, 2010 at 8:03 pm
[...] The theremin one adds sound to the graffiti. Similar to a Theremin, the up and down controls volume, while left and right controls pitch. I found the original code for the theremin part here: http://blog.efnx.com/browser-theremin-wave-data-visualization/ [...]
January 19th, 2010 at 8:06 pm
Thanks for sharing this, even years later it can be useful.
Theremin + GML http://www.cyancdesign.com/swf/theremin.html
January 19th, 2010 at 9:19 pm
Man, that is rad! Thanks for letting me know.