Monthly Archives: October 2009

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

Posted in BitmapData, Data Structures, 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...

Posted in BitmapData, Data Structures, misc, motion, pixel manipulation | Tagged , , | 1 Comment

Three Color Triangle

By ascontest | October 27, 2009
CLICK HERE TO COPY
Actionscript:
  1. /*
  2. *       Petri Leskinen, Finland
  3. *       25 October 2009
  4. *       pixelero.wordpress.com
  5. *
  6. *       Actionscript 3.0, Flash CS3, Flash Player 10
  7. *
  8. *       threeColorTriangle
  9. *       draws a triangle with a gradient fill of three colors for each vertex
  10. *       using graphics.drawTriangles and a BitmapData of size 2x2
  11. */
  12. function threeColorTriangle(
  13.       point0:Point, color0:uint,
  14.       point1:Point, color1:uint,
  15.       point2:Point, color2:uint):void {
  16.  
  17.       //      create a  bitmap of size 2x2 pixels
  18.       var bmd:BitmapData = new BitmapData(2,2,true);
  19.       //      copy colors to bitmap
  20.       //      the fourth color is average of color1 and color2
  21.       bmd.setVector(bmd.rect,
  22.               Vector.<uint>([color0,color1,color2,
  23.                                          (color1+color2)>>1
  24.                                          ]));
  25.  
  26.       //      draw triangle
  27.       this.graphics.beginBitmapFill(bmd,null,false,true /* =smooth */ );
  28.       this.graphics.drawTriangles(
  29.               // x,y -coordinates
  30.               Vector.<Number>([
  31.                       point0.x,point0.y,
  32.                       point1.x,point1.y,
  33.                       point2.x,point2.y]),
  34.               // indices
  35.               Vector.<int>([0,1,2]),
  36.               // texture coordinates
  37.               Vector.<Number>([0,0, 1,0, 0,1])
  38.               );
  39. }
  40.  
  41.  
  42. // demo, let's draw some of these on the stage
  43. randomize();
  44. function randomize():void {
  45.       this.graphics.clear();
  46.  
  47.       for (var i:int = 0;i<128;i++) {
  48.               //      pick some random colors
  49.               var color0:uint = 0xFFFFFFFF;
  50.               var color1:uint = 0xFFFFFF*Math.random() | 0xFF000000;
  51.               var color2:uint = 0xFFFFFF*Math.random() | 0xFF000000;
  52.  
  53.               //      random points
  54. var point0:Point = new Point(Math.random()*stage.stageWidth,
  55.             Math.random()*stage.stageHeight);
  56. var point1:Point = new Point(point0.x+200*(Math.random()-Math.random()),
  57.             point0.y+200*(Math.random()-Math.random()));
  58. var point2:Point = new Point(point0.x+200*(Math.random()-Math.random()),
  59.             point0.y+200*(Math.random()-Math.random()));
  60.  
  61.         threeColorTriangle(point0, color0, point1, color1, point2,  color2);
  62.       }
  63. }

This snippet is by Petri Leskinen (pixelero). It draws a triangle with a gradient fill of three colors for each vertex using Graphics.drawTriangles and a BitmapData of size 2x2. This is the simplest case, it can easily be extended to four colors or maybe to use a larger 3x3, 4x4 etc... bitmap.

Here's a still...

Posted in Graphics, Vector | Tagged , , , | 5 Comments

Triangular Numbers

By Zevan | October 20, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height = 500)]
  2.  
  3. var txt:TextField = TextField(addChild(new TextField()));
  4. txt.defaultTextFormat = new TextFormat("_sans", 4);
  5. txt.width = stage.stageWidth;
  6. txt.height = stage.stageHeight+4;
  7. txt.z = -1;
  8. txt.x = stage.stageWidth
  9. txt.rotation = 90;
  10. var count:int = 0;
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void{
  13.      count++;
  14.      txt.appendText(triangular(count).toString(2) + "\n");
  15.      txt.scrollV= txt.maxScrollV;
  16. }
  17. function triangular(n:int):int{
  18.        return (n * (n + 1)) / 2;
  19. }

Calculate some triangular numbers... (n * (n + 1)) / 2....

Check out the swf on wonderfl

Posted in Math, misc | Tagged , , | Leave a comment