Tag Archives: actionscript

Frame Differencing

Actionscript:
  1. [SWF(width = 800, height= 600)]
  2. var sw:Number = 800;
  3. var sh:Number = 600;
  4. var pixelNum:int = sw * sh;
  5. var blurAmount:Number = 10;
  6. var pnt:Point = new Point(0,0);
  7. var rect:Rectangle = new Rectangle(0,0,sw,sh);
  8.  
  9. var canvas:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  10. var buffer:BitmapData = new BitmapData(sw, sh, false, 0x000000);
  11. var feed  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  12. var prev  :BitmapData = new BitmapData(sw, sh, false, 0x000000);
  13.  
  14. var frame:Bitmap = new Bitmap(canvas, "auto", true);
  15. addChild(frame);
  16.  
  17. var cam:Camera =  Camera.getCamera();
  18. cam.setMode(sw,sh,12);
  19. var video:Video = new Video(sw, sh);
  20. video.attachCamera(cam);
  21.  
  22. cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  23.  
  24. function onActivityStart(evt:ActivityEvent):void {
  25.     addEventListener(Event.ENTER_FRAME, onRun);
  26.     cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  27. }
  28.  
  29. function onRun(evt:Event):void{
  30.     buffer.draw(video);
  31.     feed.copyPixels(buffer, rect, pnt);
  32.     buffer.draw(prev, null, null, BlendMode.DIFFERENCE);
  33.     prev.draw(video);
  34.     canvas.copyPixels(buffer, rect, pnt);
  35. }

This snippet shows a simple method to do frame differencing with a web cam. This is useful for detecting which areas of the screen have change from frame to frame. This post assumes you pretty much know what frame differencing is.


You can view an swf file here:

This is one of those things I do a good deal but never wrapped up into a library... it's easy (for me at least) to forget exactly how to set it up from scratch.

I added an extra buffer because it's pretty common that you'll want to other things aside from just frame differencing alone, so it's nice to have it all wrapped up in a buffer BitmapData that you can use elsewhere. If speed is a real concern, you can do away with the buffer and just use the canvas instead - depending on what kind of analysis your doing on the frame differenced image it may be trickier without the buffer.

Posted in BitmapData, Video, graphics algorithms, pixel manipulation | Also tagged , | 5 Comments

Functions as Object Review

Something I do a fair bit on this website is use functions as objects. Here is a simple example post on wonderfl. Timeline code and a brief description are available below.

Here is a still of what it generates and below you'll find the timeline as code:

Actionscript:
  1. [SWF(width = 500, height=500)]
  2.  
  3. var canvas:BitmapData = new BitmapData(800,800,false, 0x000000);
  4. addChild(new Bitmap(canvas,"auto",true));
  5. scaleX = scaleY = 500 / 800
  6.  
  7.  
  8. var walkerNum:int = 50;
  9. var walkers:Vector.<Function> = new Vector.<Function>(walkerNum, true);
  10.  
  11. makeWalkers();
  12. runWalkers();
  13.  
  14. function makeWalkers():void{
  15.     for (var i:int = 0; i<walkerNum; i++){
  16.         walkers[i] = makeWalker();
  17.     }
  18. }
  19. function runWalkers():void{
  20.     addEventListener(Event.ENTER_FRAME, onRun);
  21. }
  22. function onRun(evt:Event):void{
  23.     for (var i:int = 0; i<walkerNum; i++){
  24.         walkers[i]();
  25.     }
  26. }
  27.  
  28. function makeWalker(xp:Number=400, yp:Number=400):Function{
  29.     var x:Number = xp, y:Number = yp;
  30.     var rad:Number = Math.random() * 4;
  31.     var theta:Number = Math.random() * Math.PI * 2;
  32.     var speed:Number = 0.01 * Math.random() * 2
  33.     if (int(Math.random() * 2) == 1){
  34.         speed *= -1;
  35.     }
  36.     return function():void{
  37.         x += rad * Math.cos(theta);
  38.         y += rad * Math.sin(theta);
  39.         theta += speed
  40.         if (int(Math.random() * 100) == 1){
  41.             theta = Math.random() * Math.PI * 2;
  42.         }
  43.         if (x> 800 || x <0 || y> 800 || y <0){
  44.             x = xp, y = yp;
  45.         }
  46.         canvas.setPixel(x, y, 0xFFFFFF);
  47.     }
  48. }

The basic trick is to have a function return a function. The original function initializes typed local variables and the returned function has access to these values. This is one of many ways to do OOP style coding using functions alone. This is really only for fun and for speed coding reasons - it's worth noting that this method is is significantly slower than using actual classes. I still have lots of fun with it despite the downsides.

