Category Archives: Data Structures

~20,000 Rollovers

By Zevan | January 3, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height = 500, frameRate = 30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  4.  
  5. var indexCanvas:BitmapData = new BitmapData(stage.stage.stageWidth, stage.stageHeight, false,
  6.                                             0xFFFFFF);
  7. addChild(new Bitmap(canvas));
  8.  
  9. var s:Shape = new Shape();
  10.  
  11. var lineData:Array = [];
  12. var dataIndex:int = 0;
  13.  
  14. trace(0xFFFFFF - 1)
  15. var totalLines:int = 20000;
  16. var iterations:int = 9;
  17. var linesPerIter:int = totalLines / iterations;
  18.  
  19. var xp:int = stage.stageWidth / 2;
  20. var yp:int = stage.stageHeight / 2;
  21.  
  22. var stepAmt:Number = 60;
  23. var halfStepAmt:Number = stepAmt / 2;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onDraw);
  26. function onDraw(evt:Event):void {
  27.      if (lineData.length <totalLines){
  28.         generateData(linesPerIter);
  29.      }else{
  30.         stage.quality = "high";
  31.         addChild(s);
  32.         s.x = 0;
  33.         s.y = 0;
  34.          
  35.         removeEventListener(Event.ENTER_FRAME, onDraw);
  36.         addEventListener(Event.ENTER_FRAME, onRun);
  37.      }
  38. }
  39.  
  40. function onRun(evt:Event):void {
  41.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  42.    var currentLine:Array = lineData[currentIndex];
  43.    
  44.    s.graphics.clear();
  45.    if (currentIndex != 0xFFFFFF){
  46.           s.graphics.lineStyle(3, 0xFF0000);
  47.           s.graphics.moveTo(currentLine[0], currentLine[1]);
  48.           s.graphics.lineTo(currentLine[2], currentLine[3]);  
  49.    }
  50. }
  51.  
  52. function generateData(num:int):void{
  53.     var rxA:int, rxB:int, ryA:int, ryB:int;
  54.     var g:Graphics = s.graphics;
  55.     for (var i:int = 0; i<num; i++){
  56.         rxA = xp;
  57.         ryA = yp;
  58.        
  59.         xp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  60.         yp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  61.        
  62.         if (xp> stage.stageWidth){
  63.             xp = stage.stageWidth - halfStepAmt;
  64.         }else
  65.         if (xp <0){
  66.             xp = halfStepAmt;
  67.         }
  68.         if (yp> stage.stageHeight){
  69.             yp = stage.stageHeight - halfStepAmt;
  70.         }else
  71.         if (yp <0){
  72.             yp = halfStepAmt;
  73.         }
  74.        
  75.         rxB = xp;
  76.         ryB = yp;
  77.          
  78.         lineData[dataIndex] = [rxA, ryA, rxB, ryB];            
  79.         s.x = rxA;
  80.         s.y = ryA;
  81.         var endX:Number = rxB - rxA;
  82.         var endY:Number = ryB - ryA;
  83.         var m:Matrix = s.transform.matrix;
  84.         g.clear();
  85.         g.lineStyle(1, 0x000000, 0.3);
  86.  
  87.         g.lineTo(endX, endY);
  88.         stage.quality = "high";
  89.         canvas.draw(s, m);
  90.        
  91.         g.clear();
  92.         g.lineStyle(3, dataIndex);
  93.        
  94.         g.lineTo(endX, endY);
  95.         stage.quality = "low";
  96.         indexCanvas.draw(s, m);
  97.        
  98.         dataIndex++
  99.     }
  100. }

I'm working on a data visualization that contains a long path made up of approximately one million points. There is some information associated with every two sets of coordinates that needs to be displayed when the user rolls their mouse over any part of the line.

I took a little time to think about the best way to do this and came up with a few techniques. The first one I tried seems to work nicely - this snippet is the proof of concept for that first technique. I tested this snippet with 1,000,000 xy coordinates and it works nicely. It takes a little while to draw though, so for the purposes of this demo I've just included 20,000 coordinates.

Have a look at the swf over at wonderfl.net

