HCI 530 : Seminar (HCI)
• Damian Schofield
HCI 530: Seminar (HCI)
• Transforms
– Two Dimensional
– Three Dimensional
• The Graphics Pipeline
Types of Transformation
In computer graphics many applications need to alter or
manipulate a picture, for example, by changing its size,
position or orientation.
This can be done by applying a geometric transformation
to the co-ordinate points defining the picture.
Translation
A common requirement is to move a picture to a new position.
This is achieved by
means of a
translation or shift
transformation.
Translation
The new co-ordinates of the point (x’, y’) are given by
x’ = x + tx
y’ = y + ty
Scaling
A scaling transformation is used to change the size of an
object.
x’ = x . sx
y’ = y . sy
If | sx | and | sy | are both > 1, the effect is to increase the size
of an object.
In order to reduce the size of an object, | sx | and | sy | must
both be < 1.
Scaling
The figure illustrates a symmetric or uniform
scaling transformation in which the x- and yscale factors are the
same (sx = sy) so
that the object is
expanded by the
same amount in
each axis direction.
Scaling
This figure illustrates two asymmetric or non-uniform scaling
transformations in which the x- and y- scale factors are not equal (sx  sy).
Here the object changes its size by different amounts in the x- and y- axis
directions.
Scaling
If the scale factor in x is negative (sx < 0) then the object is
reflected in the y-axis.
Similarly if the scale factor in y is negative (sy < 0) then the
object is reflected in the x-axis.
Rotation
Another common type
of transformation is
rotation.
This is used to orientate
objects.
The figure shows an
object rotated by and
angle a about the
origin.
Rotation
A line joining the point with the origin makes an
angle b with the x-axis and has a length R, hence:
x = R . Cosb
y = R . sinb
After rotation the point has
co-ordinates x’ and y’ with values
x’ = R . cos (a + b)
y’ = R . sin (a + b)
Rotation
Expanding these formulae for cos (a + b)
and sin (a + b) and rearranging gives
x’ = R . cosa . cosb - R . sina . sinb
y’ = R . sina . cosb + R . sinb . cosa
Finally, substituting for
R . cos b and R . sin b gives
x’ = x . cosa - y . sina
y’ = x . sina + y . cosa
Shearing
A shear transformation has the effect of distorting the shape of an object.
The new x- and y- co-ordinates of a point after shearing are given by
x’ = x + y  a
If a  0 then a shear
in x is obtained.
Similarly, if b  0
then a shear in y
is obtained.
y’ = y + x  b
Matrix Representation
For each of the basic transformations we can derive an expression for the new coordinates of a point after transformation.
We can now write down a general formula for the transformation of points.
x’ = a  x + b  y + c
y’ = d  x + e  y + f
where a, b, c, d, e, and f are all constants.
Matrix Representation
We can now write down a general formula for the transformation of points.
x’ = a  x + b  y + c
y’ = d  x + e  y + f
where a, b, c, d, e, and f are all constants.
The expressions for x’ and y’ are linear functions of x and y.
This can be expressed using matrices as
 x'  a b   x   c 
 y '  d e    y  +  f 
  
    
Matrix Representation
Now include all of the constants in one matrix
 x
 x'  a b c   
 y '  d e f    y 
  
 1 
 
A square matrix is much easier to deal with so the matrix is extended to a 3x3 matrix.
 x'   a b c   x 
 y '   d e f    y 
  
  
 w'  g h i   1 
