Monthly Archives: July 2009

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

Posted in Graphics, misc | Tagged , , | 2 Comments

Variable Line Resolution

By Zevan | July 7, 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_UP, 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 liftIndex:int = 0;
  34.     for (var i:int = 0; i<loc.length; i++){
  35.         if (liftIndex == lifts.length) liftIndex = 0;
  36.         if (i == lifts[liftIndex]){
  37.             graphics.moveTo(loc[i].x, loc[i].y);
  38.             liftIndex++;
  39.         }else{
  40.             if (i % resolution == 1 || resolution == 1){
  41.                 graphics.lineTo(loc[i].x, loc[i].y);
  42.             }
  43.         }
  44.     }
  45. }

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

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


Click to view swf...

Posted in Graphics, Vector | Tagged , , | 3 Comments

Utils3D.projectVectors() Lathe

By Zevan | July 6, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height = 500, backgroundColor = 0x000000)]
  2. var halfWidth:Number = stage.stageWidth / 2;
  3. var halfHeight:Number = stage.stageHeight / 2;
  4. var loc:Vector.<Number>;
  5.  
  6. graphics.lineStyle(0, 0xFF0000);
  7. graphics.moveTo(halfWidth, 0);
  8. graphics.lineTo(halfWidth, stage.stageHeight);
  9. graphics.moveTo(0, halfHeight);
  10. graphics.lineTo(stage.stageWidth, halfHeight);
  11.  
  12. var line:Shape = Shape(addChild(new Shape()));
  13. line.x = halfWidth;
  14.  
  15. var idle:Function = function(){};
  16. var currentMode:Function = idle;
  17. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  18. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onDown(evt:MouseEvent):void{
  21.     if (contains(frame)){
  22.         removeChild(frame);
  23.         currentMode = idle;
  24.         line.graphics.clear();
  25.         return;
  26.     }
  27.     loc = new Vector.<Number>();
  28.     line.graphics.lineStyle(0,0xFFFFFF);
  29.     line.x = halfWidth
  30.     line.y = halfHeight;
  31.     line.graphics.moveTo(line.mouseX, line.mouseY);
  32.     currentMode = captureLocs;
  33.     canvas.fillRect(canvas.rect, 0x000000);
  34. }
  35. function onUp(evt:MouseEvent):void{
  36.     if (currentMode == idle) return;
  37.     setupLathe();
  38.     currentMode = showLathe;
  39. }
  40.  
  41. function onLoop(evt:Event):void{
  42.     currentMode();
  43. }
  44. function captureLocs():void{
  45.     loc.push(line.mouseX);
  46.     loc.push(line.mouseY);
  47.     loc.push(0);
  48.     line.graphics.lineTo(line.mouseX, line.mouseY);
  49. }
  50. /**
  51.  -- Lathe Stuff:
  52. */
  53. var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight,false, 0x000000);
  54. var frame:Bitmap = new Bitmap(canvas);
  55. var dx:Number=0;
  56. var dy:Number=0;
  57.  var matrix:Matrix3D = new Matrix3D();
  58. var pVerts:Vector.<Number>;
  59. var uvts:Vector.<Number>;
  60. function setupLathe():void{
  61.     addChild(frame);
  62.     pVerts =  new Vector.<Number>();
  63.     uvts = new Vector.<Number>();
  64.     var nVerts:Vector.<Number> = new Vector.<Number>();
  65.     var tVerts:Vector.<Number> = new Vector.<Number>();
  66.     matrix.identity();
  67.     var step:Number = 2;
  68.     for (var i:int = 0; i <360; i+=step){
  69.         matrix.appendRotation(step,Vector3D.Y_AXIS);
  70.         matrix.transformVectors(loc, tVerts);
  71.         nVerts = nVerts.concat(tVerts);
  72.     }
  73.     loc = nVerts.concat();
  74. }
  75. function showLathe():void{
  76.     dx += (mouseX - dx)/4;
  77.     dy += (mouseY - dy)/4;
  78.     matrix.identity();
  79.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  80.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  81.     matrix.appendTranslation(halfWidth, halfHeight, 0);
  82.     Utils3D.projectVectors(matrix, loc, pVerts, uvts);
  83.     canvas.lock();
  84.     canvas.fillRect(canvas.rect, 0x000000);
  85.     var leng:int = pVerts.length;
  86.     for (var i:int = 0; i<leng; i+=2){
  87.         canvas.setPixel( pVerts[i], pVerts[i + 1], 0xFFFFFF);
  88.     }
  89.     canvas.unlock();
  90. }

This snippet allows you to create 3D lathe shapes by drawing a 2D line. This is done using Utils3D.projectVectors() and Matrix.transformVectors().

Have a look at the swf here...

Posted in 3D, BitmapData, Math, Vector, graphics algorithms, matrix, setPixel | Tagged , , | 3 Comments

FileReference.load()

By Zevan | July 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var txt:TextField = TextField(addChild(new TextField()));
  2. txt.autoSize = TextFieldAutoSize.LEFT;
  3. txt.x = txt.y = 20;
  4. txt.text = "click anywhere to load an image file...";
  5.  
  6. var fileRef:FileReference= new FileReference();
  7. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  8. function onDown(evt:MouseEvent):void{
  9.     fileRef.browse([new FileFilter("Images", "*.jpg;*.gif;*.png")]);
  10.     fileRef.addEventListener(Event.SELECT, onSelected);
  11.     stage.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
  12. }
  13. function onSelected(evt:Event):void{
  14.     fileRef.addEventListener(Event.COMPLETE, onLoaded);
  15.     fileRef.load();
  16.     fileRef.removeEventListener(Event.SELECT, onSelected);
  17. }
  18. function onLoaded(evt:Event):void{
  19.     var loader:Loader = new Loader();
  20.     loader.loadBytes(evt.target.data);
  21.     addChild(loader);
  22.     fileRef.removeEventListener(Event.COMPLETE, onLoaded);
  23. }

This snippet shows how to use the FileReference.load() method to load an image into flash player RAM and display it on the stage.

Posted in external data, misc | Tagged , , | Leave a comment