Category Archives: misc

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

Also posted in DisplayObject | 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

BlendModes & Blur

By Zevan | July 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 750, height = 750)]
  2. var canvas:BitmapData = new BitmapData(750,1000,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var loader:Loader = new Loader();
  6. loader.load(new URLRequest("http://actionsnippet.com/imgs/paint.jpg"));
  7. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
  8. var bit:BitmapData
  9. var blurred:BitmapData;
  10. function onLoaded(evt:Event):void{
  11.     bit = Bitmap(evt.target.content).bitmapData;
  12.     blurred = bit.clone();
  13.     blurred.applyFilter(blurred, blurred.rect, new Point(0,0), new BlurFilter(4, 4, 6));
  14.     var blends:Array = [BlendMode.NORMAL,BlendMode.ADD, BlendMode.DARKEN,BlendMode.HARDLIGHT,BlendMode.LIGHTEN, BlendMode.MULTIPLY, BlendMode.OVERLAY,BlendMode.SCREEN, BlendMode.DIFFERENCE];
  15.     var m:Matrix = new Matrix();
  16.     for (var i:int = 0; i<blends.length; i++){
  17.         m.tx = i % 3 * 250;
  18.         m.ty = int(i / 3) * 250;
  19.         canvas.draw(bit, m);
  20.         if (i> 0){
  21.         canvas.draw(blurred, m, null, blends[i]);
  22.         }
  23.     }
  24. }

When I used to use photoshop for more than just the most basic of things, I would use a simple technique that employed layer modes (blend modes in flash) and blur. Sometimes, if I had a low quality image that I wanted to make look a little better, or just wanted to give an image a subtle effect, I would duplicate the layer the image was on, blur it and then go through all the layer modes on that duplicate layer until I found something I liked.

This snippet does the same thing with a few select blend modes:

This isn't the greatest image to illustrate the effect, but I didn't feel like digging something better up. Two notable swatches are the upper right (darken) and the lower middle (screen).

Also posted in BitmapData | Tagged , , | 6 Comments

Variable Line Resolution #2

By Zevan | July 8, 2009
CLICK HERE TO COPY
Actionscript:
  1. var loc:Vector.<Point> = new Vector.<Point>();
  2. var lifts:Vector.<int> = new Vector.<int>();
  3. var index:int = 0;
  4. var resolution:int = 1;
  5. var down:Boolean;
  6. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  7. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  8. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyReleased);
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10. function onKeyReleased(evt:KeyboardEvent):void{
  11.     if (evt.keyCode == Keyboard.RIGHT){
  12.         resolution -= 1;
  13.         if (resolution <1) resolution = 1;
  14.     }else
  15.     if (evt.keyCode == Keyboard.LEFT){
  16.         resolution += 1;
  17.     }
  18. }
  19. function onDown(evt:MouseEvent):void{
  20.     down = true;
  21.     lifts.push(index);
  22. }
  23. function onUp(evt:MouseEvent):void{
  24.     down = false;
  25. }
  26. function onLoop(evt:Event):void {
  27.     if (down){
  28.         loc[index] = new Point(mouseX, mouseY);
  29.         index++;
  30.     }
  31.     graphics.clear();
  32.     graphics.lineStyle(0,0x000000);
  33.     var j:int = 0;
  34.     var lift:int;
  35.     var liftLength:int = lifts.length;
  36.     var lastLoc:int =  loc.length  - 1;
  37.     for (var i:int = 0; i<liftLength; i++){
  38.         j =  lifts[i];
  39.         graphics.moveTo(loc[j].x, loc[j].y);
  40.         if (i <liftLength - 1){
  41.             lift = lifts[i + 1] - 1;
  42.         }else{
  43.             lift = lastLoc;
  44.         }
  45.         while (j <lift){
  46.             j++;
  47.             if (j % resolution == 1 || resolution == 1){
  48.               graphics.lineTo(loc[j].x, loc[j].y);
  49.             }
  50.         }
  51.         graphics.lineTo(loc[j].x, loc[j].y);
  52.     }
  53. }

This snippet shows a simple approach to creating variable resolution graphics.

This is an improved version of yesterdays post. In yesterdays example the end points of the lines would sometimes be removed... this version doesn't have that problem...

Below is a drawing created using this snippet. The left arrow key is used to decrease resolution and the right arrow key is used to increase resolution:

Have a look at the swf...

Also posted in Graphics | Tagged , , | 2 Comments