Transformations and Matrices
From Math Images
(27 intermediate revisions not shown.) | |||
Line 1: | Line 1: | ||
- | {{Image Description | + | {{Image Description Ready |
|ImageName=Transformations | |ImageName=Transformations | ||
- | |Image= | + | |Image=Tranformations4.png |
|ImageIntro= This picture shows an example of four basic transformations (where the original teapot is a red wire frame). On the top left is a translation, which is essentially the teapot being moved. On the top right is a scaling. The teapot has been squished or stretched in each of the three dimensions. On the bottom left is a rotation. In this case the teapot has been rotated around the x axis and the z axis (veritcal). On the bottom right is a shearing, creating a skewed look. | |ImageIntro= This picture shows an example of four basic transformations (where the original teapot is a red wire frame). On the top left is a translation, which is essentially the teapot being moved. On the top right is a scaling. The teapot has been squished or stretched in each of the three dimensions. On the bottom left is a rotation. In this case the teapot has been rotated around the x axis and the z axis (veritcal). On the bottom right is a shearing, creating a skewed look. | ||
- | |ImageDescElem=When an object undergoes a transformation, | + | |ImageDescElem=When an object undergoes a transformation, the transformation can be represented as a [[Matrix|matrix]]. Different transformations such as translations, rotations, scaling and shearing are represented mathematically in different ways. One matrix can also represent multiple transformations in sequence when the matrices are multiplied together. <br /> |
+ | |||
+ | ==Basic Transformations For Graphics== | ||
+ | Computer graphics works by representing objects in terms of simple [[Graphics Primitives|primitives]] that are manipulated with transformations that preserve some primitives’ essential properties. These properties may include angles, lengths, or basic shapes. Some of these transformations can work on primitives with vertices in standard 2D or 3D space, but some need to have vertices in homogeneous coordinates. The general graphics approach is to do everything in homogeneous coordinates, but we’ll talk about the primitives in terms of both kinds when we can. <br /><br /> | ||
+ | |||
+ | The most fundamental kinds of transformations for graphics are rotation, scaling, and translation. There are also a few cases when you might want to use shear transformations, so we’ll talk about these as well. <br /><br /> | ||
+ | |ImageDesc= | ||
==Linear Transformations Are Matrices== | ==Linear Transformations Are Matrices== | ||
A linear transformation on 2D (or 3D) space is a function f from 2D (or 3D) space to itself that has the property that<br /> | A linear transformation on 2D (or 3D) space is a function f from 2D (or 3D) space to itself that has the property that<br /> | ||
::<math> f(aA + bB) = af(A) + bf(B). </math> <br /> | ::<math> f(aA + bB) = af(A) + bf(B). </math> <br /> | ||
- | Since points in 2D or 3D space can be written as <math> P = xi + yj </math> or <math> P = xi + yj +zk </math> with i, j, and k the coordinate vectors, then we see that <math> f(P) = xf(i) + yf(j) </math> or <math> f(P) = xf(i) + yf(j) + zf(k) </math> <br /> | + | Since points in 2D or 3D space can be written as <math> P = xi + yj </math> or <math> P = xi + yj +zk </math> with <math>i</math>, <math>j</math>, and <math>k</math> the coordinate vectors, then we see that <math> f(P) = xf(i) + yf(j) </math> or <math> f(P) = xf(i) + yf(j) + zf(k) </math> <br /> |
This tells us that the linear transformation is completely determined by what it does to the coordinate vectors. <br /><br /> | This tells us that the linear transformation is completely determined by what it does to the coordinate vectors. <br /><br /> | ||
Line 35: | Line 41: | ||
From this example, we see that the linear transformation is exactly determined by the matrix whose first column is <math>f(i)</math>, whose second column is <math>f(j)</math>, and whose third column is <math>f(k)</math>, and that applying the function f is exactly the same as multiplying by the matrix. So the linear transformation <b>is</b> the matrix multiplication, and we can use the concepts of linear transformation and matrix multiplication interchangeably.<br /> | From this example, we see that the linear transformation is exactly determined by the matrix whose first column is <math>f(i)</math>, whose second column is <math>f(j)</math>, and whose third column is <math>f(k)</math>, and that applying the function f is exactly the same as multiplying by the matrix. So the linear transformation <b>is</b> the matrix multiplication, and we can use the concepts of linear transformation and matrix multiplication interchangeably.<br /> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
===Rotation=== | ===Rotation=== | ||
{{hide|1= | {{hide|1= | ||
- | [[Image:Rotationgraph.png|300px|right]] A 2D rotation transformation rotates everything in 2D space around the origin by a given angle. In order to see what it does, let’s take a look at what a rotation by a positive angle | + | [[Image:Rotationgraph.png|300px|right]] A 2D rotation transformation rotates everything in 2D space around the origin by a given angle. In order to see what it does, let’s take a look at what a rotation by a positive angle <math>\theta </math> does to the coordinate axes. Now (x,y) is the result when you apply the transformation to (1,0), which means that<br /> |
::<math> \begin{align} x = cos(\theta ) \\ | ::<math> \begin{align} x = cos(\theta ) \\ | ||
y = sin(\theta ) \end{align} </math><br /> | y = sin(\theta ) \end{align} </math><br /> | ||
But (x’,y’) is the result when you apply the transformation to (0,1), or <br /> | But (x’,y’) is the result when you apply the transformation to (0,1), or <br /> | ||
- | ::<math> \begin{align} x' = cos(\theta +\frac{p}{2}) = cos(\theta )cos(\frac{p}{2}) - sin(\theta )sin(\frac{p}{2}) = -sin(\theta ) \\ | + | ::<math> \begin{align} x' &= cos(\theta +\frac{p}{2}) = cos(\theta )cos(\frac{p}{2}) - sin(\theta )sin(\frac{p}{2}) = -sin(\theta ) \\ |
- | y' = sin(\theta +\frac{p}{2}) = sin(\theta )cos(\frac{p}{2}) + cos(\theta )sin(\frac{p}{2}) = cos(\theta ) \end{align} </math> <br /> | + | y' &= sin(\theta +\frac{p}{2}) = sin(\theta )cos(\frac{p}{2}) + cos(\theta )sin(\frac{p}{2}) = cos(\theta ) \end{align} </math> <br /> |
Then as we saw above, the rotation transformation must have the image of (1,0) as the first column and the image of (0,1) as the second column, or<br /> | Then as we saw above, the rotation transformation must have the image of (1,0) as the first column and the image of (0,1) as the second column, or<br /> | ||
Line 58: | Line 57: | ||
sin(\theta ) & cos(\theta ) | sin(\theta ) & cos(\theta ) | ||
\end{bmatrix} </math><br /> | \end{bmatrix} </math><br /> | ||
- | or, as XKCD (http://xkcd.com/184/) sees it (notice that the rotation is by -90° and <math>sin(-90\,^{\circ}) = -sin(90\,^{\circ})</math>, <br /><br | + | or, as XKCD (http://xkcd.com/184/) sees it (notice that the rotation is by -90° and <math>sin(-90\,^{\circ}) = -sin(90\,^{\circ})</math>, <br /><br /> |
The situation for 3D rotations is different because a rotation in 3D space must leave a fixed line through the origin. In fact we really only handle the special cases where the fixed line is one of the coordinate axes. Let’s start with the easiest one.<br /><br /> | The situation for 3D rotations is different because a rotation in 3D space must leave a fixed line through the origin. In fact we really only handle the special cases where the fixed line is one of the coordinate axes. Let’s start with the easiest one.<br /><br /> | ||
Line 78: | Line 77: | ||
For rotations around the Y-axis, the view down the Y-axis looks different from the one down the Z-axis; it is <br /> | For rotations around the Y-axis, the view down the Y-axis looks different from the one down the Z-axis; it is <br /> | ||
::[[Image:Xzplane.png| 200px]] <br /> | ::[[Image:Xzplane.png| 200px]] <br /> | ||
- | Here a positive-angle is from the X-axis towards the Z-axis, but <math> X \times Z = -Z \times X = -Y </math>, so the rotation axis dimension is pointing in the opposite direction from the Y-axis. Thus a the angle for the rotation is the negative of the angle we would see in the axes above, | + | Here a positive-angle is from the X-axis towards the Z-axis, but <math> X \times Z = -Z \times X = -Y </math>, so the rotation axis dimension is pointing in the opposite direction from the Y-axis. Thus a the angle for the rotation is the negative of the angle we would see in the axes above, so we use <math>-\theta </math> instead of <math>\theta</math>. Since cos is an even function but sin is odd, we can substitute in <math>cos(\theta )</math> for <math> cos(-\theta ) </math> and <math>-sin(\theta ) </math> for <math>sin(-\theta ) </math>. Thus we have the rotation matrix <br /> |
::<math> \begin{bmatrix} | ::<math> \begin{bmatrix} | ||
cos(-\theta ) & 0 & -sin(-\theta ) \\ | cos(-\theta ) & 0 & -sin(-\theta ) \\ | ||
Line 102: | Line 101: | ||
* & * & * & 0 \\ [0.3em] | * & * & * & 0 \\ [0.3em] | ||
* & * & * & 0 \\ | * & * & * & 0 \\ | ||
- | 0 & 0 & 0 & 1 \end{bmatrix} </math> where the * terms are the terms from the 3D rotations above. | + | 0 & 0 & 0 & 1 \end{bmatrix} </math><br /> |
+ | where the * terms are the terms from the 3D rotations above. | ||
}} | }} | ||
===Scaling=== | ===Scaling=== | ||
Line 112: | Line 112: | ||
f(0,1,0) = (0,3,0) \\ | f(0,1,0) = (0,3,0) \\ | ||
f(0,0,1) = (0,0,4) \end{align} </math><br /> | f(0,0,1) = (0,0,4) \end{align} </math><br /> | ||
- | So the matrix for this transformation is <math> \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 4 \end{bmatrix} </math> and, in general, a scaling matrix looks like<br /> | + | So the matrix for this transformation is<br /> |
- | ::<math> \begin{bmatrix} \sigma_x & 0 & 0 \\ 0 & \sigma_y & 0 \\ 0 & 0 & \sigma_z \end{bmatrix} </math> where the <math> \sigma_x , \sigma_y ,\text{ and }\sigma_z </math> are the scaling factors for x, y, and z respectively. <br /> | + | ::<math> \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 4 \end{bmatrix} </math><br /> |
+ | and, in general, a scaling matrix looks like<br /> | ||
+ | ::<math> \begin{bmatrix} \sigma_x & 0 & 0 \\ 0 & \sigma_y & 0 \\ 0 & 0 & \sigma_z \end{bmatrix} </math><br /> | ||
+ | where the <math> \sigma_x , \sigma_y ,\text{ and }\sigma_z </math> are the scaling factors for x, y, and z respectively. <br /> | ||
In case of only 2D transformations, scaling simply scales down to two dimensions and we simply have<br /> | In case of only 2D transformations, scaling simply scales down to two dimensions and we simply have<br /> | ||
- | <math> \begin{bmatrix} \sigma_x & 0 \\ 0 & \sigma_y \end{bmatrix} </math><br /><br /> | + | ::<math> \begin{bmatrix} \sigma_x & 0 \\ 0 & \sigma_y \end{bmatrix} </math><br /><br /> |
- | In case we are working with homogeneous coordinates, a scaling transformation only acts on the three primary components and leaves the homogeneous component alone, so we simply have the matrix <math> \begin{bmatrix} \sigma_x & 0 & 0 & 0 \\ 0 & \sigma_y & 0 & 0 \\ 0 & 0 & \sigma_z & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} </math> for the scaling transformation. | + | In case we are working with homogeneous coordinates, a scaling transformation only acts on the three primary components and leaves the homogeneous component alone, so we simply have the matrix<br /> |
+ | ::<math> \begin{bmatrix} \sigma_x & 0 & 0 & 0 \\ 0 & \sigma_y & 0 & 0 \\ 0 & 0 & \sigma_z & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} </math> <br /> | ||
+ | for the scaling transformation. | ||
}} | }} | ||
===Translation=== | ===Translation=== | ||
Line 126: | Line 131: | ||
::<math> \begin{bmatrix} 1 & 0 & T_x \\ 0 & 1 & T_y \\ 0 & 0 & 1 \end{bmatrix} \times | ::<math> \begin{bmatrix} 1 & 0 & T_x \\ 0 & 1 & T_y \\ 0 & 0 & 1 \end{bmatrix} \times | ||
\begin{bmatrix} x \\ y \\ 1 \end{bmatrix} = | \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} = | ||
- | \begin{bmatrix} x+T_x \\ y+T_y \\ 1 \end{bmatrix} </math> so that the matrix <math> \begin{bmatrix} 1 & 0 & T_x \\ 0 & 1 & T_y \\ 0 & 0 & 1 \end{bmatrix} </math> gives a 2D translation. <br /><br /> | + | \begin{bmatrix} x+T_x \\ y+T_y \\ 1 \end{bmatrix} </math> <br /> |
+ | so that the matrix <br /> | ||
+ | ::<math> \begin{bmatrix} 1 & 0 & T_x \\ 0 & 1 & T_y \\ 0 & 0 & 1 \end{bmatrix} </math> <br /> | ||
+ | gives a 2D translation. <br /><br /> | ||
The 3D case is basically the same, and by the same argument we see that the 3D translation is given by <br /> | The 3D case is basically the same, and by the same argument we see that the 3D translation is given by <br /> | ||
Line 137: | Line 145: | ||
The shear transformation is not widely used in computer graphics, but can be used for things like the oblique view in engineering drawings. The concept of a shear is to add a multiple of one coordinate to another coordinate of each point, or, for example,<br /> | The shear transformation is not widely used in computer graphics, but can be used for things like the oblique view in engineering drawings. The concept of a shear is to add a multiple of one coordinate to another coordinate of each point, or, for example,<br /> | ||
::<math>shear(x,y,z) = (x+3y,y,z)</math><br /> | ::<math>shear(x,y,z) = (x+3y,y,z)</math><br /> | ||
- | The matrix for this shear transformation looks like <math> \begin{bmatrix} 1 & 3 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}</math>.<br /><br /> | + | The matrix for this shear transformation looks like <br /> |
+ | ::<math> \begin{bmatrix} 1 & 3 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}</math>.<br /><br /> | ||
- | In general, the matrix for a shear transformation will look like the identity matrix with one non-zero element A off the diagonal. If A is in row i, column j, then the matrix will add A times the | + | In general, the matrix for a shear transformation will look like the identity matrix with one non-zero element A off the diagonal. If A is in row <math>i</math>, column <math>j</math>, then the matrix will add A times the <math>j^{th}</math> coordinate of the vector to the <math>i^{th}</math> coordinate. <br /><br /> |
For the oblique view of engineering drawings, we look at the shear matrices that add a certain amount of the z-coordinate to each of the x- and y-coordinates. The matrices are<br /> | For the oblique view of engineering drawings, we look at the shear matrices that add a certain amount of the z-coordinate to each of the x- and y-coordinates. The matrices are<br /> | ||
Line 159: | Line 168: | ||
In general, getting the inverse of a matrix can be difficult, but for the basic graphics transformations the inverses are easy because we can simply undo the geometric action of the original transformation.<br /> <br /> | In general, getting the inverse of a matrix can be difficult, but for the basic graphics transformations the inverses are easy because we can simply undo the geometric action of the original transformation.<br /> <br /> | ||
- | The inverse of the scaling matrix <math> \begin{bmatrix} \sigma_x & 0 & 0 \\ 0 & \sigma_y & 0 \\ 0 & 0 & \sigma_z \end{bmatrix} </math> is clearly | + | The inverse of the scaling matrix<br /> |
- | <math> \begin{bmatrix} \frac{1}{\sigma_x } & 0 & 0 \\ 0 & \frac{1}{\sigma_y } & 0 \\ 0 & 0 & \frac{1}{\sigma_z } \end{bmatrix} </math><br /><br /> | + | ::<math> \begin{bmatrix} \sigma_x & 0 & 0 \\ 0 & \sigma_y & 0 \\ 0 & 0 & \sigma_z \end{bmatrix} </math><br /> |
+ | is clearly <br /> | ||
+ | ::<math> \begin{bmatrix} \frac{1}{\sigma_x } & 0 & 0 \\ 0 & \frac{1}{\sigma_y } & 0 \\ 0 & 0 & \frac{1}{\sigma_z } \end{bmatrix} </math><br /><br /> | ||
- | The inverse of a rotation transformation by angle <math> \theta </math> is clearly the rotation around the same line by the angle <math>-\theta </math>.<br /><br /> | + | The inverse of a rotation transformation by angle <math> \theta </math> is clearly the rotation around the same line by the angle <math>-\theta </math>. For example, the rotation matrix |
+ | ::<math>\begin{bmatrix}cos(\theta ) & -sin(\theta ) & 0 \\ sin(\theta ) & cos(\theta ) & 0 \\ 0 & 0 & 1\end{bmatrix}</math><br /> | ||
+ | has an inverse of <br /> | ||
+ | ::<math>\begin{bmatrix}cos(\theta ) & sin(\theta ) & 0 \\ -sin(\theta ) & cos(\theta ) & 0 \\ 0 & 0 & 1\end{bmatrix}</math><br /> | ||
+ | Note that <math>sin(-\theta ) = -sin(\theta )</math> and <math> cos(-\theta ) = cos(\theta) </math>.<br /><br /> | ||
- | The inverse of the translation matrix <math> \begin{bmatrix} 1 & 0 & 0 & T_x \\ 0 & 1 & 0 & T_y \\ 0 & 0 & 1 & T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} </math> is clearly <math> \begin{bmatrix} 1 & 0 & 0 & -T_x \\ 0 & 1 & 0 & -T_y \\ 0 & 0 & 1 & -T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} </math><br /><br /> | + | The inverse of the translation matrix <br /> |
+ | ::<math> \begin{bmatrix} 1 & 0 & 0 & T_x \\ 0 & 1 & 0 & T_y \\ 0 & 0 & 1 & T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} </math> <br /> | ||
+ | is clearly<br /> | ||
+ | ::<math> \begin{bmatrix} 1 & 0 & 0 & -T_x \\ 0 & 1 & 0 & -T_y \\ 0 & 0 & 1 & -T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} </math><br /><br /> | ||
The inverse of the simple shear transformation is also straightforward. Since a simple shear adds a multiple of one vector component to another component, the inverse only needs to subtract that multiple. So we have<br /><br /> | The inverse of the simple shear transformation is also straightforward. Since a simple shear adds a multiple of one vector component to another component, the inverse only needs to subtract that multiple. So we have<br /><br /> | ||
- | ::<math> \begin{bmatrix} 1 & A \\ 0 & 1 \end{bmatrix}^{-1} = \begin{bmatrix} 1 & -A \\ 0 & 1 \end{bmatrix} </math> and the 3D case is a simple extension of this. <br /><br /> | + | ::<math> \begin{bmatrix} 1 & A \\ 0 & 1 \end{bmatrix}^{-1} = \begin{bmatrix} 1 & -A \\ 0 & 1 \end{bmatrix} </math><br /> |
+ | and the 3D case is a simple extension of this. <br /><br /> | ||
So we have a major observation: If any transformation is the product of basic graphics transformations, it is easy to find the inverse of its matrix (and hence its inverse transformation) as the product of the inverses of the components in reverse order. Or: <br /> | So we have a major observation: If any transformation is the product of basic graphics transformations, it is easy to find the inverse of its matrix (and hence its inverse transformation) as the product of the inverses of the components in reverse order. Or: <br /> | ||
::<math>(A \times B \times C)^{-1} = C^{-1} \times B^{-1} \times A^{-1} </math> <br /> | ::<math>(A \times B \times C)^{-1} = C^{-1} \times B^{-1} \times A^{-1} </math> <br /> | ||
}} | }} | ||
+ | |||
+ | ==Transformation Composition Is Matrix Multiplication== | ||
+ | Transformations are usually not used by themselves, especially in graphics, so you need to have a way to compose transformations, as in <math>g(f(P))</math>. But if G is the matrix for the transformation g, and F is the matrix for the transformation f, then the matrix product G*F is the matrix for the composed functions gf.<br /><br /> | ||
+ | For example, we have the translation represented by the matrix <br /> | ||
+ | ::<math>\begin{bmatrix} 1 & 0 & 2 \\ | ||
+ | 0 & 1 & 1 \\ | ||
+ | 0 & 0 & 1 | ||
+ | \end{bmatrix}</math> <br /> | ||
+ | which represents a move two units in the x direction and one unit in the y direction. If we want to then rotate the same object with the matrix <br /> | ||
+ | ::<math>\begin{bmatrix} -0.5 & 0.866 & 0 \\ | ||
+ | -0.866 & -0.5 & 0 \\ | ||
+ | 0 & 0 & 1 | ||
+ | \end{bmatrix}</math><br /> | ||
+ | we can represent the combination of the two actions with a single composed matrix. This matrix is found by multiplying the second action by the first action. <br /> | ||
+ | ::<math>\begin{bmatrix} -0.5 & 0.866 & 0 \\ | ||
+ | -0.866 & -0.5 & 0 \\ | ||
+ | 0 & 0 & 1 | ||
+ | \end{bmatrix} * \begin{bmatrix} 1 & 0 & 2 \\ | ||
+ | 0 & 1 & 1 \\ | ||
+ | 0 & 0 & 1 | ||
+ | \end{bmatrix} = \begin{bmatrix} -0.5 & 0.866 & -0.134 \\ | ||
+ | -0.866 & -0.5 & -2.23 \\ | ||
+ | 0 & 0 & 1 | ||
+ | \end{bmatrix}</math> <br /> | ||
+ | So this matrix represents moving, then rotating an object in sequence.<br /><br /> | ||
+ | |||
+ | In the example below, the teapot on the left has just been translated by the translation matrix above. The next image is just the rotation from the rotation images. The two images that follow are the translation then rotation and rotation then translation respectively. This demonstrates the combination of different transformations and how they must be done in the right order. <br /> | ||
+ | <center>[[Image:Rotationimage.png|1200px]] </center> | ||
+ | |||
==Transformations and Graphics Environments== | ==Transformations and Graphics Environments== | ||
+ | {{hide|1= | ||
Attention – this concept needs a bit of programming background; it involves stacks.<br /><br /> | Attention – this concept needs a bit of programming background; it involves stacks.<br /><br /> | ||
Line 181: | Line 230: | ||
As an example, consider the simple picture of a bunny head, basically made up of several spheres. Each sphere is scaled (making it an ellipsoid of the right size), rotated into the right orientation, and then translated into the proper place. The tree next to the picture shows how this is organized.<br /><br /> | As an example, consider the simple picture of a bunny head, basically made up of several spheres. Each sphere is scaled (making it an ellipsoid of the right size), rotated into the right orientation, and then translated into the proper place. The tree next to the picture shows how this is organized.<br /><br /> | ||
- | [[Image:Bunnyhead.jpg| | + | <center>[[Image:Bunnyhead.jpg|200px]] [[Image:Tranformationtree.png|400px]] </center> |
<br /><br /> | <br /><br /> | ||
Line 195: | Line 244: | ||
::sphere for main part | ::sphere for main part | ||
:pop | :pop | ||
+ | :push | ||
::translate | ::translate | ||
::scale | ::scale | ||
::sphere for left eye | ::sphere for left eye | ||
:pop | :pop | ||
+ | :push | ||
::Translate | ::Translate | ||
::Scale | ::Scale | ||
::sphere for right eye | ::sphere for right eye | ||
:pop | :pop | ||
+ | :push | ||
::Translate | ::Translate | ||
::Rotate | ::Rotate | ||
Line 208: | Line 260: | ||
::sphere for left ear | ::sphere for left ear | ||
:pop | :pop | ||
+ | :push | ||
::Translate | ::Translate | ||
::Rotate | ::Rotate | ||
Line 217: | Line 270: | ||
Notice something important: the transformations are written in the order they are applied, with the one closest to the geometry to be applied first. The right ear operations are really Translate(Rotate(Scale(sphere-for-right-ear)))<br /><br /> | Notice something important: the transformations are written in the order they are applied, with the one closest to the geometry to be applied first. The right ear operations are really Translate(Rotate(Scale(sphere-for-right-ear)))<br /><br /> | ||
- | If you are not familiar with stacks, this won’t make much sense, but this | + | If you are not familiar with stacks, this won’t make much sense, but you don't need to understand this to understand basic transformation concepts. A simple way to look at these stacks is to notice that a transformation is a 4x4 matrix or, equivalently, a 16-element array, so maintaining a stack is simply a matter of building an array<br /> |
::<b>float transStack[N][16];</b><br /> | ::<b>float transStack[N][16];</b><br /> | ||
or<br /> | or<br /> | ||
::<b>float transStack[N][4][4];</b><br /> | ::<b>float transStack[N][4][4];</b><br /> | ||
where N is the number of transformations one wants to save. | where N is the number of transformations one wants to save. | ||
+ | }} | ||
+ | |||
|other=stacks | |other=stacks | ||
|AuthorName= Nordhr | |AuthorName= Nordhr | ||
|Field=Geometry | |Field=Geometry | ||
+ | |Field2=Algebra | ||
+ | |References=Page written by Steve Cunningham. | ||
|Pre-K=No | |Pre-K=No | ||
|Elementary=No | |Elementary=No | ||
Line 233: | Line 290: | ||
|InProgress=No | |InProgress=No | ||
}} | }} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | =Messages to the Future= | ||
+ | When there is a page for 2D, 3D, 4D real spaces; affine spaces; homogeneous coordinates, this page should link to that page (to the homogeneous coordinates section). |
Current revision
Transformations |
---|
Transformations
- This picture shows an example of four basic transformations (where the original teapot is a red wire frame). On the top left is a translation, which is essentially the teapot being moved. On the top right is a scaling. The teapot has been squished or stretched in each of the three dimensions. On the bottom left is a rotation. In this case the teapot has been rotated around the x axis and the z axis (veritcal). On the bottom right is a shearing, creating a skewed look.
Contents |
Basic Description
When an object undergoes a transformation, the transformation can be represented as a matrix. Different transformations such as translations, rotations, scaling and shearing are represented mathematically in different ways. One matrix can also represent multiple transformations in sequence when the matrices are multiplied together.Basic Transformations For Graphics
Computer graphics works by representing objects in terms of simple primitives that are manipulated with transformations that preserve some primitives’ essential properties. These properties may include angles, lengths, or basic shapes. Some of these transformations can work on primitives with vertices in standard 2D or 3D space, but some need to have vertices in homogeneous coordinates. The general graphics approach is to do everything in homogeneous coordinates, but we’ll talk about the primitives in terms of both kinds when we can.
The most fundamental kinds of transformations for graphics are rotation, scaling, and translation. There are also a few cases when you might want to use shear transformations, so we’ll talk about these as well.
A More Mathematical Explanation
- Note: understanding of this explanation requires: *stacks
Linear Transformations Are Matrices
A linear transformation on 2D (or 3D) space is a function f f [...]Linear Transformations Are Matrices
A linear transformation on 2D (or 3D) space is a function f from 2D (or 3D) space to itself that has the property that
Since points in 2D or 3D space can be written as or with , , and the coordinate vectors, then we see that or
This tells us that the linear transformation is completely determined by what it does to the coordinate vectors.
Let’s see an example of this: if the transformation has the following action on the coordinates:
then for any point we have:
From this example, we see that the linear transformation is exactly determined by the matrix whose first column is , whose second column is , and whose third column is , and that applying the function f is exactly the same as multiplying by the matrix. So the linear transformation is the matrix multiplication, and we can use the concepts of linear transformation and matrix multiplication interchangeably.
Rotation
Scaling
Translation
Shear
Matrix Inverses
Transformation Composition Is Matrix Multiplication
Transformations are usually not used by themselves, especially in graphics, so you need to have a way to compose transformations, as in . But if G is the matrix for the transformation g, and F is the matrix for the transformation f, then the matrix product G*F is the matrix for the composed functions gf.
For example, we have the translation represented by the matrix
which represents a move two units in the x direction and one unit in the y direction. If we want to then rotate the same object with the matrix
we can represent the combination of the two actions with a single composed matrix. This matrix is found by multiplying the second action by the first action.
So this matrix represents moving, then rotating an object in sequence.
In the example below, the teapot on the left has just been translated by the translation matrix above. The next image is just the rotation from the rotation images. The two images that follow are the translation then rotation and rotation then translation respectively. This demonstrates the combination of different transformations and how they must be done in the right order.
Transformations and Graphics Environments
Teaching Materials
- There are currently no teaching materials for this page. Add teaching materials.
References
Page written by Steve Cunningham.
Leave a message on the discussion page by clicking the 'discussion' tab at the top of this image page.
Messages to the Future
When there is a page for 2D, 3D, 4D real spaces; affine spaces; homogeneous coordinates, this page should link to that page (to the homogeneous coordinates section).