Fun with SignalsCircuit, PureMVC and Away3D

(Note: You need a webcam.) Click on the image to view the demo. Right click the demo to view source!

Had a lot of fun with this one. I’ve worked with PureMVC in the past, and while I appreciated the framework for staying true to its name, I found it unwieldy and difficult to use correctly in practice. Along came SignalsCircuit, an extension to the framework by Omar Gonzalez (@s9tpepper) that really helped.

“SignalsCircuit is a small set of classes that implement and extend PureMVC core classes and interfaces to allow you to wire Signals to a Command pattern that provides access to the rest of your application via your PureMVC Facade implementation.”

Basically, the notification/controller system is overridden to use as3-Signals, and all of a sudden PureMVC became a pleasure to work with. My code retains the benefits of being loosely coupled, but is much easier to follow and understand– and Signals are also faster than notifications. My only criticism would be that Commands receive arguments from Signals as Arrays, which doesn’t feel or look very nice… but I don’t think that can actually be improved, so … whatevs!

The architecture and code essentially wrote itself. I spent way more time in Maya jiggering with the model than actually planning or coding, and I am pretty satisfied with the code. Though there are some improvements I would like to make:

  1. Abstract away3D functionality into a wrapper class. Currently have no choice but to scatter references to the class that was generated by prefab (away3D modeling helper tool) in my application. A wrapper class would be a step towards mitigating the effects of the dependency.
  2. Integrate unit tests. Obviously it’s a little late for this (you’re supposed to let the writing of the tests drive your programming) but from what I hear, having the tests is better than nothing. However I did run into some big problems with unit testing that I could not solve, perhaps you all have some hints?
    • I like to use local variables wherever possible, so as to black-box not just my classes but my functions as well. How does one test a function such as UseFaceCaptureAsTextureCommand.execute() ?
    • Do you only test your public API? No protected or private functions? I won’t be testing very much in that case.
    • I know I can use FlexUnit4 Asynchronous Tests to test functions that are dependent on events, but how do I go about this with Signals?
  3. Find more concise class names. I picked my own brain pretty hard on this one but am not satisfied with a 60 character command name (SupplyToUntexturedProxyAndAssembleTextureAs3DMaterialCommand – yeesh). I know I know, there is an “And” in there. But I just could not bring myself to break apart a Command with only 7 lines of real code in it into two separate Commands.
  4. You’ll notice there are virtually no comments in the code. This was an attempt at writing code so readable I wouldn’t need to comment it. I hope I got close. So if you’re looking through it and are going “WTF?” please let me know in the comments.

I’m sure there is a lot more I could improve… and I’ll probably regret this, but I invite you to take a sip of haterade, pore through the code and let me know what you would do differently! :)

coming soon, I’ll write up the steps I took to architect this guy.

Your Face, My Head: Webcam and Papervision Demo (with source, eventually)

Paperhead!I wanted to see just how difficult rigging up one of these would be. Found a good COLLADA file on the internet and I think it looks real purty (though I couldn’t say the same about the subject). Anyway if you have a webcam check it out! It’s fun.

Make sure to line your face up with the guide, and then click the red rectangle in the upper left hand corner. Wait a bit, and surprise!

I’ll be putting an instructional post up soon, documenting every last step 😉

Papervision Webcam Head

Who wins the award for most popular pixel?

From Soulwire, a snippet that gets the average color in an image:

function averageColour( source:BitmapData ):uint {
         var red:Number = 0;
         var green:Number = 0;
         var blue:Number = 0;

         var count:Number = 0;
         var pixel:Number;

         for (var x:int = 0; x < source.width; x++)
            for (var y:int = 0; y < source.height; y++)           {              pixel = source.getPixel(x, y);                     red += pixel >> 16 &amp; 0xFF;
               green += pixel >> 8 &amp; 0xFF;
               blue += pixel &amp; 0xFF;


         red /= count;
         green /= count;
         blue /= count;

         return red << 16 | green << 8 | blue;

Careful not to pass a BitmapData with transparent pixels to this function, because it will see those as black pixels and you will get a much darker color than you wanted.

Quick AS3 Webcam Capture Class

If you are feeling lazy and don’t want to look up exactly how to instantiate a webcam and use it to take a snapshot of the user… just download this and use like so. It also flips the image so the user is not completely disoriented.

The default camera size is 600 x 400, you can pass two optional params to the constructor to specify different dimensions.

var webcam:CamGrabber= new CamGrabber();
btnToPress.addEventListener(MouseEvent.CLICK, onPictureSnap, false, 0, true);

function onPictureSnap(e:MouseEvent):void{
      var userpic:Bitmap=new Bitmap(webcam.snap());

Get Adobe Flash player