Category Archives: Graphics

Wireframe Plane 2D

By Zevan | July 10, 2009
CLICK HERE TO COPY
Actionscript:
  1. var plane:Shape = Shape(addChild(new Shape()));
  2. plane.x = plane.y = 50;
  3.  
  4. var verts:Vector.<Number> = new Vector.<Number>();
  5. var indices:Vector.<int> = new Vector.<int>();
  6. var rows:int = 20;
  7. var size:Number = rows + 1;
  8. var vertNum:Number = size * size;
  9. var polySize:Number = 20;
  10. var vIndex:int = 0;
  11. for (var i:Number = 0; i<vertNum; i++){
  12.     verts[vIndex++] = i % size * polySize;
  13.     verts[vIndex++] = int(i / size) * polySize;
  14.     if (i % size != rows){
  15.           indices.push(i, i+1, i+size, i+size, i+size+1, i+1);
  16.     }
  17. }
  18.  
  19. // render and show that the verts can be changed around
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     // shake the verts
  23.     for (var i:int = 0; i<verts.length; i++){
  24.         verts[i] += Math.random() - 0.5;
  25.     }
  26.     with(plane.graphics){
  27.         clear();
  28.         lineStyle(0,0);
  29.         drawTriangles(verts, indices);
  30.     }
  31. }

This snippet shows a simple way to draw a 2D wireframe plane using drawTriangles(). To demonstrate the flexibility of the plane... the vertices are randomly shaken on enterframe.

Also posted in Vector | Tagged , , | Leave a comment

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

Also posted in BitmapData, Vector, pixel manipulation, setPixel | 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...

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

Also posted in Vector | Tagged , , | 3 Comments