The way this works is by drawing lines to two different BitmapData instances. I draw anti-aliased slightly transparent lines to a BitmapData instance called "canvas" (this is added to the display list) - I then draw aliased lines to a BitmapData called "indexCanvas" (this is never added to the display list) - each aliased line uses an incremental value for its color - this incremental value is also the index for a two dimensional array containing the coordinate information for the aliased line. I use getPixel() on the "indexCanvas" and use the return value as the index for the 2D array. The data from the 2D array is used to draw a red line with the graphics class. This technique enables you to have many many rollovers and all you ever have to do is call getPixel() and use the returned color value to look up info about what you're mouse is touching.

There are a few cool ways this could be repurposed and this is really only one solution to the problem of having many many things that you need to be able to rollover... there are others that don't use BitmapData at all... I may write those up in the next couple of days.

Also posted in BitmapData, UI, arrays, display list, graphics algorithms, matrix, misc, pixel manipulation, return values | Tagged , , | 2 Comments

BitmapData Frame Texture

By Zevan | October 31, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 800, height = 600)]
  2. var circle:Shape = new Shape();
  3. var radius:Number = 4;
  4. var diameter:Number = radius * 2;
  5. var diam4:Number = diameter * 4;
  6. with(circle.graphics) beginFill(0x000000), drawCircle(diameter,diameter,radius);
  7. circle.filters = [new BlurFilter(5, 5, 2)];
  8.  
  9. var currFrame:Frame;
  10.  
  11. // populate the linked list
  12. generateAnimation();
  13.  
  14. var animationNum:int = 8000;
  15. var animation:Vector.<Frame> = new Vector.<Frame>();
  16. var locs:Vector.<Point> = new Vector.<Point>();
  17. // populate locs and animation
  18. while(animation.length <animationNum){
  19.        currFrame = currFrame.next;
  20.        animation.push(currFrame);
  21.        locs.push(new Point(Math.random() * stage.stageWidth - radius,
  22.                            Math.random() * (stage.stageHeight+diam4) - diam4));
  23. }
  24.  
  25. var rect:Rectangle = animation[0].bitmap.rect;
  26. var bottom:Number = stage.stageHeight + rect.height;
  27. var top:Number = -rect.height;
  28.  
  29. var canvas:BitmapData = new
  30. BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  31. addChild(new Bitmap(canvas));
  32.  
  33. addEventListener(Event.ENTER_FRAME, onLoop);
  34. function onLoop(evt:Event):void {
  35.        // clear the canvas
  36.        canvas.fillRect(canvas.rect, 0x222222);
  37.        // draw the current frame
  38.        for (var i:int = 0; i<animationNum; i++){
  39.                var ani:Frame = animation[i];
  40.                var pnt:Point = locs[i];
  41.                canvas.copyPixels(ani.bitmap, rect, pnt, null, null, true);
  42.                // get the next frame of the animation
  43.                pnt.y += 1;
  44.                if (pnt.y> bottom){
  45.                    pnt.y = top;
  46.                }
  47.                animation[i] = ani.next;
  48.        }
  49.  
  50. }
  51.  
  52. // generate and capture 40 bitmaps by altering the colorTransform of
  53.  
  54. function generateAnimation():void{
  55.        var channel:uint = 0;
  56.        var ct:ColorTransform = new ColorTransform();
  57.        var increase:Boolean = true;
  58.        var firstFrame:Frame;
  59.        var pFrame:Frame;
  60.        for (var i:int = 0; i<40; i++){
  61.                if (increase){
  62.                   channel += 10.25;
  63.                   if (channel> 200){
  64.                          increase = false;
  65.                   }
  66.                }else{
  67.                   channel -= 10;
  68.                }
  69.                ct.color = channel <<16 | channel <<8 | channel;
  70.                circle.transform.colorTransform = ct;
  71.                
  72.                // populate linked list
  73.                currFrame = capture(circle);
  74.                if (pFrame){
  75.                   pFrame.next = currFrame;
  76.                }
  77.                if (i == 0){
  78.                   firstFrame = currFrame;
  79.                }
  80.                pFrame = currFrame;
  81.        }
  82.        // close the list
  83.        currFrame.next = firstFrame;
  84.        currFrame = firstFrame;
  85. }
  86.  
  87. // create the Frame instance and draw the circle to it
  88. // preserving the colorTransform information
  89. function capture(target:Shape):Frame{
  90.        var frame:Frame = new Frame();
  91.        frame.bitmap = new BitmapData(target.width*2, target.height*2, true, 0x000000000);
  92.        frame.bitmap.draw(target, target.transform.matrix, target.transform.colorTransform);
  93.        return frame;
  94. }

