Tag Archives: actionscript

drawTriangles() Terrain

By Zevan | July 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500,height=500,backgroundColor=0x333333, frameRate=40)]
  2. var terrain:Shape = Shape(addChild(new Shape()));
  3. terrain.x = terrain.y = 250;
  4. var rows:int = 60;
  5. var size:int = rows + 1;
  6. var vertNum:int = size * size;
  7. var polySize:Number = 5;
  8. var gridWidth:Number = polySize * rows;
  9. var halfWidth:Number = gridWidth / 2;
  10. var verts:Vector.<Number> = new Vector.<Number>();
  11. var pVerts:Vector.<Number> = new Vector.<Number>();
  12. var indices:Vector.<int> = new Vector.<int>();
  13. var uvs:Vector.<Number> = new Vector.<Number>();
  14. var uvts:Vector.<Number> = new Vector.<Number>();
  15. var tex:BitmapData = new BitmapData(gridWidth, gridWidth, false, 0x000000);
  16. var pix:int = gridWidth * gridWidth;
  17. var perlin:BitmapData = new BitmapData(gridWidth, gridWidth, false, 0x000000);
  18. // generate the texture and the terrain
  19. function generate():void{
  20.     tex.fillRect(tex.rect, 0x000000);
  21.     var i:Number, xp:Number, yp:Number;
  22.     for (i = 0; i<pix; i++){
  23.         xp = i % gridWidth;
  24.         yp= int(i / gridWidth);
  25.         var dx:Number = xp - gridWidth / 2;
  26.         var dy:Number = yp - gridWidth / 2;
  27.         var d:Number = 255 - Math.sqrt(dx * dx + dy * dy) / halfWidth* 255;
  28.         if (d <0) d = 0;
  29.         if (d> 255) d = 255;
  30.         var c:uint = uint(d);
  31.         tex.setPixel(xp, yp, c <<16 | c <<8 | c);
  32.     }
  33.     perlin.perlinNoise(100,100,3,Math.random()*100,false,false,7,true);
  34.     perlin.draw(perlin, null, null, BlendMode.SCREEN);
  35.     tex.draw(perlin, null, null, BlendMode.MULTIPLY);
  36.     // calculate verts, uvs and indices
  37.     var vIndex:int = 0;
  38.     var uvIndex:int = 0;
  39.     indices = new Vector.<int>();
  40.     for (i = 0; i<vertNum; i++){
  41.         var xMod:Number = i % size;
  42.         xp = xMod * polySize;
  43.         yp = int(i / size) * polySize;
  44.         verts[vIndex++] = xp - halfWidth;
  45.         verts[vIndex++] = yp - halfWidth;
  46.         verts[vIndex++] = tex.getPixel(xp, yp) & 0xFF;
  47.         uvs[uvIndex++] = xp /  gridWidth;
  48.         uvs[uvIndex++] = yp / gridWidth;
  49.         if (xMod != rows){
  50.               indices.push(i, i+1, i+size, i+1, i+size+1, i+size);
  51.         }
  52.     }
  53. }
  54. generate();
  55. stage.addEventListener(MouseEvent.MOUSE_DOWN, onGenerate);
  56. function onGenerate(evt:MouseEvent):void{ generate() };
  57. var m:Matrix3D = new Matrix3D();
  58. var rot:Number = 0;
  59. addEventListener(Event.ENTER_FRAME, onLoop);
  60. function onLoop(evt:Event):void {
  61.         m.identity();
  62.         var destRot:Number = mouseX / stage.stageWidth * 90;
  63.         if (destRot <0) destRot = 0;
  64.         if (destRot> 90) destRot = 90;
  65.         rot += (destRot - rot) * 0.2;
  66.         m.appendRotation(rot,Vector3D.Z_AXIS);
  67.         m.appendRotation(60,Vector3D.X_AXIS);
  68.         Utils3D.projectVectors(m, verts, pVerts, uvts);
  69.         with(terrain.graphics){
  70.             clear();
  71.             beginBitmapFill(tex, null, false, true);
  72.             drawTriangles(pVerts, indices, uvs, TriangleCulling.NEGATIVE);
  73.         }
  74. }

This snippet draws a pretty simple isometric terrain using fp10 graphics stuff and perlin noise.


Have a look at the swf here...

Posted in BitmapData, Graphics, Vector, pixel manipulation, setPixel | Also tagged , | 4 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...

Posted in Graphics, misc | Also 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 | Also 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 | Also tagged , | 3 Comments