Monthly Archives: October 2009

BitmapData Frame Texture

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)

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

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

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

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

Flowing Leaves (optical illusion)


Saw this optical illusion today... figured I'd make a snippet to create a few variations on the illusion...

Actionscript:
  1. [SWF( backgroundColor=0x2E7999, width=780, height = 600) ]
  2.  
  3. var leafNum:Number = 375;
  4. var spacing:Number = 12;
  5. var cols:Number = 25;
  6. var hh:Number = stage.stageHeight / 2;
  7. var hw:Number = stage.stageWidth / 2;
  8.  
  9. for (var i:Number = 0; i<leafNum; i++){
  10.     var leaf:Shape = makeLeaf();
  11.     leaf.scaleX = leaf.scaleY = 0.25;
  12.     leaf.rotation = 90;
  13.     leaf.x = 50 + (i % cols) * (leaf.width + spacing);
  14.     leaf.y = 40 + int(i / cols) * (leaf.height + spacing);
  15.     var dx:Number = leaf.x - hw;
  16.     var dy:Number = leaf.y - hh;
  17.     leaf.rotation = Math.sqrt(dx * dx + dy * dy);
  18. }
  19.  
  20. function makeLeaf():Shape{
  21.     var leaf:Shape = Shape(addChild(new Shape()));
  22.     leaf.graphics.beginFill(0x9DC4D4);
  23.     scaleYcircle(leaf.graphics, 50, .65, false);
  24.     leaf.graphics.endFill();
  25.     leaf.graphics.lineStyle(2, 0x003366, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  26.     scaleYcircle(leaf.graphics, 50, .65);
  27.     leaf.graphics.lineStyle(2, 0xFFFFFF, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  28.     scaleYcircle(leaf.graphics, -50, .65);
  29.     return leaf;
  30. }
  31.  
  32.  
  33. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  34. // circle that can be scaled on the y axis
  35. function scaleYcircle(g:Graphics, r:Number, s:Number = 1, isHalf:Boolean=true):void {
  36.      
  37.     var c1:Number = r * (Math.SQRT2 - 1);
  38.     var c2:Number = r * Math.SQRT2 / 2;
  39.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
  40.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
  41.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
  42.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
  43.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
  44.     g.curveTo(x_r, c1s, x_r, 0);
  45.     if (!isHalf){
  46.      g.curveTo(x_r,y_c1,x_c2,y_c2);
  47.      g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
  48.      g.curveTo(r,y_c1,r,0);
  49.     }
  50. }

Posted in Graphics, Math, Vector, misc, motion, pixel manipulation | Tagged , , , | 5 Comments

ByteArray.readUTFBytes()

Actionscript:
  1. var m:ByteArray = new ByteArray();
  2. var bytes:Array = [0x41, 0x63, 0x74, 0x69, 0x6F, 0x6E, 0x20,
  3.                    0x53, 0x6E, 0x69, 0x70, 0x70, 0x65, 0x74]
  4. for (var i:int = 0; i <bytes.length; i++){
  5.     m.writeByte(bytes[i]);
  6. }
  7.  
  8. m.position = 0;
  9.  
  10. trace(m.readUTFBytes(bytes.length));

I was messing around with a hex editor today and decided to start playing with ByteArray for the first time in awhile. Just wrote this as a little warm up... Try running it to see what it traces out...

Posted in Uncategorized | Tagged , , , | 2 Comments

Bitwise OR | and Variable Function Arguments (bitwise flags)

Actionscript:
  1. const A:uint = 1;
  2. const B:uint = 2;
  3. const C:uint = 4;
  4. const D:uint = 8;
  5. const E:uint = 16;
  6.  
  7. function orArgs(args:uint):void{
  8.     if (args & A){
  9.         trace("A");
  10.     }
  11.     if (args & B){
  12.         trace("B");
  13.     }
  14.     if (args & C){
  15.         trace("C");
  16.     }
  17.     if (args & D){
  18.         trace("D");
  19.     }
  20.     if (args & E){
  21.         trace("E");
  22.     }
  23. }
  24.  
  25. // test out the function:
  26. orArgs(A | B);
  27. trace("--");
  28. orArgs(A | C | E);
  29. trace("--");
  30. orArgs(B | E | D);
  31. trace("--");
  32. orArgs(C | A);
  33.  
  34. /* outputs:
  35. A
  36. B
  37. --
  38. A
  39. C
  40. E
  41. --
  42. B
  43. D
  44. E
  45. --
  46. A
  47. C
  48. */

If you've every used Array.sort(Array.NUMERIC | Array.DESCENDING) you should have at least a vague idea about what this snippet is doing. It shows how you can pass a variable number of arguments to a function using | (bitwise OR) and & (bitwise AND). I believe the correct term for these kind of arguments is "bitwise flags". This snippet works by having a series of constant values... in this case A - E. Each constant is assigned an unsigned integer... now you may not see the significance of the values 1, 2, 4, 8 and 16 until you see them in binary... get ready this is a pretty cryptic description...

A = 00001 = 1
B = 00010 = 2
C = 00100 = 4
D = 01000 = 8
E = 10000 = 16

If we OR all these together we get: 11111... If we do:

A | E
00001 | 10000

we end up with 10001...

...we can then check which values are stored in the resulting unsigned integer by using AND:

check for A... 10001 & 00001 = 00001 = true
check for E... 10001 & 10000 = 10000 = true
check for C... 10001 & 00100 = 00000 = false

That's it... I just guessed at the way this was being done... if you have another way to do the same thing, feel free to post it in the comments....

Posted in Math, Operators, binary, misc | Tagged , , , | 1 Comment

Bad PI Approximation

Actionscript:
  1. var inside:Number = 0
  2. var precision:Number = 1000000;
  3. for (var i:int = 0; i<precision; i++){
  4.        var xp:Number = 0.5 - Math.random();
  5.        var yp:Number = 0.5 - Math.random();
  6.        if (Math.sqrt(xp * xp + yp * yp) <0.5){
  7.                inside++;
  8.        }
  9. }
  10. trace(inside / precision * 4);
  11. // outputs : 3.143304

Someone described this bad method of a PI approximation to me the other day... figured I'd try it out... pretty funny. I always liked 22/7... but this one is definitely funnier...

Posted in Math | Tagged , , | 3 Comments

Project Time-bomb

Actionscript:
  1. var d:Date = new Date()
  2. // payment deadline
  3. var payMonth:int = 9;
  4. var payDay:int = 5;
  5. // add five days so it's not too obvious and so you can replace
  6. // the swf on their server if they do pay
  7. payDay+=5;
  8. if (d.getMonth()>= payMonth){
  9.     if (d.getDay()>= payDay){
  10.         // very nasty code to crash flash, alternately you could do anything that will break
  11.         // you app
  12.         while(1){
  13.            stage.addEventListener(Event.ENTER_FRAME, function(){ this["__"+Math.random()]=getTimer()*Math.random()});
  14.         }
  15.     }
  16. }

WARNING: This snippet and post are a JOKE. Be careful, this code could potentially cause flash a 15 second timeout in flash and will eat ram and cpu.

Have you ever had to bug a client to get paid when the site has already gone live? Sometimes the agreement you have with the client could prevent you from getting paid until 30 or even 90 days after the site is live. I generally try to avoid these types of agreements and get a chunk of 30-50% upfront, but every now and then the job is too good to pass up and I make the choice to just suck it up and wait to get paid.... anyway...

This snippet adds a time-bomb to your swf... if the client doesn't pay up... five days after the payment deadline the swf will stop working. They will be forced to contact you and you can say that they need to pay before you'll do any additional work. You can say you don't know what the problem is off the top of your head, you'll need to go in and take a look. You can say that your local version works... so maybe the online file was corrupted... but that you'll need to be paid before you can do anything else.

I'm just kidding around. Luckily, out of all the freelance jobs I've done over the years there was only one time when I didn't get paid in full...

Posted in misc | Tagged , , | 3 Comments

Is this swf in a container?

Actionscript:
  1. if(parent == stage){
  2.    // no container
  3. }else{
  4.   // has container
  5. }

Found myself writing this snippet today.... it figures out if the current swf is inside a container (Loader) or not... lots of other ways to do this... feel free to post your version in the comments...

Posted in Loader, external data, misc | Tagged , , | 5 Comments