Category Archives: misc

IGraphicsData Example

By Zevan | June 13, 2009
CLICK HERE TO COPY
Actionscript:
  1. // note the high framerate for testing purposes
  2. [SWF(width = 800, height = 600, frameRate=60)]
  3. // red, yellow, blue
  4. var fills:Vector.<IGraphicsData> = Vector.<IGraphicsData>([new GraphicsSolidFill(0xFF0000),  new GraphicsSolidFill(0xFFCC00), new GraphicsSolidFill(0x0033FF)]);
  5.  
  6. var stroke:IGraphicsData = new GraphicsStroke();
  7.  
  8. var cmds:Vector.<int> = new Vector.<int>();
  9. var ci:int = 0;
  10. var dat:Vector.<Number> = new Vector.<Number>();
  11. var di:int = 0;
  12. var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
  13. var ig:int  = 0;
  14. var path:Vector.<GraphicsPath> = new Vector.<GraphicsPath>();
  15. var boxNum:int = 1500;
  16. var locX:Vector.<Number> = new Vector.<Number>(boxNum);
  17. var locY:Vector.<Number> = new Vector.<Number>(boxNum);
  18. var velX:Vector.<Number> = new Vector.<Number>(boxNum);
  19. var velY:Vector.<Number> = new Vector.<Number>(boxNum);
  20. var cols:int = 50;
  21. for (var i:int = 0; i<boxNum; i++){
  22.     path[i] = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());
  23.     path[i].winding = GraphicsPathWinding.NON_ZERO;
  24.     var theta:Number = i * Math.PI/180;
  25.     var sin:Number = Math.cos(theta);
  26.     var cos:Number =  Math.sin(theta);
  27.     var r:Number = Math.random()*100;
  28.     var vr:Number = r * 0.05;
  29.     velX[i] = vr * cos;
  30.     velY[i] = vr * sin;
  31.     locX[i] = 400 + r * cos;
  32.     locY[i] = 300 + r * sin;
  33. }
  34.  
  35. // box vars
  36. var xp:Number, yp:Number, size:Number, hs:Number;
  37. // corners
  38. var x0:Number, y0:Number, x1:Number, y1:Number;
  39.  
  40. addEventListener(Event.ENTER_FRAME, onLoop);
  41. function onLoop(evt:Event):void {
  42.     graphics.clear();
  43.     ig = 0;
  44.     for (i= 0; i<boxNum; i++){
  45.         // inline function:
  46.         locX[i] += velX[i];
  47.         locY[i] += velY[i];
  48.         xp = locX[i];
  49.         yp = locY[i];
  50.         if (xp <0 || xp> 800){
  51.             velX[i] *= -1;
  52.         }
  53.         if (yp <0 || yp> 600){
  54.             velY[i] *= -1;
  55.         }
  56.         size = 10 + i % 10;
  57.         hs = size * 0.5;
  58.         x0 = xp - hs, y0 = yp - hs;
  59.         x1 = xp + hs, y1 = yp + hs;
  60.         ci = 0;
  61.         di = 0;
  62.         cmds = path[i].commands;
  63.         dat = path[i].data;
  64.         // GraphicsPathCommand.MOVE_TO
  65.         cmds[ci++] = 1;
  66.         dat[di++] = x0 , dat[di++] = y0;
  67.         // GraphicsPathCommand.LINE_TO
  68.         cmds[ci++] = 2;
  69.         dat[di++] = x1 , dat[di++] = y0;
  70.         // GraphicsPathCommand.LINE_TO
  71.         cmds[ci++] = 2;
  72.         dat[di++] = x1 , dat[di++] = y1;
  73.         // GraphicsPathCommand.LINE_TO
  74.         cmds[ci++] = 2;
  75.         dat[di++] = x0 , dat[di++] = y1;
  76.         // end inline function
  77.          
  78.         path[i].commands = cmds;
  79.         path[i].data = dat;
  80.         igraph[ig++] = fills[i % 3];
  81.         igraph[ig++] = path[i];
  82.     }
  83.     // everything is drawn with one function call
  84.     graphics.drawGraphicsData(igraph);
  85. }

I haven't spent much time with IGraphicsData. It's a very cool feature and I think its going to take me awhile to realize its full potential. Since I have to start somewhere I decided to write this snippet to show that it is rather fast. I also recalled reading some benchmark info for the new fp10 graphics stuff over at bytearray.org.... pretty nice info there...

This snippet is pretty optimized, there are a few areas (such as the recurring population of the cmds Vector) that could be optimized more but are left this way for SOME flexibility.

Also posted in Graphics, Vector, motion | Tagged , , | Leave a comment

