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:
Theremin Wave Data

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

Tags: , , ,

5 Responses to “Actionscript 3 Browser Theremin / Wave Data Visualization”

  1. Hi man!
    Nice Theremin and implementation.
    One detail, the E4 note show “A3″.

    Sucess man!

    Regards.

  2. Ah! Thanks. Don’t know what I was thinking. I would fix it, but I think this project is a little dated! Thanks.

  3. [...] 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/ [...]

  4. Thanks for sharing this, even years later it can be useful.
    Theremin + GML http://www.cyancdesign.com/swf/theremin.html

  5. Man, that is rad! Thanks for letting me know.

Leave a Reply


Follow me on GitHub
Follow me on Google+
Follow me on Twitter
Thrilling.
EFNX is proudly powered by WordPress
Entries (RSS) and Comments (RSS).