The column vectors representing points now have and extra entry.
If the bottom row of the matrix is [0 0 1] then w’ will be 1 and we can ignore it.
Matrix Representation
Revision ....
Matrix Revision
You probably know what a matrix is already. However, a quick example won't hurt.
A matrix is just a two-dimensional group of numbers.
Instead of a list, called a vector, a matrix is a rectangle, like the following:
You can set a variable to be a matrix just as you can set a variable to be a number.
In this case, x is the matrix containing those four numbers (in that particular order).
Matrix Revision
Matrix Revision
Adding and Subtracting Matrices
Matrix addition is fairly simple, and is done entry-wise.
Add the following matrices:
Matrix Revision
Add the following matrices:
I need to add the pairs of entries, and then simplify for the final answer:
So the answer is:
Matrix Revision
Add the following matrices:
I need to add the pairs of entries, and then simplify for the final answer:
So the answer is:
Matrix Revision
Up until now, you've been able to add any two things you felt like: numbers,
variables, equations, and so forth. But addition doesn't always work with matrices.
Perform the indicated operation, or explain why it is not possible.
Since matrices are added entry-wise, I have to add the 1 and the 4, the 2 and 5,
the 0 and the 7, and the 3 and the 8.
But what do I add to the 6 and to the 9?
There are no corresponding entries in the first matrix that can be added to these
entries in the second matrix.
Matrix Revision
Up until now, you've been able to add any two things you felt like: numbers,
variables, equations, and so forth. But addition doesn't always work with matrices.
Perform the indicated operation, or explain why it is not possible.
So the answer is:
I can't add these matrices, because they're not the same size.
This is always the case: To add two matrices, they must be of the same size.
If they are not the same size (if they do not have the same "dimensions"), then the
addition is "not defined" (doesn't make mathematical sense).
Matrix Revision
Subtraction works entry-wise, too.
Given the following matrices, find A – B.
A and B are the same size, each being 2 × 3 matrices, so I can subtract,
Matrix Revision
Matrix Revision
Matrix Multiplication
Here is a key point:
You cannot just multiply each number by the corresponding number in the
other matrix.
Matrix multiplication is not like addition or subtraction.
It is more complicated, but the overall process is not hard to learn.
Matrix Revision
Matrix Multiplication
You cannot just multiply each number by the corresponding number in the
other matrix.
Example:
Solution:
Matrix Revision
Matrix Multiplication
Matrix multiplication is not an easy task to learn, and you do need to pay attention
to avoid a careless error or two.
Here's the process:
Step 1: Move across the top row of the first matrix, and down the first column of
the second matrix:
Matrix Revision
Matrix Multiplication
Matrix multiplication is not an easy task to learn, and you do need to pay attention
to avoid a careless error or two.
Step 2: Multiply each number from the top row of the first matrix by the number in
the first column on the second matrix.
In this case, that means multiplying 1*2 and 6*9. Then, take the sum of those
values (2+54):
Matrix Revision
Matrix Multiplication
Matrix multiplication is not an easy task to learn, and you do need to pay attention
to avoid a careless error or two.
Step 3: Insert the value you just got into the answer matrix.
Since we are multiplying the 1st row and the 1st column, our answer goes into that
slot in the answer matrix:
Matrix Revision
Matrix Multiplication
Matrix multiplication is not an easy task to learn, and you do need to pay attention
to avoid a careless error or two.
Step 4: Repeat for the other rows and columns. That means you walk down the
first row of the first matrix and this time the second column of the second matrix.
Then the second row of the first matrix
and the first column of the second,
and finally the bottom of the first
matrix and the right column of the
second matrix:
Matrix Revision
Matrix Multiplication
Matrix multiplication is not an easy task to learn, and you do need to pay attention
to avoid a careless error or two.
Step 5: Insert all of those values
into the answer matrix.
If you work the other two numbers,
you will get 1*2+6*7=44 and 3*2+8*9=78.
Insert them into the answer matrix in the
corresponding positions and you get:
Matrix Revision
Matrix Multiplication
What if the matrices aren't squares?
Then you have to add another step.
In order to multiply two matrices, the matrix on the left must have as many columns
as the matrix on the right has rows.
That way you can match up each
pair while you're multiplying.
The size of the final matrix is determined
by the rows in the left matrix and the
columns in the right.
Matrix Revision
Matrix Multiplication
In order to multiply two matrices,
the matrix on the left must have as
many columns as the matrix on the
right has rows.
That way you can match up each
pair while you're multiplying.
The size of the final matrix is determined
by the rows in the left matrix and the
columns in the right.
Matrix Revision
 x' 1 2 3 10 
 y '  4 5 6  20
  
  
 z '  7 8 9 30 
 x'  10 + 40 + 90  140 
 y '   40 + 100 + 180   320
  
 

 z '  70 + 160 + 270 500
Matrix Revision
Matrix Representation (2)
For each of the basic transformations we can derive an expression for the new coordinates of a point after transformation.
We can now write down a general formula for the transformation of points.
x’ = a  x + b  y + c
y’ = d  x + e  y + f
where a, b, c, d, e, and f are all constants.
Matrix Representation (2)
We can now write down a general formula for the transformation of points.
x’ = a  x + b  y + c
y’ = d  x + e  y + f
where a, b, c, d, e, and f are all constants.
The expressions for x’ and y’ are linear functions of x and y.
This can be expressed using matrices as
 x'  a b   x   c 
 y '  d e    y  +  f 
  
    
Matrix Representation (2)
Now include all of the constants in one matrix
 x
 x'  a b c   
 y '  d e f    y 
  
 1 
 
A square matrix is much easier to deal with so the matrix is extended to a 3x3 matrix.
 x'   a b c   x 
 y '   d e f    y 
  
  
 w'  g h i   1 
The column vectors representing points now have and extra entry.
If the bottom row of the matrix is [0 0 1] then w’ will be 1 and we can ignore it.
Matrix Representation
The formulae for each of the different types of transformation can now be written
using this matrix notation.
Translate
Scale
1 0 t x 
0 1 t 
y

0 0 1 
Rotate
S x
0

 0
0
Sy
0
0
0
1
Shear
cos a
 sin a

 0
 sin a
cos a
0
0
0
1
1 a 0
b 1 0


0 0 1
Matrix Representation
 x'  a b
 y '  d e
  
 z '   g h
c   x



f    y
i   z 
 x' ax + by + cz 
 y '  dx + ey + fz 
  

 z '   gx + hy + iz 
Matrix Representation
There is a special matrix which leave the co-ordinates x’ and y’ equal to x and y.
This is known as the unit or identity matrix.
x’ = x
y’ = y
w’ = 1
 x'  1 0 0  x 
 y '   0 1 0    y 
  
  
 w' 0 0 1  1 
Concatenation of Transforms
We have examined the basic types of transformation and
derived the corresponding matrices.
In this section we will see how these transformations can be
combined to perform more complex operations such as
rotation or scaling about an arbitrary point.
Concatenation of Transforms
Consider the transformation to rotate an object about its
centre point (xc, yc).
This can be broken down into a series of basic
transformations as follows:
• Translate the object by (-xc, -yc) so that the centre is at the origin.
• Perform a rotation about the origin.
• Translate the object by (xc, yc) to return it to its original position.
Concatenation of Transforms
Concatenation of Transforms
This series of transformations is illustrated in the previous
figure. How can this composite transform be expressed in
terms of matrices?
If we apply each of the component transforms separately:
Translate by (-xc, -yc):
 x1  1 0  xc   x 
 y   0 1  y    y 
c  
 1 
 1   0 0 1   1 
Concatenation of Transforms
Rotate by an angle a about the origin
 x2  cos a
 y    sin a
 2 
 1   0
 sin a
cos a
0
0  x1 
0   y1 
1  1 
 x2  cos a
 y    sin a
 2 
 1   0
 sin a
cos a
0
0 1 0  xc   x 
0  0 1  yc    y 
1  0 0 1   1 
Concatenation of Transforms
Translate by (xc, yc):
 x3  1 0 xc   x2 
 y   0 1 y    y 
c  2
 3 
 1   0 0 1   1 
 x3  1 0 xc  cos a
 y   0 1 y    sin a
c 
 3 
 1   0 0 1   0
 x3  cos a
 y    sin a
 3 
 1   0
 sin a
cos a
0
 sin a
cos a
0
0 1 0  xc   x 
0  0 1  yc    y 
1  0 0 1   1 
( xc  cos a  xc + sin a  yc )   x 
( yc  sin a  xc + cos a  yc )   y 
  1 
1
Concatenation of Transforms
The net effect of this transformation is to map the point (x, y) onto the
point (x3, y3). This mapping can be expressed as the matrix multiplication
of the three basic transformation matrices used.
The value of using square matrices to represent transformations can
now be seen.
Square matrices can be multiplied together to produce another square
matrix of the same dimensions. Hence composite transformations can be
expressed as a single transformation matrix by multiplying them
together.
 x3  cos a
 y    sin a
 3 
 1   0
 sin a
cos a
0
( xc  cos a  xc + sin a  yc )   x 
( yc  sin a  xc + cos a  yc )   y 
  1 
1
Concatenation of Transforms
Ordering of Transforms
We have already seen how more than one transformation
can be combined by multiplying together the corresponding
transformation matrices.
Matrix multiplication is not a communitive operation.
M1  M2  M2  M 1
In the same way, the application of transformations is not, in
general, commutative and therefore the order in which
transforms are combined is important.
Ordering of Transforms
The first example shows the effect of rotating and then translating the
object. The second does the same translation and rotation but in a
different order, first translating and then rotating the object. The effect in
both cases is clearly not the same.
Homogenous Coordinates
To obtain square matrices an additional row was added to the matrix and
an additional co-ordinate, the w- co-ordinate, was added to the vector for
a point.
In this way a point in 2D space is expressed in three-dimensional
homogeneous co-ordinates.
The technique of representing a point in space whose dimension is one
greater than that of the point is called homogeneous representation. It
provides a consistent, uniform way of handling affine transformations.
Homogenous Coordinates
On converting a 2D point (x, y) to homogeneous co-ordinates the w- coordinate is set to 1, giving the corresponding homogeneous co-ordinate
point (x, y, 1).
This may then be transformed by the 3x3 homogeneous transformation
matrix as shown below.
 x'   a b c   x 
 y '   d e f    y 
  
  
 w'  g h i   1 
Homogenous Coordinates
In general, the elements in the bottom row of the matrix, g, h and i, may
be set to any value resulting in w  1.
The effect of this general transformation matrix is to transform a point (x,
y, 1) in the w = 1 plane onto the point (x’, y’, w’) in the w = w’ plane.
The real-world co-ordinate space is the plane w = 1. And therefore the
transformed point must be mapped back onto the w = 1 plane.
This is done by projecting the point x’, y’ w’ onto the plane w = 1.
Homogenous Coordinates
Homogenous Coordinates
The 2D real-world point is (x”, y”) where x” and y” are the x- and y- co-ordinates of
the projected point.
The mathematical effect of the projection is that of dividing the x- and y- components
by the w- component. Hence
x” = x’ / w’
y” = y’ / w’
Homogenous Coordinates
The resulting homogeneous point is (x, y, 4).
We obtain the corresponding 2D point by performing the homogeneous division.
This gives us the point (x/4, y/4).
From this we can see that the bottom right element in the matrix performs overall or
uniform scaling.
 x '  1 0 0   x 
 y'   0 1 0    y 
  
  
 w' 0 0 4  1 
Object and Axis Transformations
The types of transformations we have examined up to now are known as
object transformations.
We think of the object being transformed, while the axes remain fixed.
There is a another way of looking at transformations - as axis
transformations.
Here, the object remains fixed while the axes are changed.
Object and Axis Transformations
Normalisation Transformations
Normalisation Transformations
The window and viewport are aligned with their respective axes
and are therefore defined by their bottom left and top right hand
corners.
The two corners of the window are given by the points
(wxmin, wymin) and (wxmax, wymax).
The corresponding corners of the viewport are
(vxmin, vymin) and (vxmax, vymax).
Normalisation Transformations
Apply a transformation to map the bottom left hand corner of
the window to the origin:
1 0  wx min 


P'  0 1  wy min   P
 0 0 0 
Normalisation Transformations
Normalisation Transformations
Next apply a scaling to make the size of the window the same
as the size of the viewport.
If the x- and y- scale factors, sx and sy are
v x max  v x min
sx 
wx max  wx min
sy 
v y max  v y min
wy max  wy min
Normalisation Transformations
then the transformation becomes
 s x 0 0  1 0  wx min 
P'  0 s y 0  0 1  wy min   P
 0 0 1   0 0 0 
Finally, apply a transformation so that a point at the origin is mapped onto
the bottom left hand corner of the viewport:
1 0 v x min   s x 0 0  1 0  wx min 
P'  0 1 v y min   0 s y 0  0 1  wy min   P
 0 0 0   0 0 1   0 0 0 
Summary
A transformation may be either an object transformation in which the points
are transformed, or an axis transformation in which the co-ordinate axes are
transformed and the object points expressed relative to the new axes.
All of these transformations can be expressed in a 3x3 matrix which is
multiplied with the vector for a point to obtain the co-ordinates of the
transformed point.
A 3x3 matrix is used to enable different transformations to be combined by
multiplying the matrices together.
After transformation we have the point (x’, y’, w’). The real-world 2D coordinates are obtained by dividing the x- and y- components by the wcomponent.