Tag Archives: flash

URLVariables Replacement

By Zevan | March 8, 2010
CLICK HERE TO COPY
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

Polygon Problems

By Zevan | March 5, 2010

Lots of people have mentioned that they have problems with QuickBox2D Polygons. The simple solution is not to use the verts 2d array (which is more like how Box2D does polys). So when in doubt about polygons, simply use the points array which will nearly always work as long as the contour you define does not cross over itself. Here is a simple example on wonderfl:

Also... polygons are covered extensively in part two of the tutorial over at active tuts... more on that later.

Here is the timeline code:

CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.             /*
  3.                0
  4.               / \
  5.              0_0 0
  6.                | |
  7.                0-0
  8.             */
  9.             var sim:QuickBox2D = new QuickBox2D(this);
  10.             sim.createStageWalls();
  11.             // define the contour of your poly
  12.             // no limits as long as it doesn't cross over
  13.             // itself
  14.             sim.addPoly({x:10, y:5, points:[0.5,0,
  15.                                             1, 1,
  16.                                             1, 2,
  17.                                             0.5, 2,
  18.                                             0.5, 1,
  19.                                             0,1,
  20.                                             0.5,0],
  21.                                             wireframe:false});
  22.             sim.addCircle({x:11, y:10});
  23.             sim.start();
  24.             sim.mouseDrag();

Posted in Uncategorized | Also tagged , , | Leave a comment

Polar Coordinates Distribution

By Zevan | March 3, 2010

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).



CLICK HERE TO COPY
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

By Zevan | February 27, 2010

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:

CLICK HERE TO COPY
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