drawTriangles() 2D Textured Plane

Actionscript:
  1. [SWF(width = 700, height = 700)]
  2.  
  3. var loader:Loader = new Loader();
  4. loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
  5. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
  6. var tex:BitmapData;
  7. function onLoaded(evt:Event):void{
  8.     tex = Bitmap(loader.content).bitmapData;
  9.     addEventListener(Event.ENTER_FRAME, onLoop);
  10. }
  11.  
  12. var plane:Shape = Shape(addChild(new Shape()));
  13. plane.x = plane.y = 50;
  14.  
  15. var verts:Vector.<Number> = new Vector.<Number>();
  16. var uvs:Vector.<Number> = new Vector.<Number>();
  17. var indices:Vector.<int> = new Vector.<int>();
  18. var rows:int = 30;
  19. var size:Number = rows + 1;
  20. var vertNum:Number = size * size;
  21. var polySize:Number = 20;
  22. var vIndex:int = 0;
  23. var uvIndex:int = 0;
  24. var gridSize:Number = rows * polySize;
  25. for (var i:Number = 0; i<vertNum; i++){
  26.     var xp:Number = i % size * polySize;
  27.     var yp:Number =  int(i / size) * polySize;
  28.     verts[vIndex++] = xp
  29.     verts[vIndex++] = yp;
  30.     uvs[uvIndex++] = xp / gridSize;
  31.     uvs[uvIndex++] = yp / gridSize;
  32.     if (i % size != rows){
  33.           indices.push(i, i+1, i+size, i+size, i+size+1, i+1);
  34.     }
  35. }
  36.  
  37. // render and show that the verts can be changed around
  38. function onLoop(evt:Event):void {
  39.     // shake the verts
  40.     for (var i:int = 0; i<verts.length; i++){
  41.         verts[i] += Math.random() - 0.5;
  42.     }
  43.     with(plane.graphics){
  44.         clear();
  45.         beginBitmapFill(tex,null, false, true);
  46.         drawTriangles(verts, indices,uvs);
  47.     }
  48. }

This snippet is shows how to draw a textured 2D plane using drawTriangles(). This is similar to the wireframe 2D plane post from yesterday... the main difference is that you need to calculate UV coordinates if you want to use a bitmap fill with drawTriangles().

Here is a still of this snippet:

This entry was posted in BitmapData, Graphics, Vector and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. robodude666
    Posted July 11, 2009 at 9:25 am | Permalink

    Is there any way to reproduce this effect without CS4 (i.e Vectors & drawTriangles)?

  2. Posted July 12, 2009 at 7:20 am | Permalink

    yes… you could use a series of graphics lineTo() and moveTo() calls… along with beginBitmapFill() and a Matrix. CS4 definately made it a bit easier and significantly faster. The would be a bit more complex…

    You could also download the flex sdk and compile flash 10 stuff like that.

    I think you can get the flex stuff you need here:
    http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*