Category Archives: BitmapData

Gumowski/Mira Pseudo-Soundwave

By Zevan | June 30, 2012
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  4.  
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  8.  
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  12.  
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  17.  
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  19.  
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  22.  
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  25.  
  26. var pnt:Point = new Point();
  27.  
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  30.                                                       
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.    
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  35.  
  36.     a = mouseY / 1000;
  37.     xn1 = mouseX / 30;
  38.     yn1 = 0;
  39.     for (var i:int = 0; i<iterations; i++){
  40.           xn = xn1;
  41.           yn = yn1;
  42.          
  43.           xn1 = b * yn + f(xn);
  44.           yn1 =  -xn + f(xn1);
  45.           pnt.x = i * step;
  46.           pnt.y = 300 + yn1 * scale;
  47.           canvas.copyPixels(dot, dot.rect, pnt, null, null, true);
  48.        
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

Also posted in Graphics, Math, graphics algorithms | Leave a comment

Frame Differencing

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

Also posted in Video, graphics algorithms, pixel manipulation | Tagged , , | 5 Comments

Functions as Object Review

By Zevan | March 10, 2010

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:

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

Also posted in functions | Tagged , , | 7 Comments

Too Many Buttons

By Zevan | January 4, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF (width = 500, height = 500)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var indexCanvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  7.  
  8. var btnNum:int = 5000;
  9. var info:Array = [];
  10.  
  11. var brush:BitmapData = new BitmapData(10,10,false, 0xCCCCCC);
  12. var border:Shape = new Shape();
  13. border.graphics.lineStyle(2, 0x000000);
  14. border.graphics.drawRect(0,0,10,10);
  15. brush.draw(border);
  16.  
  17. var txt:TextField = TextField(addChild(new TextField()));
  18. with (txt) height = 20, width = 50, background = 0xFFFFFF, selectable = false
  19. var tf:TextFormat = new TextFormat();
  20. tf.align = TextFormatAlign.RIGHT;
  21. txt.border= true;
  22. txt.defaultTextFormat = tf;
  23.  
  24. var redRect:Shape = Shape(addChild(new Shape()));
  25. with (redRect.graphics) beginFill(0xFF0000), drawRect(0,0,10,10);
  26.                                              
  27. var pnt:Point = new Point();
  28. var r:Rectangle = new Rectangle(0,0,10,10);
  29. for (var i:int = 0; i <btnNum; i++){
  30.     pnt.x = r.x = int(Math.random() * stage.stageWidth);
  31.     pnt.y = r.y = int(Math.random() * stage.stageHeight);
  32.     indexCanvas.fillRect(r, i);
  33.     canvas.copyPixels(brush, brush.rect, pnt)
  34.     info[i] = [r.x, r.y, i];   
  35. }
  36.  
  37. addEventListener(Event.ENTER_FRAME, onCheckBtns);
  38. function onCheckBtns(evt:Event):void{
  39.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  40.    if (currentIndex != 0xFFFFFF){
  41.      var currentBox:Array = info[currentIndex]
  42.      redRect.visible = true;
  43.      redRect.x = currentBox[0];
  44.      txt.y = redRect.y = currentBox[1];
  45.      if (mouseX <txt.width){
  46.          tf.align = TextFormatAlign.LEFT;
  47.          txt.defaultTextFormat = tf;
  48.          txt.x = redRect.x + 10;
  49.      }else{
  50.          tf.align = TextFormatAlign.RIGHT;
  51.          txt.defaultTextFormat = tf;
  52.          txt.x = redRect.x - txt.width;
  53.      }
  54.      txt.text = currentBox[2];
  55.      txt.visible = true;
  56.    }else{
  57.      redRect.visible = false;
  58.      txt.visible = false;
  59.    }
  60. }

This is a simplified example of the technique discussed in yesterdays post. The idea is to use a BitmapData image to store index values for a large number of elements that need to be able to act as if the have MouseEvents. For a more detailed description of this technique see yesterdays post.

Have a look at the swf on wonderfl

Also posted in arrays, misc | Tagged , , | Leave a comment