Distort with drawTriangles()

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:

                        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