Strange BitmapData Drawing Instructions

By Zevan | June 8, 2009
CLICK HERE TO COPY
Actionscript:
  1. // instructions
  2. var ins:Array = [0,
  3. -1, 100, 200, 3, 100, 0, 50, 1, 100, -1, 100, 150, 0, 50,
  4. -1, 160, 200, 0, 50, 3, 50, 2, 50, 3, 50, 0, 50,
  5. -1, 220, 200, 0, 50, 3, 50, 2, 50, -1, 270, 150, 3, 50, 2, 50];
  6.  
  7. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  8. addChild(new Bitmap(canvas));
  9.  
  10. var index:int = 0;
  11. var penX:int = 0;
  12. var penY:int = 0;
  13.  
  14. read();
  15.  
  16. function read():void{
  17.     var i:int, xp:int, yp:int;
  18.     if (ins[index+1] == -1){
  19.          index++;
  20.         xp = ins[++index];
  21.         yp = ins[++index];
  22.     }else{
  23.         xp = penX;
  24.         yp = penY;
  25.     }
  26.     var dir:int = ins[index];
  27.     var leng:int = ins[++index];
  28.     for (i = 0; i<leng; i++){
  29.         if (dir == 0){
  30.             xp += 1;
  31.         }else if (dir == 1){
  32.             yp += 1;
  33.         }else if (dir == 2){
  34.             xp -= 1;
  35.         }else if (dir == 3){
  36.             yp -= 1;
  37.         }
  38.         canvas.setPixel(xp, yp, 0x000000);
  39.      }
  40.      penX = xp;
  41.      penY = yp;
  42.     if (index <ins.length){
  43.         read();
  44.     }
  45. }

I was thinking today about alternative ways to represent drawings and I wrote this snippet while brainstorming. The function read() looks through an array of instructions (ins[]) and draws an image. In this case the letters AS3 are drawn to a Bitmap using setPixel().

The instructions work like this:

The first value of the array is ignored - it can be set to 0, or used to store some other info.
If the next value is a -1, the following two values in the array are used as a sort of moveTo().
This is followed by a direction value 0 = right, 1 = down, 2 = left, 3 = up.
Lastly there is a length value in pixels.

If no -1 is found, the read() function assumes that the value is for a direction.

So to draw a line from (100, 100) to (150, 100) you would write:
[0, -1, 100, 100, 0, 50]

To then draw a line down 50 pixels from the endpoint of the previous line you would add 1 (move down), 50 (length 50)... so you to end up with:
[0, -1, 100, 100, 0, 50, 1, 50]

and so on...

I'm not sure really where I was going with this, but it was fun to write...

Also posted in setPixel | Tagged , , | Leave a comment

QuickBox2D Tetris Pieces

By Zevan | June 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. [SWF(backgroundColor=0x000000, width=700, height=600, frameRate=60)]
  4.  
  5. var sim:QuickBox2D = new QuickBox2D(this);
  6.  
  7. sim.setDefault({fillColor:0x003366, lineColor:0x2B80D5, isBullet:true});
  8. sim.createStageWalls();
  9.  
  10. var shapes:Array = [];
  11. shapes[0] = [[1,1,1,1]];
  12. shapes[1] = [[1, 0, 0], [1, 1, 1]];
  13. shapes[2] = [[0, 0, 1], [1, 1, 1]];
  14. shapes[3] = [[1, 1], [1, 1]];
  15. shapes[4] = [[0, 1, 1], [1, 1, 0]];
  16. shapes[5] = [[0, 1, 0], [1, 1, 1]];
  17. shapes[6] = [[1, 1, 0], [0, 1, 1]];
  18. var cols:Array = [0xFF0000,  0xFFFF00, 0xFF00FF, 0x0000FF, 0x00FF00,0x00FFFF, 0x00FF00,0xFAA703];
  19. var angs:Array =  [0, Math.PI / 2, Math.PI, Math.PI + Math.PI / 2];
  20. var bev:BevelFilter = new BevelFilter();
  21. with (bev) blurX = 10, blurY = 10, strength = 0.5;
  22.  
  23. var inc:int = 9;
  24. for (var i:int = 0; i<shapes.length; i++){
  25.     sim.setDefault({fillColor:cols[inc % cols.length]});
  26.     inc++
  27.     makePiece(shapes[i], 3 + i * 3, 3);
  28.     sim.setDefault({fillColor:cols[inc % cols.length]});
  29.     inc++
  30.     makePiece(shapes[i], 3 + i * 3, 8);
  31. }
  32.  
  33. function makePiece(pattern:Array, xp:Number, yp:Number, scale:Number = 0.7):QuickObject{
  34.     var parts:Array = [];
  35.     for (var i:int = 0; i<pattern.length; i++){
  36.         for (var j:int = 0; j<pattern[i].length; j++){
  37.             if (pattern[i][j] == 1){
  38.                 parts.push(sim.addBox({x:j * scale, y:i * scale, width:scale, height:scale, restitution:0, friction:1, isBullet:true}));
  39.             }
  40.         }
  41.     }
  42.     var ang:Number = angs[int(Math.random()*angs.length)];
  43.     var piece:QuickObject =  sim.addGroup({objects:parts, x:xp, y:yp, angle:ang});
  44.    
  45.     piece.userData.filters = [bev];
  46.     return piece;
  47. }
  48.  
  49. sim.start();
  50. sim.mouseDrag();

