SetTexCoord Transformations The SetTexCoord method in WoW ' s Texture API can be used for some fairly complex display tasks , including drawing bits of circles , rotating images on screen , etc . Unless one has experience in computer graphics programming , the way in which this can be used might not be evident , so this document hopes to explain how Textures work and how you can use them . Basic concepts . Before wading too far into the Texture waters , it ' s best to begin with some basic concepts : Screen coordinates . The screen refers to what the player sees . It may go by various different names in some graphics systems ( canvas , surface , etc . ) but here we ' ll just call it the screen . The term " Screen Coordinates " is used to specify a point in the screen . In World of Warcraft the origin of the screen coordinates is at the lower left corner . Texture coordinates . A Texture frame is used to display all or part of an image . It has an arbitrary location , size , and scale , and appears as a rectangular area on the screen with vertical and horizontal edges , just like any other frame . We ' ll use the term " Texture Coordinates " to refer to a location within the frame , where ( 0 , 0 ) is the lower left corner , ( 1 , 0 ) is the lower right corner , ( 0 , 1 ) is the upper left corner , and ( 1 , 1 ) is the upper right corner . " Texture " will always have an initial capital , for consistency with the name of the frame type in the API . Each screen coordinate within the bounds of the Texture on screen can be mapped into a Texture frame coordinate within the box from ( 0 , 0 ) to ( 1 , 1 ) . Image coordinates . Texture frame elements contain images . These are generally loaded from image files located by file paths . The World of Warcraft user interface engine handles different sizes of images : the length of each side is always a power of two ( 64 x 64 , 256 x 256 , 512 x 128 , etc . ) . We will use the term " Image Coordinates " to refer to locations within the contents of the image rectangle . The corners are ( 0 , 0 ) for the upper left , ( 1 , 0 ) for the upper right , ( 0 , 1 ) for the lower left , and ( 1 , 1 ) for the lower right . Notice that the image origin is at the upper left , whereas screen and texture frame origins are at the lower left . It is quite possible that a pixel logically outside the image rectangle is visible in the texture frame . To allow for this , the coordinate box from ( 0 , 0 ) to ( 1 , 1 ) containing the entire image is imagined to be extended over an infinite canvas by repeating indefinitely the first and last pixels on each row and column . This will usually give the desired effect , as the pixels at the edge are generally set to the image background colour . An analogy . Think of the image as a sheet of infinitely flexible rubber , with a faint set of grid lines rules on it . There ' s an origin , and coordinates , and the contents of the image file is printed onto the rubber between ( 0 , 0 ) an ( 1 , 1 ) and extends as far as you want in each direction . Think of the Texture frame as a rigid rectangular frame , with an attachment point at each of the four corners . The rubber image sheet is attached to each corner of the frame , and stretches between these points . Anything outside the edge of the frame can be ignored ; what ' s within the edges of the frame is what you see on screen . The SetTexCoord method is used to provide the image coordinates of each of these four corner points . Coordinate transformations . The way in which the image coordinates map to Texture frame coordinates , and then onto Screen Coordinates ( or vice versa ) is through a series of " Affine Transformations " . These are transformations which preserve linearity ( points which lay on a line before the transformation , continue to lay on a line after it ) and distance ratios ( the ratio of distance between two pairs of points on a line before the transformation remain the same afterwards ) . In the 2D world affine transformations are any combination of : Textures and the screen . For the Texture frame coordinate to Screen coordinate mapping there ' s a simple translation and scaling process , since we cannot shear or rotate on - screen frames , but for the mapping from image coordinates to the Texture frame , the full set are available . Logically the process by which a point is transformed from image space to a point on screen can be represented by two transformations T , the transformation from the image to the Texture , and then S , the transformation from the Texture to the screen ( I ' ll go into the math later ) : Texture coordinate from image coordinate : t = T * i Screen coordinate from Texture coordinate : s = S * t The S transformation is implied by the anchors , size , and scale of the Texture frame element ( and the Frame it ' s contained within ) . T , and its inverse . Most of the time you are most readily able to provide T , the transformation between the image and the Texture , because you want to achieve a specific thing ( Say , rotate the image 30 degrees and move it to the left ) . However SetTexCoord wants image coordinates as its parameters , for the four corner Texture coordinates . In order to do this , we need to create T ' , the inverse of T , such that given t = T * i , the inverse can be applied to get i = T ' * t . With the inverse in hand , we can determine what the image coordinates are going to be by passing in the four corner Texture coordinate values ( 0 , 1 ) ( 0 , 0 ) ( 1 , 1 ) ( 1 , 0 ) in turn and passing the resulting set of coordinates into SetTexCoord as the UL , LL , UR , and LR image coordinates . 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 ; formula _ 1 Which is then calculated as follows : 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 : formula _ 2 Which then yields : 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 ) Thus , if we were to make a new matrix for T ' it ' d be as follows 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 ) LL Texture Coordinates ( X , Y ) = ( 0 , 1 ) UR Texture Coordinates ( X , Y ) = ( 1 , 0 ) LR Texture Coordinates ( X , Y ) = ( 1 , 1 ) 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 . Applying transformations is then rather simple . To apply a rotation to the texture , we can use the rotation matrix below ( assuming angle a ) : Applying a rotation of 90 degrees can then be done by using : 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 : Even simpler rotation of textures about the center . function RotateTexture ( self , degrees ) 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 : 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 . And use it like this :