Isometric to Cartesian

By Zevan | January 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. var centerX:Number=stage.stageWidth/2;
  2. var centerY:Number=stage.stageHeight/2;
  3. // 1 to 2 ratio
  4. // try others 1 / 1.5 etc...
  5. var theta:Number = Math.atan(1 / 2);
  6.  
  7. var cosX:Number=Math.cos(theta);
  8. var sinX:Number=Math.sin(theta);
  9. var pnt:Point = new Point();
  10.  
  11. function iso3D(x:Number, y:Number, z:Number):Point {
  12.     pnt.x = centerX + (x-z) *  cosX;
  13.     pnt.y = centerY -  (x+z) * sinX - y;
  14.     return pnt;
  15. }
  16.  
  17. var p:Point = iso3D(0,0,0);
  18.  
  19. graphics.beginFill(0x000000);
  20. graphics.drawCircle(p.x, p.y, 2);
  21.  
  22. // x axis positive
  23. trace("x = red");
  24. for (var i:int = 1; i<10; i++){
  25.     graphics.beginFill(0xFF0000);
  26.     p = iso3D(i*10, 0, 0);
  27.     graphics.drawCircle(p.x, p.y, 2);
  28. }
  29.  
  30. // y axis positive
  31. trace("y = green");
  32. for (i= 1; i<10; i++){
  33.     graphics.beginFill(0x00FF00);
  34.     p = iso3D(0, i * 10, 0);
  35.     graphics.drawCircle(p.x, p.y, 2);
  36. }
  37.  
  38. // z axis positive
  39. trace("z = blue");
  40. for (i= 1; i<10; i++){
  41.     graphics.beginFill(0x0000FF);
  42.     p = iso3D(0, 0, i * 10);
  43.     graphics.drawCircle(p.x, p.y, 2);
  44. }

The above code demos a conversion from isometric coordinates to cartesian coordinates. It draws out part of the x, y and z axis using the iso3D() function.

I've always faked isometric conversion by just tweaking numbers. A few years ago I created some strange isometric engines (here's another example). The other day when I wrote the isometric voxels snippet I just created the iso3D() function with a little trial and error. As you'll see it's not exactly the same as the one here. This new conversion is the result of some googling. The updated conversion is pretty close to the one that I wrote for the voxel post, but has one less multiplication... and a clearer place to control the scale ratio ...

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

Matrix.transformPoint()

By Zevan | January 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. var circle:Shape = Shape(addChild(new Shape()));
  2. with(circle.graphics) beginFill(0x00000), drawCircle(0,0,10);
  3.  
  4. var point:Point = new Point();
  5. var trans:Matrix = new Matrix();
  6. trans.rotate(Math.PI);
  7. trans.scale(.5, .5);
  8. trans.tx = stage.stageWidth / 2;
  9. trans.ty = stage.stageHeight / 2;
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12.  
  13. function onLoop(evt:Event):void {
  14.     point.x = mouseX - trans.tx;
  15.     point.y = mouseY - trans.ty;
  16.    
  17.     point = trans.transformPoint(point);
  18.    
  19.     circle.x = point.x;
  20.     circle.y = point.y;
  21. }

If you don't feel like rolling your own transformations Matrix.transformPoint() is a very powerful method. It simply applies the tranformations of a given matrix to a Point. The above example scales rotates and translates a point which is then used to position a circle Shape.

Matrix.transformPoint() is well suited for creating orbiting behavior:

CLICK HERE TO COPY
Actionscript:
  1. var circle:Shape = Shape(addChild(new Shape()));
  2. with(circle.graphics) beginFill(0x00000), drawCircle(0,0,10);
  3.  
  4. var point:Point = new Point(100,0);
  5. var trans:Matrix = new Matrix();
  6.  trans.rotate(.1);
  7.  trans.scale(.99,.99);
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.      
  13.       point = trans.transformPoint(point);
  14.      
  15.       circle.x = point.x + stage.stageWidth / 2;
  16.       circle.y = point.y + stage.stageHeight / 2;
  17. }

This code will cause the circle Shape to move in a spiral formation.

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

BitmapData.floodFill()

By Zevan | December 31, 2008
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(400,400,false, 0xCC0000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. var s:Shape = new Shape();
  5. s.graphics.beginFill(0x00CCCC);
  6. s.graphics.moveTo(Math.random()*400,Math.random()*400);
  7. for(var i:int = 0; i<10; i++){
  8.     s.graphics.lineTo(Math.random()*400,Math.random()*400);
  9. }
  10. canvas.draw(s);
  11.  
  12. stage.addEventListener(MouseEvent.CLICK, onDown);
  13. function onDown(evt:MouseEvent):void {
  14.     canvas.floodFill(mouseX, mouseY, 0x000000);
  15. }

floodFill() is basically the paint bucket (fill) tool in any bitmap drawing program. The above example draws an arbitrary blue polygon to a red background. Click anywhere on the resulting image to see floodFill() in action.

floodFill() takes 3 arguments... x, y and color.

Posted in BitmapData, pixel manipulation | Tagged , | Leave a comment

E4X and ActionScript Variables

By Zevan | December 30, 2008
CLICK HERE TO COPY
Actionscript:
  1. var backgroundColor:uint = 0xEFEFEF;
  2. var borderColor:uint = 0xFF0000;
  3. var buttonOverColor:uint = 0x0000FF;
  4. var buttonOutColor:uint = 0x00CCCC;
  5.  
  6. var uiColors:XML = <ui>
  7.     <default color="0xCCCCCC" />
  8.     <background color = { backgroundColor } />
  9.    
  10.     <!-- note hexidecimal formatting code -->
  11.     <border color={ ("0x" + borderColor.toString(16)) } />
  12.    
  13.     <button overColor={ buttonOverColor} outColor={ buttonOutColor } />
  14. </ui>
  15.  
  16. trace(uiColors.toXMLString());
  17.  
  18. /*outputs:
  19. <ui>
  20.   <default color="0xCCCCCC"/>
  21.   <background color="15724527"/>
  22.   <border color="0xff0000"/>
  23.   <button overColor="255" outColor="52428"/>
  24. </ui>
  25. */

The first time I needed to use an ActionScript variable within inline XML I was stumped. I couldn't figure it out and I wasn't able to easily find it on google. I eventually found it somewhere (don't remember where... possibly hidden away in the docs).

Now a search for "insert actionscript variables into e4x" on google gives plenty of results. But I figure it's worth a post.

I use actionscript to generate XML all the time so this comes in handy. I also store color values in automatically generated XML all the time. If I'm feeling organized I'll use something like what you see on line 10:

CLICK HERE TO COPY
Actionscript:
  1. <border color={ ("0x" + borderColor.toString(16)) } />

If you look at the output you'll see this formats the uint so that it's readable as a hex number. By default (as you can see in the output) uints will show up in decimal notation. This really doesn't make any difference if you don't care about XML readability ... or if you just don't care about the readability of the colors stored in your XML.....

Posted in XML, color, variables | Tagged , , , | Leave a comment