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