Posted in BitmapData, functions | Also tagged , | 7 Comments

Bracket Syntax Reminder

If you haven't looked at every post on this site it's possible you've missed one of my favorite actionscript features.... Bracket Syntax:

Actionscript:
  1. var s:Sprite = Sprite(addChild(new Sprite()));
  2. s["x"] = 100;
  3. s["y"] = 100;
  4.  
  5. s["graphics"]["beginFill"](0xFF0000);
  6. s["graphics"]["drawCircle"](0,0,10);
  7.  
  8. this["addChild"](s);

If you don't realize how powerful this is then there is something wrong with you (joking). If you don't see how powerful this is, take some time and think about it. You can use it to avoid lots of annoying repetitive code in state machines for instance. It's always important to keep things readable if you decide to go this route on a real project.

[EDIT ....and as Quasimondo mentioned there is a notable performance hit when using this syntax. So don't forget to keep that in mind.]


Here is a very old post showing some of the power of this trick.

Posted in dynamic, functions | Also tagged , | 4 Comments

URLVariables Replacement

Actionscript:
  1. function decode(str:String):Object {
  2.     var vars:Object={};
  3.     var parse:Array =str.split("&");
  4.     var i:int=0;
  5.     for (i = 0; i<parse.length; i++) {
  6.         var pair:Array=parse[i].split("=");
  7.         if (pair.length==2) {
  8.             vars[pair[0]]=pair[1];
  9.         }
  10.     }
  11.     return vars;
  12. }
  13.  
  14. var nameValuePairs="one=1&&two=éllo&three=1000&four=0xFF0000";
  15. var parsed:Object=decode(nameValuePairs);
  16.  
  17. trace(parsed.one);
  18. trace(parsed.two);
  19. trace(parsed.three);
  20. trace(parsed.four);
  21.  
  22. /*outputs:
  23. 1
  24. éllo
  25. 1000
  26. 0xFF0000
  27. */

Well not exactly a URLVariables replacement, but I often use the URLVariables.decode() function and find that its very picky... like if there is an extra & or something it freaks out and breaks, or if there are line returns. As a quick and simple solution the other day I wrote this function into part of a class (Model class) that I was working on. Fixed the problem and even handles Spanish characters nicely.

There is plenty of room for improvement with this simple function... feel free to post improvements in the comments.

Posted in external data, string manipulation, strings | Also tagged , | 3 Comments

Polar Coordinates Distribution

If you're at all interested in watching me free from code. I recorded a video of me coding this snippet (which is about 11 minutes long or so).

In the video I create a few functions that allow you to draw shapes like these:

Mathematically this stuff is really simple ... the free form nature of the video takes a less technical perspective as you'll see (I even made a few funny mistakes).



Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var dotNum:int = 1000;
  3. var dotRad:Number = 0.5;
  4.  
  5. x = 120
  6. y = 100;
  7.  
  8. // extra stuff to display what the functions can do
  9. stage.addEventListener(MouseEvent.CLICK, onDrawAll);
  10.  
  11. function onDrawAll(evt:Event):void{
  12.     graphics.clear();
  13.     for (var i:int = 0; i<16; i++){
  14.         var m:Number;
  15.    
  16.         var rad:Number = 120;
  17.         var xp:Number = i % 4 * rad
  18.         var yp:Number = int(i / 4) * rad
  19.    
  20.         var type:int = int(Math.random() * 4);
  21.         if (type == 0){
  22.           makeShape(xp, yp, rad-60, Math.random() , 1);
  23.         }else if (type == 1){
  24.            makeShape(xp, yp, rad-60, 1,  Math.random());
  25.         }
  26.         else if (type == 2){
  27.            m = Math.random() * 2;
  28.            makeShape(xp, yp, rad-Math.random()*120, m, m);
  29.         }
  30.         else if (type == 3){
  31.            m = Math.random() * 2;
  32.            makeShape(xp, yp, rad-Math.random()*120, m, m/2);
  33.         }
  34.     }
  35. }
  36.  
  37. // main part from the video
  38. function makeShape(xp:Number, yp:Number,
  39.                    maxRad:Number = 100,m0:Number=1,
  40.                    m1:Number=1):void{
  41.     var polarX:Number;
  42.     var polarY:Number;
  43.     var radius:Number;
  44.     graphics.lineStyle(0, 0);
  45.     var theta:Number = Math.random() * Math.PI * 2;
  46.     for (var i:int = 0; i<dotNum; i++){
  47.         radius = Math.random() * maxRad
  48.         polarX = xp + radius * Math.cos(theta * m0);
  49.         polarY = yp + radius * Math.sin(theta * m1);
  50.         theta += 0.1;
  51.          
  52.         makeDot(polarX, polarY);
  53.        
  54.     }
  55. }
  56.  
  57. function makeDot(xp:Number, yp:Number, fillColor:uint = 0x000000):void{
  58.     graphics.beginFill(fillColor);
  59.     graphics.drawCircle(xp, yp, dotRad);
  60.     graphics.endFill();
  61. }

Here it is over at wonderf:

Posted in Graphics, Math, functions, misc | Also tagged , | 4 Comments

Capturing Colors in Motion

So no one attempted to post their version for capturing saturated moving colors from a video feed.
I've had one working for some time now and based on the reactions I'm getting I think the approach I took is a relatively interesting one. Below You can watch a demo and view a descriptive diagram, as well as view the source code and and online version of the color selector.


Click for visual description and prerecorded video:



Click Here to test out a live version with your web cam...

Because we are working with a small group of developers on this project we've ported everything to processing (since that's what most everyone is using)... but here is the original actionscript code, its a tad messy but it gets the job done:

