Editing WoW:SetTexCoord Transformations (section)

==The math==
===Matrix multiplication===

Matrix multiplication is written as follows, for the expression b = Ta, where b is (X,Y,Z) and a is (x,y,z) you'd have;

<math>
\begin{pmatrix}
X\\
Y\\
Z
\end{pmatrix}
=
\begin{pmatrix}
A&B&C\\
D&E&F\\
G&H&I
\end{pmatrix}
\times
\begin{pmatrix}
x\\
y\\
z
\end{pmatrix}
</math>

Which is then calculated as follows:
 X = Ax + By + Cz
 Y = Dx + Ey + Fz
 Z = Gx + Hy + Iz

===Affine transformations as matrices===
You'll note my matrix example was a 3 dimensional coordinate, and a 3 by 3 matrix, this is because a 2 dimensional matrix isn't enough to represent an affine transformation by itself, because it cannot represent translation. The trick is to add a 'dummy' z coordinate, which ALWAYS has the value 1, and then use the following matrices:

<math>
\begin{pmatrix}
X\\
Y\\
1
\end{pmatrix}
=
\begin{pmatrix}
A&B&C\\
D&E&F\\
0&0&1
\end{pmatrix}
\times
\begin{pmatrix}
x\\
y\\
1
\end{pmatrix}
</math>

Which then yields:
 X = Ax + By + C
 Y = Dx + Ey + F
 1 = 1

In this case, A,B,D,E represent scaling, shearing, and rotation, and C,F represent translation. Matrices of this form also multiply together properly, preserving the last row in the correct format.

===SetTexCoord math with matrices===
====T as a matrix====
The first step in figuring out your SetTexCoord parameters is to represent your transformation as a matrix. This wont be covered here, but there are plenty of tutorials online concerning the mathematics of matrix transformations.  You'll end up with a matrix with 6 variables, in the form shown above, and we'll use those for this example.

====Inverting T====
Not all matrices can be inverted, but for this case with the affine restricted 3x3 matrix, any matrix for which (AE-BD) is not zero has an inverse (This value is the 'determinant' of the matrix, and represents the change in area that a shape undergoes when transformed, you cannot reverse a matrix with a zero determinant because it represents a collapse into a single point or line)

 det = AE - BD
 x   = ( EX - BY + (BF-CE)) / det
 y   = (-DX + AY - (AF-CD)) / det

Thus, if we were to make a new matrix for T' it'd be as follows

{|
|(||E/det||-B/det||(BF-CE)/det||)
|-
|(||-D/det||A/det||-(AF-CD)/det||)
|-
|(||0||0||1||)
|}

====Final SetTexCoord results====
To calculate the final image coordinates, we apply T' to each of the corner Texture coordinates:

UL Texture Coordinates (X,Y) = (0,0)
 ULx = ( BF - CE) / det
 ULy = (-AF + CD) / det

LL Texture Coordinates (X,Y) = (0,1)
 LLx = (-B + BF - CE) / det = (-(1-F)B - CE) / det
 LLy = ( A - AF + CD) / det = ( (1-F)A + CD) / det

UR Texture Coordinates (X,Y) = (1,0)
 URx = ( E + BF - CE) / det = ( BF + (1-C)E ) / det
 URy = (-D - AF + CD) / det = ( AF - (1-C)D ) / det

LR Texture Coordinates (X,Y) = (1,1)
 LRx = ( E - B + BF - CE) / det = ( (1-C)E - (1-F)B ) / det
 LRy = (-D + A - AF + CD) / det = (-(1-C)D + (1-F)A ) / det

====Example function====
The function below will take a texture t, and a matrix with 6 variables as its arguments, and apply the transformation to the texture using the SetTexCoord calculations above.
 function setCoords(t, A, B, C, D, E, F)
 	local det = A*E - B*D;
 	local ULx, ULy, LLx, LLy, URx, URy, LRx, LRy;
 	
 	ULx, ULy = ( B*F - C*E ) / det, ( -(A*F) + C*D ) / det;
 	LLx, LLy = ( -B + B*F - C*E ) / det, ( A - A*F + C*D ) / det;
 	URx, URy = ( E + B*F - C*E ) / det, ( -D - A*F + C*D ) / det;
 	LRx, LRy = ( E - B + B*F - C*E ) / det, ( -D + A -(A*F) + C*D ) / det;
 	
 	t:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy);
 end
