06.
01 Translation
Maths for Computer Graphics
2D transformations
Translation
Cartesian coordinates provide a one-to-one relationship
between number and shape.
If P(x, y) is a vertex on a shape
A new point P'(x', y') can be defined using
x' = x + 3
y' = y + 1
Where P'(x', y') is three units to the right and one unit
above P.
Adding or subtracting a value to or from a coordinate
translates it in space.
06.01 Translation
Maths for Computer Graphics
2D transformations
Translation
translated
original
X
Fig. 7.1 The translated shape results by adding 3 to
every x-coordinate, and 1 to every y-coordinate of the
original shape.
The transform is
x' = x + 3
y' = y + 1
06.01 Translation
Maths for Computer Graphics
2D transformations
Scaling
Shape scaling is achieved by multiplying coordinates
x' = 2 x
y ' = 1.5 y
This transform results in a horizontal scaling of 2 and a
vertical scaling of 1.5.
Note that a point located at the origin does not change its
place, therefore, scaling is relative to the origin.
06.01 Translation
Maths for Computer Graphics
2D transformations
Scaling
Y
scaled
origina
l
X
Fig. 7.2 The scaled shape results by multiplying
every x-coordinate by 2 and every y-coordinate
by 1.5.
The transform is
x' = 2 x
y ' = 1.5 y
06.01 Translation
Maths for Computer Graphics
2D transformations
Reflection
To reflect a shape relative to the y-axis
x' = x
y' = y
To reflect a shape relative to the x-axis
x' = x
y' = y
06.01 Translation
Maths for Computer Graphics
2D transformations
Reflection
Y
original
Fig. 7.3 The top right-hand shape can give rise to the three
reflections simply by reversing the signs of coordinates.
The transform is
x' = x
y' = y
06.01 Translation
Maths for Computer Graphics
Matrices
Matrix notation was investigated by the British
mathematician Cayley around 1858.
Caley formalized matrix algebra along with the American
mathematicians Benjamin and Charles Pierce.
Carl Gauss (1777-1855) had proved that transformations
were not commutative, i.e. T1T2 T2T1, and Caleys
matrix notation would clarify such observations.
Consider the transformation T1
x = ax + by
T1
y = cx + dy
Caley proposed separating the constants from the variables
as follows
x a b x
T1 = .
y c d y
06.01 Translation
Maths for Computer Graphics
Matrices
x a b x
y = c d . y
Scaling
x' 2 0 x
y ' = 0 1.5 y
Reflection (about the y axis)
x ' 1 0 x
y ' = 0 1 y
Reflection (about the x axis)
x ' 1 0 x
y ' = 0 1 y
Translation
?
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
Homogeneous coordinates surfaced in the early 1800s
where they were independently proposed by A. F. Mbius
(who invented a one-sided curled band), Feuerbach,
tienne Bobillier, and Plcker.
Mbius named them barycentric coordinates.
They have also been called areal coordinates because of
their area calculating properties.
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
Homogeneous coordinates define a point in a plane using
three coordinates instead of two.
Initially, Plcker located a homogeneous point relative to
the sides of a triangle, but later revised his notation to the
one employed in contemporary mathematics and computer
graphics.
This states that for a point P with coordinates ( x, y ) there
exists a homogeneous point (xt, yt, t) such that X = x/t and
Y = y/t.
For example, the point (3, 4) has homogeneous coordinates
(6, 8, 2), because 3 = 6/2 and 4 =8/2.
But the homogeneous point (6, 8, 2) is not unique to (3, 4);
(12, 16, 4), (15, 20, 5) and (300, 400, 100) are all possible
homogeneous coordinates for (3, 4).
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
Y
Fig. 7.4 2D homogeneous coordinates can be visualized
as a plane in 3D space, generally where t = 1, for
convenience.
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
Consider the following transformation on the
homogeneous point (x, y, 1)
x a b c x
y = d e f . y
1 0 0 1 1
This expands to
x = ax + by + c
y = dx + ey + f
1=1
which solves the above problem of translating.
Basically, we ignore the third coordinate 1.
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D translation
The algebraic and matrix notation for 2D translation is
x = x + t x
y = y + t y
or using matrices
x 1 0 tx x
y = 0 1 t y . y
1 0 0 1 1
e.g.
x 1 0 2 x
y = 0 1 3 . y
1 0 0 1 1
Translates a shape 2 in the x directions and 3 in the y
direction.
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D scaling
The algebraic and matrix notation for 2D scaling is
x = s x x
y = s y y
or using matrices
x s x 0 0 x
y = 0 s 0 . y
y
1 0 0 1 1
e.g.
x 2 0 0 x
y = 0 1.5 0 . y
1 0 0 1 1
Scales by a factor of 2 in the x direction and 1.5 in the y
direction.
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D scaling relative to a point
To scale relative to another point (px, py):
1: Subtract (px, py) from (x, y) respectively.
This effectively translates the reference point (px, py)
back to the origin.
2: Perform the scaling operation.
3: Add (px, py) back to (x, y) respectively, to compensate
for the original subtraction.
x = s x ( x p x ) + p x
y = s y ( y p y ) + p y
which simplifies to
x = s x x + p x (1 s x )
y = s y y + p y (1 s y )
or in a homogeneous matrix form
x s x 0 p x (1 s x ) x
y = 0 s . y
/
y
p y
(1 s y
)
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D scaling relative to a point
Example
To scale a shape by 2 relative to the point (1, 1)
x 2 0 1 x
y = 0 2 1 . y
1 0 0 1 1
x' = 2 x 1
y' = 2 y 1
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflections
The matrix notation for reflecting about the y axis is
x 1 0 0 x
y = 0 1 0 . y
1 0 0 1 1
or about the x axis
x 1 0 0 x
y = 0 1 0 . y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflections relative to a line
To make a reflection about an arbitrary vertical or
horizontal axis.
e.g. To make a reflection about the vertical axis x = 1.
1: Subtract 1 from the x-coordinate.
This effectively makes the x = 1 axis coincident with the
major y axis.
2: Perform the reflection by reversing the sign of the
modified x coordinate.
3: Add 1 to the reflected coordinate to compensate for the
original subtraction.
x1 = x 1
x2 = ( x 1)
x = ( x 1) + 1
which simplifies to
x = x + 2
y = y
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflections relative to a line
x = x + 2
y = y
or in matrix form
x 1 0 2 x
y = 0 1 0 . y
1 0 0 1 1
Y
X
-2 -1 0 1 2 3 4
Fig. 7.5 The shape on the right is reflected
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflection relative to a line
A similar transform is used for reflections about an
arbitrary x-axis, y = a y
x = x
y = ( y a y ) + a y = y + 2a y
In matrix form
x ' 1 0 0 x
y ' = 0 1 2a y
y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D Shearing
A shape is sheared by leaning it over at an angle .
The y-coordinate remains unchanged but the x-
coordinate is a function of y and tan()
x = x + y tan( )
y = y
Y
Maths for Computer Graphics
ytan()
y
original sheared
Fig. 7.6 The original square shape is sheared to the right by and angle ,
and the horizontal shift is proportional to ytan().
06.01 Translation
2D Shearing
In matrix form
x 1 tan( ) 0 x
y = 0 1 0 . y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D Rotation
A point P(x, y) is to be rotated by an angle about the
origin to P'(x', y').
Y
y' P'(x', y')
y P(x, y)
X
x' x
Fig. 7.7 The point P(x, y) is rotated through an
angle to P(x, y).
x = R cos( + )
y = R sin( + )
06.01 Translation
Maths for Computer Graphics
2D Rotation
x = R cos( + )
y = R sin( + )
therefore
x = R(cos( ) cos( ) sin( ) sin( ) )
y = R(sin( ) cos( ) + cos( ) sin( ) )
x = R x cos( ) sin( )
y
R R
y = R cos( ) + x sin( )
y
R R
x = x cos( ) y sin( )
y = x sin( ) + y cos( )
In matrix form
x cos( ) sin( ) 0 x
y = sin( ) cos( ) 0 . y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D Rotation
Example
To rotate a point by 90 the matrix becomes
x 0 1 0 x
y = 1 0 0 . y
1 0 0 1 1
Thus the point (1, 0) becomes (0, 1).
If we rotate by 360 the matrix becomes
x 1 0 0 x
y = 0 1 0 . y
1 0 0 1 1
Such a matrix has a null effect and is called an
identity matrix.
06.01 Translation
Maths for Computer Graphics
2D Rotation about an arbitrary point ( p x , py )
1: Subtract ( p x , p y ) from the coordinates (x, y).
2: Perform the rotation.
3: Add ( p x , p y ) to the rotated coordinates.
1: Subtract ( p x , p y )
x1 = ( x p x )
y1= ( y p y )
2: Rotate about the origin
x2 = ( x p x ) cos( ) ( y p y ) sin( )
y 2 = ( x p x ) sin( ) + ( y p y ) cos( )
3: Add ( p x , p y )
x = ( x p x ) cos( ) ( y p y ) sin( ) + p x
y = ( x p x ) sin( ) + ( y p y ) cos( ) + p y
simplifying
x = x cos( ) y sin( ) + p x (1 cos( )) + p y sin( )
y = x sin( ) + y cos( ) + p y (1 cos( )) p x sin( )
06.01 Translation
Maths for Computer Graphics
2D Rotation about an arbitrary point
x = x cos( ) y sin( ) + p x (1 cos( )) + p y sin( )
y = x sin( ) + y cos( ) + p y (1 cos( )) p x sin( )
In matrix form
x cos( ) sin( ) px (1 cos( )) + py sin( ) x
y = sin( ) cos( ) p (1 cos( )) p sin( ) . y
y x
1 0 0 1 1
WHICH CAN NOT BE MEMORISED!!
06.01 Translation
Maths for Computer Graphics
2D Scaling about a point
To scale a point (x, y) relative to some point ( p x , p y ) we:
1: translate ( p x , p y )
2: perform the scaling (sx, sy)
3: translate ( p x , p y )
In matrix form
x x
y = [translate( p , p )] [scale( s , s )] [translate( p , p )] y
x y x y x y
1 1
which becomes
x ' 1 0 p x s x 0 0 1 0 p x x
y ' = 0 1 py 0 sy 0 0 1 p y y
1 0 0 1 0 0 1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D Scaling about a point
Concatenating
x ' 1 0 p x s x 0 0 1 0 p x x
y ' = 0 1 py 0 sy 0 0 1 p y y
1 0 0 1 0 0 1 0 0 1 1
x ' 1 0 p x s x 0 sx px x
y ' = 0 1 py 0 sy s y p y y
1 0 0 1 0 0 1 1
and finally
x ' s x 0 sx px x
y ' = 0 sy sy py y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D reflections about an arbitrary axis
A reflection about an arbitrary axis x = ax, parallel with the
y-axis, is given by
x' x
y ' = [translate ( a ,0)] [reflection ] [translate ( a ,0)] y
x x
1 1
which expands to
x 1 0 a x 1 0 0 1 0 a x x
y = 0 1 0 . 0 1 0 . 0 1 0 . y
1 0 0 1 0 0 1 0 0 1 1
x 1 0 a x 1 0 a x x
y = 0 1 0 . 0 1 0 . y
1 0 0 1 0 0 1 1
x 1 0 2a x x
y = 0 1 0 . y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
2D rotation about an arbitrary point
A rotation about the origin is given by
x cos( ) sin( ) 0 x
y = sin( ) cos( ) 0 . y
1 0 0 1 1
A rotation about an arbitrary point ( p x , p y )
x x
y = [translate( p , p )] [rotate ] [translate( p , p )] y
x y x y
1 1
which expands to
x' 1 0 p x cos( ) sin( ) 0 1 0 p x x
y ' = 0 1 p y sin( ) cos( ) 0 0 1 p y y
1 0 0 1 0 0 1 0 0 1 1
x' cos( ) sin( ) p x (1 cos( )) + p y sin( ) x
y ' = sin( ) cos( ) p y (1 cos( )) p x sin( ) y
1 0 0 1 1
06.01 Translation
Maths for Computer Graphics
3D transformations
3D translation
x 1 0 0 tx x
y 0 1 0 t y y
= .
z 0 0 1 tz z
1 0 0 1 1
0
3D scaling
x s x 0 0 0 x
y 0 sy 0 0 y
= .
z 0 0 sz 0 z
1 1
1 0 0 0
3D scaling relative to a point
x s x 0 0 p x (1 s x ) x
y 0 sy 0 p y (1 s y ) y
= .
z 0 0 sz p z (1 s z ) z
1 0 0 0 1 1
06.01 Translation
Maths for Computer Graphics
3D Rotations
Y
P(x, y, z)
P(x, y, z)
X
Z
Fig. 7.8 Rotating P about the z-
axis.
x = x cos( ) y sin( )
y = x sin( ) + y cos( )
z = z
x cos( ) sin( ) 0 0 x
y sin( ) cos( ) 0 0 y
= .
z 0 0 1 0 z
1 1
1 0 0 0
06.01 Translation
Maths for Computer Graphics
3D Rotations
When rotating about the x-axis, the x-coordinate remains
constant whilst the y- and z-coordinates are changed.
Algebraically, this is
x = x
y = y cos( ) z sin( )
z = y sin( ) + z cos( )
In a matrix transform
x 1 0 0 0 x
y 0 cos( ) sin( ) 0 y
= .
z 0 sin( ) cos( ) 0 z
1 1
1 0 0 0
06.01 Translation
Maths for Computer Graphics
3D Rotations
When rotating about the y-axis, the y-coordinate remains
constant whilst the x- and z-coordinates are changed.
Algebraically, this is
x = z sin( ) + x cos( )
y = y
z = z cos( ) x sin( )
In matrix form
x cos( ) 0 sin( ) 0 x
y 0 1 0 0 y
= .
z sin( ) 0 cos( ) 0 z
1 1
1 0 0 0
06.01 Translation
Maths for Computer Graphics
Yaw, Pitch and Roll rotations
Y
pitch roll
Z yaw X
Fig. 7.9 The convention for roll, pitch and yaw
angles.
Roll about the z axis
Pitch about the x axis
Yaw about the y axis
06.01 Translation
Maths for Computer Graphics
Roll, Pitch and Yaw Euler rotations
rotate roll about the z-axis
cos(roll ) sin( roll ) 0 0
sin( roll ) cos(roll ) 0 0
0 0 1 0
1
0 0 0
rotate pitch about the x-axis
1 0 0 0
0 cos( pitch) sin( pitch) 0
0 sin( pitch) coa( pitch) 0
1
0 0 0
rotate yaw about the y-axis
cos( yaw) 0 sin( yaw) 0
0 1 0 0
sin( yaw) 0 cos( yaw) 0
1
0 0 0
06.01 Translation
Maths for Computer Graphics
Combined rotations
A common way of combining yaw, pitch and roll is
x x
y y
= [ yaw] [ pitch] [roll ]
z z
1
1
If translation is involved
x x
y y
= [translate ] [ yaw] [ pitch] [roll ]
z z
1 1
The vertex is first rotated about the z-axis (roll),
followed by a rotation about the x-axis (pitch),
followed by a rotation about the y-axis (yaw),
then translated.
Euler rotations are relative to the fixed frame of reference.
06.01 Translation
Maths for Computer Graphics
Gimbal Lock
Y Y
Y'
X' pitch = 90
Y'
roll = 45
Z'
Z X Z X' X
Z'
Fig. 7.12 The X'Y'Z' axial system Fig. 7.13 The X'Y'Z' axial system
after a roll of 45. after a pitch of 90.
Figure 7.12 shows the orientation of XYZ after it is subjected
to a roll of 45 about the z-axis.
Figure 7.13 shows the orientation of XYZ after it is subjected
to a pitch of 90 about the x-axis.
If we now performed a yaw of 45 about the z-axis, it would
rotate the x-axis towards the x-axis, counteracting the effect of
the original roll.
Effectively, a yaw has become a negative roll rotation, caused
by the 90 pitch. This situation is known as gimbal lock,
because one degree of rotation has been lost.
06.01 Translation
Maths for Computer Graphics
Rotating about an axis
Y
P(x, y,
z)
px
z=
py
z
X
Z P(x, y, z)
Fig. 7.14 Rotating a point about an axis parallel with the
z-axis.
x x
y y
= [translate( px , py ,0)] [rotate ] [translate( px , py ,0)]
z z
1 1
Or in matrix form
x cos( ) sin( ) 0 p x (1 cos( )) + p y sin( ) x
y sin( ) cos( ) 0 p (1 cos( )) p sin( ) y
= y x
.
z 0 0 1 0 z
1
1 0 0 0 1
06.01 Translation
Maths for Computer Graphics
Determinants
Determinants arise in the solution of linear equations
c1 = a1 x + b1 y (1)
c 2 = a 2 x + b2 y (2)
Solving for x
Multiply (1) by b2 and (2) by b1
c1b2 = a1b2 x + b1b2 y
c 2 b1 = a2 b1 x + b1b2 y
Then subtract
c1b2 c2 b1 = a1b2 x a 2 b1 x
c1b2 c2 b1
x=
a1b2 a2 b1
Provided that the denominator a1b2 a2 b1 0 .
06.01 Translation
Maths for Computer Graphics
Determinants
c1 = a1 x + b1 y (1)
c 2 = a 2 x + b2 y (2)
Solving for y
Multiply (1) by a2 and (2) by a1
a 2 c1 = a1 a 2 x + a 2 b1 y
a1c2 = a1 a 2 x + a1b2 y
Subtracting
a1c2 a2 c1 = a1b2 y a2 b1 y
a1c2 a2 c1
y=
a1b2 a2 b1
Provided that the denominator a1b2 a2 b1 0 .
06.01 Translation
Maths for Computer Graphics
Determinants
c1b2 c2 b1
x=
a1b2 a2 b1
a1c2 a2 c1
y=
a1b2 a2 b1
Let
a1 b1
= a1b2 a2 b1 = the determinat
a2 b2
x 1
=
c1b2 c 2 b1 a1b2 a 2 b1
y 1
=
a1c2 a 2 c1 a1b2 a 2 b1
x y 1
= =
c1b2 c 2 b1 a1c2 a 2 c1 a1b2 a2 b1
Et voila!
x y 1
= =
c1 b1 a1 c1 a1 b1
c2 b2 a2 c2 a2 b2
06.01 Translation
Maths for Computer Graphics
Determinants summary
c1 = a1 x + b1 y
c 2 = a 2 x + b2 y
c1 a1 b1 x
c = a b y
2 2 2
x y 1
= =
c1 b1 a1 c1 a1 b1
c2 b2 a2 c2 a2 b2
Example
10 = 2 x + y
4 = 5x y
x y 1
= =
10 1 2 10 2 1
4 1 5 4 5 1
x y 1
= =
14 42 7
Therefore x = 2 and y = 6
06.01 Translation
Maths for Computer Graphics
Determinants
With a set of three linear equations:
d1 = a1 x + b1 y + c1 z
d 2 = a2 x + b2 y + c2 z
d 3 = a3 x + b3 y + c3 z
the value of x is defined as
d1b2 c3 d1b3 c2 + d 2 b3 c1 d 2 b1c3 + d 3b1c 2 d 3b2 c1
x=
a1b2 c3 a1b3 c2 + a 2 b3 c1 a2 b1c3 + a3b1c2 a3b2 c1
with similar expressions for y and z.
Once more, the denominator comes from the determinant
of the matrix associated with the matrix formulation of the
linear equations:
06.01 Translation
Maths for Computer Graphics
Determinants
d1 = a1 x + b1 y + c1 z
d 2 = a2 x + b2 y + c2 z
d 3 = a3 x + b3 y + c3 z
d1 a1 b1 c1 x
d = a b2 c2 . y
2 2
d 3 a3 b3 c3 z
therefore
x y z 1
= = =
d1 b1 c1 a1 c1 d1 a1 b1 d1 a1 b1 c1
d2 b2 c2 a2 c2 d2 a2 b2 d2 a2 b2 c2
d3 b3 c3 a3 c3 d3 a3 b3 d3 a3 b3 c3
a1 b1 c1
a2 b2 c2 = a1b2 c3 a1b3 c2 + a 2 b3 c1 a2 b1c3 + a3b1c2 a3b2 c
a3 b3 c3
which can be written
b2 c2 b1 c1 b1 c1
a1 a2 + a3
b3 c3 b3 c3 b2 c2
06.01 Translation
Maths for Computer Graphics
Graphical interpretation of the determinant
Consider the transform
x a b x
y = c d . y
The determinant of the transform is ad cb.
The vertices of the unit-square are moved as follows
(0, 0) (0, 0)
(1, 0) (a, c)
(1, 1) (a + b, c + d )
(0, 1) (b, d )
06.01 Translation
Maths for Computer Graphics
Determinant and the unit square
Y
b a
(a+b, c+d)
C D
(b, d)
B d
A
E
(a, c)
G F c
(0, 0)
X
a b
Fig. 7.28 The inner parallelogram is the transformed unit
square.
area = ( a + b)(c + d ) B C D E F G
= ac + ad + cb + bd 12 bd cb 12 ac 12 bd cb 12 ac
= ad cb
which is the determinant of the transform.
But as the area of the original unit-square was 1, the
determinant of the transform controls the scaling factor
applied to the transformed shape.
06.01 Translation
Maths for Computer Graphics
Determinant of a transform
This transform encodes a scaling of 2, and results in an
overall area scaling of 4
2 0 2 0
0 2 and the determinant is 0 2 = 4
This transform encodes a scaling of 3 and a translation of
(3, 3), and results in an overall area scaling of 9:
3 0 3
0 3 3 and the determinant is
0 0 1
3 3 0 3 0 3
3 0 +0 =9
0 1 0 1 3 3
Consider the rotate transform
cos( ) sin( )
sin( ) cos( ) its determinant is cos 2
( ) + sin 2
( ) = 1
