There are a growing number of posts about the technique to distort an image with the drawTriangles() function. But most of those examples create a lot of extra vertices that aren’t needed for displaying the image and more calculation means more CPU consumption. I explain here how to work with verticals and show some basic examples.

**Basics**

Look at this example:

The image is subdivided in triangles. 1 triangle is created by 3 points called vertices. And the triangle is called index in this example. If you divide the image in 16sections (4 x 4)Â and I ask you how many vertices the first row of the image has you can’t just say 4 x 3, but because some vertices are used in 2Â or more indices you can reduce the size of vertices. This is visible in the above sketch. As you can see “vertex 3” is used by 4 different indices. And in stead of creating 4×3 verticals you create ony3 vertices for the first index and for the rest of the indices you create 2 vertices.

**Example**

If you set a button on every vertex to distort an image from every point with the inefficient way you get something like this (drag a dot from his place):

After that I tried to implement the away3D way to implement the vertices. Because the 2D way is very similar to the 3D way I only have to remove the z-ax. This is the result (drag a dot from his place):

This is the final code to calculate the data:

^{?}View Code ACTIONSCRIPT

var i:int; var j:int; var _segmentsH:int = 5; var _segmentsW:int = 5; this._vertices = new Vector.; this._uvtData = new Vector. ; this._indices = new Vector.; var offsetX:Number = (this._image.width * .5) + this.imgX; var offsetY:Number = (this._image.height * .5) + this.imgY; var imgWidth:Number = this._image.width; var imgHeight:Number = this._image.height; for (j = 0; j <= _segmentsH; ++j) { for (i = 0; i <= _segmentsW; ++i) { _vertices.push(((i/_segmentsW - 0.5)*imgWidth) + offsetX, ((j/_segmentsH - 0.5)*imgHeight) + offsetY); _uvtData.push( (i/_segmentsW), _segmentsH - (1 - j/_segmentsH)); } } for (j = 1; j <= _segmentsH; ++j) { for (i = 1; i <= _segmentsW; ++i) { var a:int = (_segmentsW + 1)*j + i; var b:int = (_segmentsW + 1)*j + i - 1; var c:int = (_segmentsW + 1)*(j - 1) + i - 1; var d:int = (_segmentsW + 1)*(j - 1) + i; _indices.push(a,b,c); _indices.push(a,c,d); } } |

I made some adjustments to the away3D code to get the effect right. Of course I removed the z-ax and I made some adjustments so the image doesn’t appear upside down and mirrored

Very cool Arno. I havent played around with distortion, but this is encouraging.

One question though, do you mean ‘verticals’ , or ‘vertices’ ? Since you point out that a triangle is made of of vertex 1, vertex 2, and vertex 3…. that’s 3 vertices (plural of ‘vertex’). Is ‘verticals’ some other term I’m just not famliar with?

Thanks for pointing that out Ikezi. I changed it in the text.