Tag Archives: as3

Vectorpark Style Hemisphere

By Zevan | June 10, 2009
CLICK HERE TO COPY
Actionscript:
  1. const TWO_PI:Number = Math.PI * 2;
  2. const PI_HALF_PI:Number = Math.PI + Math.PI / 2;
  3. x = stage.stageWidth / 2;
  4. y = stage.stageHeight / 2;
  5.  
  6. var runHemisphere:Function = makeHemisphere(0,0, 100,0xFF0000, 0xFFCC00);
  7. var dx:Number = 0;
  8. var dy:Number = 0;
  9.  
  10. addEventListener(Event.ENTER_FRAME, onLoop);
  11. function onLoop(evt:Event):void {
  12.     dx += (mouseX / 50 - dx) / 4;
  13.     dy += (mouseY - dy) / 4;
  14.     runHemisphere(dx, dy);
  15. }
  16. function makeHemisphere(x:Number, y:Number, size:Number, colA:uint, colB:uint):Function{
  17.     var s:Sprite = Sprite(addChild(new Sprite()));
  18.     s.x = x;
  19.     s.y = y;
  20.     var bg:Sprite = Sprite(s.addChild(new Sprite()));
  21.    
  22.     with (bg.graphics) clear(), beginFill(colA), halfCircle(bg.graphics, 0,0 , size);
  23.     var scol:uint = colB;
  24.     var slice:Sprite = Sprite(s.addChild(new Sprite()));
  25.     return function(theta:Number, rot:Number){
  26.          theta %= TWO_PI;
  27.         if (theta <0){
  28.             theta = TWO_PI - -theta;
  29.         }
  30.         var scale:Number = Math.cos(theta);
  31.         if (theta> 1.57){
  32.             scol = colA;
  33.         } else {
  34.             scol = colB;
  35.         }
  36.         if (theta> Math.PI){
  37.             bg.rotation = 180;
  38.         }else{
  39.             bg.rotation = 0;
  40.         }
  41.         if (theta> PI_HALF_PI){
  42.             scol = colB;
  43.         }
  44.         with(slice.graphics) clear(), beginFill(scol), scaleYcircle(slice.graphics,size, scale);
  45.         s.rotation = rot;
  46.     }
  47. }
  48. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  49. function halfCircle(g:Graphics, x:Number,y:Number,r:Number):void {
  50.     var c1:Number = r * (Math.SQRT2 - 1);
  51.     var c2:Number = r * Math.SQRT2 / 2;
  52.     var xr:Number = x + r, yr:Number = y + r;
  53.     var x_r:Number = x - r, yc1:Number = y + c1;
  54.     var yc2:Number = y + c2, xc1:Number = x + c1, xc2:Number = x + c2;
  55.     var x_c1:Number = x - c1;
  56.     g.moveTo(xr, y);
  57.     g.curveTo(xr, yc1, xc2, yc2);
  58.     g.curveTo(xc1, yr, x, yr);
  59.     g.curveTo(x - c1,yr, x - c2, yc2);
  60.     g.curveTo(x_r, yc1, x_r, y);
  61. }
  62. // circle that can be scaled on the y axis
  63. function scaleYcircle(g:Graphics, r:Number, s:Number = 1):void {
  64.     var c1:Number = r * (Math.SQRT2 - 1);
  65.     var c2:Number = r * Math.SQRT2 / 2;
  66.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
  67.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
  68.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
  69.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
  70.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
  71.     g.curveTo(x_r, c1s, x_r, 0), g.curveTo(x_r,y_c1,x_c2,y_c2);
  72.     g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
  73.     g.curveTo(r,y_c1,r,0);
  74. }

The above snippet draws a 3D hemisphere using a technique I first saw at vectorpark.com. Vectorpark.com has been around for years and it's an amazing site... if you've never seen it before I highly recommend spending some time there...

When I decided to post the half-circle snippet yesterday... I knew I would be writing this today. It's one of those things I've always thought about doing, but never gotten around to. I show vectorpark.com to my animation class (almost no coding in that class) and we emulate some of the 3D techniques for simple primitives with pure timeline animation. The above is the first time I've tried to emulate one of these techniques with code.

I was pleasantly surprised when visiting vectorpark.com this morning... Patrick Smith has posted some new work there. Really excellent stuff...

UPDATE:
Katopz converted this to a doc class and put it up on wonderfl...

Posted in 3D, Graphics | Also tagged , | 6 Comments

Drawing a Half-Circle

By Zevan | June 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. graphics.beginFill(0xFF0000);
  2. halfCircle(graphics, 200,200, 100);
  3. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  4. function halfCircle(g:Graphics, x:Number,y:Number,r:Number):void {
  5.     var c1:Number=r * (Math.SQRT2 - 1);
  6.     var c2:Number=r * Math.SQRT2 / 2;
  7.     g.moveTo(x+r,y);
  8.     g.curveTo(x+r,y+c1,x+c2,y+c2);
  9.     g.curveTo(x+c1,y+r,x,y+r);
  10.     g.curveTo(x-c1,y+r,x-c2,y+c2);
  11.     g.curveTo(x-r,y+c1,x-r,y);
  12.     // comment in for full circle
  13.     /*g.curveTo(x-r,y-c1,x-c2,y-c2);
  14.     g.curveTo(x-c1,y-r,x,y-r);
  15.     g.curveTo(x+c1,y-r,x+c2,y-c2);
  16.     g.curveTo(x+r,y-c1,x+r,y);*/
  17. };

A quick way to draw a half-circle... I used to use this to draw circles in flash before the Graphics.drawCircle() method.

Posted in Graphics | Also tagged , | 3 Comments

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

Posted in misc, setPixel | Also 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...

Posted in Box2D, QuickBox2D, misc | Also tagged , , | 3 Comments