Actionscript:
  1. var bufferSize:int = 20;
  2. var blurAmount:Number = 20;
  3. var motionColor:uint = 0xFF222222;
  4. var pixelNum:int = 800 * 600;
  5.  
  6. var cam:Camera =  Camera.getCamera();
  7.  
  8. cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  9.  
  10. function onActivityStart(evt:ActivityEvent):void {
  11.     trace("start");
  12.     addEventListener(Event.ENTER_FRAME, onLoop);
  13.     cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  14. }
  15.  cam.setMode(800,600,30);
  16.  
  17. var video:Video = new Video(800, 600);
  18. video.attachCamera(cam);
  19.  
  20. var canvas:BitmapData = new BitmapData(800,600,false, 0x000000);
  21. //addChild(new Bitmap(canvas));
  22. var feed:BitmapData = new BitmapData(800,600,false, 0x000000);
  23. addChild(new Bitmap(feed));
  24.  
  25. var prev:BitmapData = new BitmapData(800,600,false, 0x000000);
  26.  
  27. var thresh:BitmapData = new BitmapData(800, 600, true, 0xFF000000);
  28. //addChild(new Bitmap(thresh));
  29. var cm = new ColorMatrixFilter([0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0,0,0,1,0]);
  30.  
  31. var threshSamples:Vector.<uint> = new Vector.<uint>();
  32. var samples:Vector.<uint> = new Vector.<uint>();
  33. var pixelSampleRate:int = 10;
  34.  
  35. var shape:Shape = Shape(addChild(new Shape()))
  36.  
  37.  
  38.  
  39. function onLoop(evt:Event):void {
  40.      
  41.         canvas.draw(video);
  42.         feed.draw(video);
  43.        
  44.         canvas.draw(prev, null, null, BlendMode.DIFFERENCE);
  45.         canvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(blurAmount, blurAmount, 1));
  46.         //canvas.applyFilter(canvas, canvas.rect, new Point(0,0), cm);
  47.         prev.draw(video);
  48.        
  49.         thresh.fillRect(thresh.rect, 0x000000);
  50.         thresh.threshold(canvas, canvas.rect, new Point(0,0), ">=", motionColor, 0xFFFF0000, 0xFF00FF00);
  51.        
  52.         threshSamples = thresh.getVector(thresh.rect);
  53.        
  54.         var cols:Array = []
  55.         var index:int = 0;
  56.         for (var i:int = 0; i<pixelNum; i+=pixelSampleRate){
  57.             if (threshSamples[i] == 0xFFFF0000){
  58.                 var col = feed.getPixel(i % 800, int(i / 800));
  59.                 var r = col>> 16 & 0xFF;
  60.                 var g = col>> 8 & 0xFF;
  61.                 var b = col & 0xFF;
  62.                 var sl = toHSB(r, g, b);
  63.                 if (sl[0]> 60 && sl[1]> 30 && sl[1] <60){
  64.                   cols[index++] = col;
  65.                 }
  66.             }
  67.         }
  68.        
  69.         if (cols.length> 0){
  70.             shape.graphics.clear();
  71.             shape.graphics.beginFill(cols[int(cols.length * Math.random())]);
  72.             shape.graphics.drawRect(0,0,100,100);
  73.         }
  74.                                                                        
  75. }
  76.  
  77. // this is from somewhere online, if I can find the link I'll post it
  78. function toHSB(R, G, B):Array{
  79.     var H, S, L
  80.     var var_R = ( R / 255 )                     //RGB from 0 to 255
  81.     var var_G = ( G / 255 )
  82.     var var_B = ( B / 255 )
  83.    
  84.     var var_Min = Math.min( var_R, var_G, var_B )    //Min. value of RGB
  85.     var var_Max = Math.max( var_R, var_G, var_B )    //Max. value of RGB
  86.     var del_Max = var_Max - var_Min             //Delta RGB value
  87.    
  88.     L = ( var_Max + var_Min ) / 2
  89.    
  90.     if ( del_Max == 0 )                     //This is a gray, no chroma...
  91.     {
  92.        H = 0                                //HSL results from 0 to 1
  93.        S = 0
  94.     }
  95.     else                                    //Chromatic data...
  96.     {
  97.        if ( L <0.5 ) S = del_Max / ( var_Max + var_Min )
  98.        else           S = del_Max / ( 2 - var_Max - var_Min )
  99.    
  100.       var del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  101.       var del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  102.       var del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  103.    
  104.        if      ( var_R == var_Max ) H = del_B - del_G
  105.        else if ( var_G == var_Max ) H = ( 1 / 3 ) + del_R - del_B
  106.        else if ( var_B == var_Max ) H = ( 2 / 3 ) + del_G - del_R
  107.    
  108.        if ( H <0 ) ; H += 1
  109.        if ( H> 1 ) ; H -= 1
  110.     }
  111.     return [ int(S * 100), int(100 * L)]
  112. }