This is a variation on the last post. It captures 40 small bitmaps of a blurred circle fading in and out and then draws 8000 of them to the stage.


Have a look at the swf...

Also posted in BitmapData, Vector | 1 Comment

BitmapData Frame Animation (w/ linked list)

By Zevan | October 29, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 100, height = 100)]
  2. var circle:Shape = new Shape();
  3. with(circle.graphics) beginFill(0x000000), drawCircle(20,20,20);
  4.  
  5. var currFrame:Frame;
  6.  
  7. // populate the linked list
  8. generateAnimation();
  9.  
  10. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  11. addChild(new Bitmap(canvas));
  12. var loc:Point = new Point(20, 20);
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.     // clear the canvas
  17.     canvas.fillRect(canvas.rect, 0x000000);
  18.     // draw the current frame
  19.     canvas.copyPixels(currFrame.bitmap, currFrame.bitmap.rect, loc, null, null, true);
  20.     // get the next frame of the animation
  21.     currFrame = currFrame.next;
  22. }
  23.  
  24. // generate and capture 40 bitmaps by altering the colorTransform of the circle shape
  25. function generateAnimation():void{
  26.     var channel:uint = 0;
  27.     var ct:ColorTransform = new ColorTransform();
  28.     var increase:Boolean = true;
  29.     var firstFrame:Frame;
  30.     var pFrame:Frame;
  31.     for (var i:int = 0; i<40; i++){
  32.         if (increase){
  33.            channel += 10;
  34.            if (channel == 200){
  35.               increase = false;  
  36.            }
  37.         }else{
  38.            channel -= 10;
  39.         }
  40.         ct.color = channel <<16 | channel <<8 | channel;
  41.         circle.transform.colorTransform = ct;
  42.         // populate linked list
  43.         currFrame = capture(circle);
  44.         if (pFrame){
  45.            pFrame.next = currFrame;
  46.         }
  47.         if (i == 0){
  48.            firstFrame = currFrame;
  49.         }
  50.         pFrame = currFrame;
  51.     }
  52.     // close the list
  53.     currFrame.next = firstFrame;
  54.     currFrame = firstFrame;
  55. }
  56.  
  57. // create the Frame instance and draw the circle to it
  58. // preserving the colorTransform information
  59. function capture(target:Shape):Frame{
  60.     var frame:Frame = new Frame();
  61.     frame.bitmap = new BitmapData(target.width, target.height, true, 0x00000000);
  62.     frame.bitmap.draw(target, null, target.transform.colorTransform);
  63.     return frame;
  64. }

Requires this little Frame class

CLICK HERE TO COPY
Actionscript:
  1. package {
  2.     import flash.display.*;
  3.     final public class Frame{
  4.         public var bitmap:BitmapData;
  5.         public var next:Frame;
  6.     }
  7. }

This is a small test I did today to see how easy it would be to use a circular linked list to loop an animation of bitmaps. I did this because I was thinking about using some animated sprites in conjunction with Utils3D.projectVectors() to do an orthographic 3D demo with lots of animating sprites. In the past I've had up to 7,000 animated sprites running nicely using arrays and copyPixels... figured it would be interesting to try and do the same with a circular linked list.

When compiled, this test simply draws a circle that fades from black to gray and back again... Pretty boring, but I threw it up over at wonderfl anyway... check it out.

I recently saw a few tweets (forget who from) about using the final keyword on linked list nodes... haven't tested it myself but it's supposed to be faster...

Also posted in BitmapData, misc, motion, pixel manipulation | Tagged , , | 1 Comment