Monthly Archives: December 2008

BitmapData.floodFill()

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

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:

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

E4X Filtering

Actionscript:
  1. var userInfo:XML = <users>
  2.   <user fname="joe" lname="smith" age="31" />
  3.   <user fname="mildred" lname="calder" age="64" />
  4.   <user fname="ben" lname="nathanson" age="20" />
  5.   <user fname="james" lname="biuford" age="19" />
  6.   <user fname="nick" lname="calhoun" age="45" />
  7. </users>;
  8.  
  9.  
  10. trace("Users over 20:\n");
  11. trace(userInfo.user.(@age> 20).toXMLString());
  12.  
  13. trace("\nUsers with the name nick:\n");
  14. trace(userInfo.user.(@fname == "nick" ).toXMLString());
  15.  
  16. // use regular expressions with e4x
  17. trace("\nUsers with name starting with j:\n");
  18. trace(userInfo.user.(/^j/.test(@fname)));
  19.  
  20. /*
  21. outputs:
  22.  
  23. Users over 20:
  24.  
  25. <user fname="joe" lname="smith" age="31"/>
  26. <user fname="mildred" lname="calder" age="64"/>
  27. <user fname="nick" lname="calhoun" age="45"/>
  28.  
  29. Users with the name nick:
  30.  
  31. <user fname="nick" lname="calhoun" age="45"/>
  32.  
  33. Users with name starting with j:
  34.  
  35. <user fname="joe" lname="smith" age="31"/>
  36. <user fname="james" lname="biuford" age="19"/>
  37.  
  38. */

One of the nicest features of E4X is filtering. The above code shows a few simple examples ... the last example makes use of regular expressions -- I first read using regular expressions and E4X somewhere on http://www.darronschall.com/.

I usually prefer to use a database for any kind of info I'll be searching... but if you know you have a relatively small amount of data XML can be a fine way to go.

Posted in XML | Tagged , , , , | 2 Comments

Isometric Voxels

Actionscript:
  1. // isometric conversion
  2. var centerX:Number=stage.stageWidth/2;
  3. var centerY:Number=stage.stageHeight/2;
  4. var theta:Number=Math.PI/4;// 45 degrees;
  5. var cosX:Number=Math.cos(theta);
  6. var sinX:Number=Math.sin(theta);
  7. var pnt:Point = new Point();
  8. function iso3D(x:Number, y:Number, z:Number):Point {
  9.     pnt.x = centerX + (x-z) *  cosX
  10.     pnt.y = centerY -  (x+z) * 0.5 * sinX - y;
  11.     return pnt;
  12. }
  13. // example:
  14. var canvas:BitmapData=new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFF000000);
  15. addChild(new Bitmap(canvas,"auto",true));
  16. var size:int=100;
  17. var hs:int=size / 2;
  18. var pen:Point = new Point();
  19. var vect:Vector3D = new Vector3D();
  20. // draw a few shapes with offset:
  21. for (var dist:int = 10; dist <= 80; dist *= 2) {
  22.     // voxel space:
  23.     for (var i:int = 0; i<size; i++) {
  24.         for (var j:int = 0; j<size; j++) {
  25.             for (var k:int = 0; k<size; k++) {
  26.                 vect.x=j-hs;
  27.                 vect.y=i-hs;
  28.                 vect.z=k-hs;
  29.                 pen = iso3D(vect.x,vect.y,vect.z);
  30.                 if (Math.sqrt((vect.x * vect.x) + (vect.y * vect.y) + (vect.z * vect.z)) <dist) {
  31.                     // using Vector3D.distance() is very slow compared to above
  32.                     // a few types of coloring:
  33.                     var xp:Number = pen.x + (dist <<2) - 200;
  34.                     canvas.setPixel(xp, pen.y-100, (i <<16 | j <<8 | k) <<1);
  35.                     canvas.setPixel(xp, pen.y+100, (k <<16 | k <<8 | k+j)  );
  36.                 }
  37.             }
  38.         }
  39.     }
  40. }

The above will draw this:

You can read more about voxels here.

This isn't the speediest way to do voxels (especially if you want to animate). This was just the first thing that came to mind.

Posted in 3D, BitmapData, color, pixel manipulation, setPixel | Tagged , , , | 3 Comments