Posted in projects | Also tagged , , | 7 Comments

Who Has the Best Button Class?

We've all done it... we've wasted way too much time writing an overly complex class just to create a simple square/roundrect button. Who has the nicest one? Post a link to yours (googlecode, wonderfl, etc...).

I've always avoided wasting too much time writing one of these but just spent 2 hours writing an overly complex one... looking forward to the way that people have done it....

For instance, did you make your class dynamic? Did you use scale9? did you use CSS? etc... Just curious how complex have gotten with it.

Posted in OOP, UI | Also tagged , , | 11 Comments

Quiz Question

Write code that pulls saturated moving colors from a web cam... that is... if you move a red coffee cup across the screen your code should capture the color red.

A few hints: frame differencing, hsb and get/setVector.

I'll post my working version tomorrow or the next day... this is a challenging one so I may give an extra day before I post my solution....

Difficulty : Medium

Posted in Quiz | Also tagged , | Leave a comment

AS Quiz #17

This quiz jumps around a bit from MovieClips to OOP.

Number of Questions : 7
Difficulty : Medium
Topic : MovieClips and OOP

Which of the below is an array of the frame labels in a given MovieClip?





When you manually nest a MovieClip in the Flash IDE, you are then able to use dot syntax to target the nested clip - for instance:

containerClip.nestedClip.play();

This is made possible in part because __________________. (fill in the blank)







True or False... Because MovieClips are dynamic, you can add properties and methods to individual instances of them at runtime.



True or False. The Object class is dynamic.



True or False... In AS3, private constructors are used to create Singletons.



True or False... Using an opening { and a closing } you can define a static initializer within a class.



Fill in the blank... To move forward one frame in a MovieClip you could use the _____________ method.








Posted in Quiz | Also tagged , , | 7 Comments

Prefix Notation (Lisp Style)

Today's quiz is not multiple choice. Instead, your task is to write a lisp style math parser. This may sound tricky, but it's surprisingly simple. (well... not simple exactly, it's just simple compared to what one might assume).

Lisp uses prefix notation... where the operator is placed before the operands:

10 * 10

becomes:

* 10 10

You could think of this as a function "*" with two arguments (10, 10). In Lisp this is enclosed with parens:

(* 10 10)

Let's see a few more examples:

100 / 2 + 10

becomes:

(+ (/ 100 2) 10)

...
2 * 4 * 6 * 7

becomes:

(* 2 4 6 7)

...

(2 + 2) * (10 - 2) * 2

becomes

(* (+ 2 2) (- 10 2) 2)

Remember, thinking "functions" really helps. The above can be though of as:

multiply( add(2, 2), subtract(10 , 2), 2)

You should create a function called parsePrefix() that takes a string and returns a number:

Here is some code to test if your parser works properly:

Actionscript:
  1. trace(parsePrefix("(* 10 10)"));
  2.  
  3. trace(parsePrefix("(* 1 (+ 20 2 (* 2 7) 1) 2)"));
  4.  
  5. trace(parsePrefix("(/ 22 7)"));
  6.  
  7. trace(parsePrefix("(+ (/ 1 1) (/ 1 2) (/ 1 3) (/ 1 4))"));
  8.  
  9. /* Should trace out:
  10. 100
  11. 74
  12. 3.142857142857143
  13. 2.083333333333333
  14. */

I highly recommend giving this a try, it was one of those cases where I assumed it would be much trickier than it was.

I've posted my solution here.

Posted in Math, Quiz | Also tagged , , , | 4 Comments