Applying transformations is then rather simple. To apply a rotation to the texture, we can use the rotation matrix below (assuming angle a):
{|
|(||cos(a)||sin(a)||1||)
|-
|(||-sin(a)||cos(a)||1||)
|}
Applying a rotation of 90 degrees can then be done by using:
 local cos, sin = math.cos, math.sin;
 local angle = math.rad(90);
 setCoords(texture, cos(angle), sin(angle), 1, -sin(angle), cos(angle), 1);

===Simple rotation of square textures around the center===
While the above section about matrix manipulation gives a lot of flexibility, most often much simpler math suffice.
Here's an example of rotating a square texture around its center with an arbitrary angle:
 local s2 = sqrt(2);
 local cos, sin, rad = math.cos, math.sin, math.rad;
 local function CalculateCorner(angle)
 	local r = rad(angle);
 	return 0.5 + cos(r) / s2, 0.5 + sin(r) / s2;
 end
 local function RotateTexture(texture, angle)
 	local LRx, LRy = CalculateCorner(angle + 45);
 	local LLx, LLy = CalculateCorner(angle + 135);
 	local ULx, ULy = CalculateCorner(angle + 225);
 	local URx, URy = CalculateCorner(angle - 45);
 	
 	texture:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy);
 end

===Even simpler rotation of textures about the center===
 function RotateTexture(self, degrees)
 	local angle = math.rad(degrees)
 	local cos, sin = math.cos(angle), math.sin(angle)
 	self:SetTexCoord((sin - cos), -(cos + sin), -cos, -sin, sin, -cos, 0, 0)
 end

===Simple rotation of textures about their own center===
It may just have been a lack of understanding on my part but the above methods did not work for me; Or at least did not meet my needs.

To be explicit, I wanted to be able to rotate a texture about its own center.

In other words, I wanted the texture to spin in place, and not rotate or move the texture about the center of the UI, or its parent's center.

The following code gives a rough idea of how to animate a texture to make it spin.

But the basic method can be seen in the :SetTexCoord method :

 local angleInc = 0.25
 function myOnUpdate(self, elapsed)
  	self.timer = self.timer + elapsed;
  	if ( self.timer > 0.05 ) then
   		self.hAngle = self.hAngle - angleInc;
   		self.s = sin(self.hAngle);
   		self.c = cos(self.hAngle);
   		miniNote:SetTexCoord(	0.5-self.s, 0.5+self.c,
   					0.5+self.c, 0.5+self.s,
   					0.5-self.c, 0.5-self.s,
   					0.5+self.s, 0.5-self.c);
   		self.timer = 0;
  	end
 end

angleInc has been precalculated as a Radians value - the larger it is, the faster the spin.

Or reduce the self.timer threshold to make a smoother rotation.


radians = (pi/180) * degrees

===Rotation of textures about any point with any aspect===
This function caters to all your rotation needs.

 function RotateCoordPair (x,y,ox,oy,a,asp)
 	y=y/asp
 	oy=oy/asp
 	return ox + (x-ox)*math.cos(a) - (y-oy)*math.sin(a),
 		(oy + (y-oy)*math.cos(a) + (x-ox)*math.sin(a))*asp
 end

And use it like this:

 	coords={tl={x=0,y=0},
 		bl={x=0,y=1},
 		tr={x=1,y=0},
 		br={x=1,y=1}}
 	origin={x=0.5,y=1.0}
 	aspect=image_width/image_height
 	angle=3.14159/2
 	texture:SetTexCoord(
 		RotateCoordPair(coords.tl.x,coords.tl.y,origin.x,origin.y,angle,aspect),
 		RotateCoordPair(coords.bl.x,coords.bl.y,origin.x,origin.y,angle,aspect),
 		RotateCoordPair(coords.tr.x,coords.tr.y,origin.x,origin.y,angle,aspect),
 		RotateCoordPair(coords.br.x,coords.br.y,origin.x,origin.y,angle,aspect)
 	)