Monthly Archives: July 2009

Isometric Cones (spikes)

By Zevan | July 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 500, backgroundColor=0xFFFFFF)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var matrix:Matrix = new Matrix();
  7. var grid:Sprite =   new Sprite();
  8. grid.filters = [new DropShadowFilter(4, 0, 0, 0.05, 20, 10)];
  9. matrix.rotate(Math.PI / 4);
  10. matrix.scale(1, 0.6);
  11. matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2 + 50);
  12. grid.transform.matrix = matrix;
  13.  
  14. var rowCol:int = 9;
  15. var spikeNum:Number = rowCol * rowCol;
  16. var diameter:Number = 30;
  17. var space:Number  = diameter + 10;
  18. var halfGridSize:Number  = rowCol * space / 2;
  19. var radius:Number;
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     radius  = diameter / 2;
  23.     grid.y -= 0.9;
  24.     grid.graphics.clear();
  25.     for (var i:Number = 0; i<spikeNum; i++){
  26.        var xp:Number = i % rowCol;
  27.        var yp:Number = int(i / rowCol);
  28.        drawSpike(xp * space - halfGridSize, yp * space - halfGridSize, (xp + yp) / 4, 0, -yp);
  29.     }
  30.     canvas.draw(grid, grid.transform.matrix);
  31.     diameter -= 0.5;
  32.     if (diameter <3){
  33.         removeEventListener(Event.ENTER_FRAME, onLoop);
  34.     }
  35. }
  36. function drawSpike(xp:Number, yp:Number, rot:Number = 0, xOff:Number=0, yOff:Number = 0):void{
  37.     matrix.createGradientBox(diameter, diameter, rot, xp - radius + yOff, yp - radius + xOff);
  38.     with (grid.graphics){
  39.         beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x999999], [1,1], [0, 255], matrix, SpreadMethod.PAD);
  40.         drawCircle(xp, yp, radius);
  41.     }
  42. }

This snippet draws some isometric cones. Here are some images created by tweaking a few of the values:

Posted in 3D, BitmapData, misc | Tagged , , | Leave a comment

Isometric Transformation Matrix

By Zevan | July 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. var grid:Sprite = Sprite(addChild(new Sprite()));
  2. var matrix:Matrix = new Matrix();
  3. // make the grid sprite look isometric using the transform.matrix property
  4. matrix.rotate(Math.PI / 4);
  5. matrix.scale(1, 0.5);
  6. matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2);
  7. grid.transform.matrix = matrix;
  8.  
  9. // draw a grid of circles to show that it does in fact look isometric
  10. var rowCol:Number = 8;
  11. var num:Number = rowCol * rowCol;
  12.  
  13. var diameter:Number = 40;
  14. var radius:Number = diameter / 2;
  15. var space:Number = diameter + 10;
  16. var halfGridSize:Number = rowCol * space / 2;
  17.  
  18. grid.graphics.beginFill(0xFF0000);
  19. for (var i:int = 0; i<num; i++){
  20.    grid.graphics.drawCircle(i % 8 * space - halfGridSize, int(i / 8) * space - halfGridSize, radius);
  21. }

This snippet shows how to use transform.matrix to make a DisplayObject look isometric. This can also be achieved with nesting.

In the case of this grid of red circles, we rotate it 45 degrees, scale it 50% on the y and move it to the center of the stage (lines 4-6).

Posted in DisplayObject, misc | 3 Comments

Convex/Concave Function

By Zevan | July 18, 2009

Didn't get a chance to post today but will do two posts tomorrow... been looking into things related to convex and concave functions... here are some links related to that topic:

http://en.wikipedia.org/wiki/Convex_function
http://www.economics.utoronto.ca/osborne/MathTutorial/CVNF.HTM

Will probably have at least two snippets related to this in the near future...

Posted in misc | Leave a comment

Another Matrix.transformPoint()

By Zevan | July 17, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 628, height=500)]
  2. var trans:Matrix = new Matrix();
  3. var pnt:Point = new Point();
  4. x = stage.stageWidth / 2;
  5. y = stage.stageHeight / 2;
  6. addEventListener(Event.ENTER_FRAME, onLoop);
  7. function onLoop(evt:Event):void {
  8.     graphics.clear();
  9.     graphics.lineStyle(10, 0x000000, 1, false, LineScaleMode.NORMAL, CapsStyle.SQUARE);
  10.     pnt.x = 0;
  11.     pnt.y = 0;
  12.     trans.identity();
  13.     trans.translate(15,15);
  14.     trans.rotate(mouseX/10 * Math.PI / 180);
  15.     graphics.moveTo(pnt.x, pnt.y);
  16.     for (var i:int = 0; i<12; i++){
  17.         pnt = trans.transformPoint(pnt);
  18.         graphics.lineTo(pnt.x, pnt.y);
  19.     }
  20. }

I was thinking about processing and OpenGL today... I always really enjoyed using matrix stuff, working with the matrix stack, using push() and pop() etc... Understanding how to use matrices is pretty important when your doing advanced graphics in actionscript. If you haven't messed with matrices, this snippet is a good place to start. It uses Matrix.transformPoint() to draw a series of connected lines that are controlled by the x location of the mouse. Back before flash 8, this kind of thing was usually done using trig or MovieClip nesting...

I posted another snippet on this topic awhile back.

Posted in matrix, motion | 2 Comments