This snippet uses the QuickBox2D library to create some Tetris pieces.


Have a look at the swf here...

Also posted in Box2D, QuickBox2D | Tagged , , , | 3 Comments

Tetris Sand CA

By Zevan | June 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. scaleX = scaleY = 2.5;
  3. var canvas:BitmapData = new BitmapData(200,200,false, 0x000000);
  4. addChild(new Bitmap(canvas));
  5. var w:int = canvas.width;
  6. var size:int = canvas.width * canvas.height;
  7. var read:Vector.<uint> = new Vector.<uint>(size);
  8. var write:Vector.<uint> = new Vector.<uint>(size);
  9.  
  10. read = canvas.getVector(canvas.rect);
  11. var loc:int = 199*w;
  12. for(var i:int = 0; i <= 200; i++){
  13.        read[loc+i]=0xFFFFFFFF;
  14. }
  15. write = read.concat();
  16.  
  17. var shapes:Array = [];
  18. shapes[0] = [[1,1],[1,1]];
  19. shapes[1] = [[1,1,1,1]];
  20. shapes[2] = [[1],[1],[1],[1]];
  21. shapes[3] = [[1,1,1],[0,1,0]];
  22. shapes[4] = [[1,0],[1,1],[1,1],[0,1]];
  23. shapes[5] = [[1,0,0],[1,1,1]];
  24. shapes[6] = [[1,1,0], [0,1,1]];
  25. shapes[7] = [[1,1], [1,0],[1,0]];
  26. function drawShape(xp:int, yp:int, pattern:Array, col:uint):void{
  27.     var i:int = 0;
  28.     var loc:int = xp + yp * w;
  29.     if (int(Math.random()*2) == 1){
  30.         pattern.reverse();
  31.     }
  32.     if (int(Math.random()*2)){
  33.         for (i= 0; i<pattern.length; i++){
  34.             pattern[i].reverse();
  35.         }
  36.     }
  37.     for (i = 0; i<pattern.length; i++){
  38.          for (var j:int = 0; j<pattern[i].length; j++){
  39.              if (pattern[i][j] == 1){
  40.                 write[loc + i * w + j] = col;
  41.              }
  42.         }
  43.     }
  44. }
  45.  
  46. var counter:int = 0;
  47. addEventListener(Event.ENTER_FRAME, onLoop);
  48. function onLoop(evt:Event):void {
  49.      var i:int;
  50.      canvas.lock();
  51.      if (counter % 20 == 1){
  52.         for ( i= 0; i<20; i++){
  53.              drawShape(5+  i * 10, 10, shapes[int(Math.random() * shapes.length)], Math.random()*0xFFFFFF);
  54.         }
  55.      }
  56.      counter++;
  57.      read = write.concat();
  58.      for (i = 0; i<size; i++){
  59.          var curr:uint = read[i];
  60.          if (curr != 0xFF000000 && curr != 0xFFFFFFFF){
  61.             var below:uint = read[i + w];
  62.             if (below == 0xFF000000 || below == curr){
  63.               var above:uint = read[i - w];
  64.               if (above == 0xFF000000){
  65.                  write[i] = 0xFF000000;
  66.               }
  67.               write[i + w] = curr;
  68.             }else{
  69.                 var index:uint;
  70.                 if (int(Math.random()*2) == 1){
  71.                     index = i + w - 1;
  72.                 }else{
  73.                     index = i + w + 1;
  74.                 }
  75.                 if (read[index] == 0xFF000000){
  76.                     write[index] = curr;
  77.                 }
  78.             }
  79.          }
  80.      }
  81.      canvas.setVector(canvas.rect, write);
  82.      canvas.unlock();
  83. }

Quickly thrown together sand cellular automata - with some tetris shapes.

Also posted in BitmapData, Vector | Tagged , , | Leave a comment