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
Fig. 7.1 The translated shape results by adding 3 to every x-coordinate, and 1 to every y-coordinate of the
original shape.
X
Y
original
translated
The transform is
1'
3'
+=
+=
yy
xx
06.01 Translation
Maths for Computer Graphics
2D transformations
Scaling Shape scaling is achieved by multiplying coordinates
xx 2'= yy 5.1'=
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
X
Y
Fig. 7.2 The scaled shape results by multiplying every x-coordinate by 2 and every y-coordinate
by 1.5.
original
scaled
The transform is
yy
xx
5.1'
2'
=
=
06.01 Translation
Maths for Computer Graphics
2D transformations
Reflection To reflect a shape relative to the y-axis
yy
xx
=
−=
'
'
To reflect a shape relative to the x-axis
yy
xx
−=
=
'
'
06.01 Translation
Maths for Computer Graphics
2D transformations
Reflection
original
X
Y
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
yy
xx
±=
±=
'
'
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. T1×T2 ≠ T2×T1, and Caley’s matrix notation would clarify such observations. Consider the transformation T1
T1 dycxy
byaxx
+=′
+=′
Caley proposed separating the constants from the variables as follows
T1
=
′
′
y
x
dc
ba
y
x.
06.01 Translation
Maths for Computer Graphics
Matrices
=
′
′
y
x
dc
ba
y
x.
Scaling
⋅
=
y
x
y
x
5.10
02
'
'
Reflection (about the y axis)
⋅
−=
y
x
y
x
10
01
'
'
Reflection (about the x axis)
⋅
−
=
y
x
y
x
10
01
'
'
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. Möbius (who invented a one-sided curled band), Feuerbach, Étienne Bobillier, and Plücker. Möbius 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, Plücker 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 ),( yx 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
1
t
X
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)
=
′
′
1
.
1001
y
x
fed
cba
y
x
This expands to
cbyaxx ++=′
feydxy ++=′
11= 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
xtxx +=′
ytyy +=′
or using matrices
=
′
′
1
.
100
10
01
1
y
x
t
t
y
x
y
x
e.g.
=
′
′
1
.
100
310
201
1
y
x
y
x
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
xxsx =′
yysy =′
or using matrices
=
′
′
1
.
100
00
00
1
y
x
ys
xs
y
x
e.g.
=
′
′
1
.
100
05.10
002
1
y
x
y
x
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.
xxxppxsx +−=′ )(
yyyppysy +−=′ )(
which simplifies to
)1(xxx
spxsx −+=′
)1(yyy
spysy −+=′
or in a homogeneous matrix form
−
−
=
′/
′
1
.
100
)1(0
)1(0
1
y
x
sps
sps
y
x
yyy
xxx
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(
−
−
=
′
′
1
.
100
120
102
1
y
x
y
x
12'
12'
−=
−=
yy
xx
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflections The matrix notation for reflecting about the y axis is
−
=
′
′
1
.
100
010
001
1
y
x
y
x
or about the x axis
−=
′
′
1
.
100
010
001
1
y
x
y
x
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.
11 −= xx
)1(2 −−= xx
1)1( +−−=′ xx
which simplifies to
2+−=′ xx
yy =′
06.01 Translation
Maths for Computer Graphics
Homogeneous coordinates
2D reflections relative to a line
2+−=′ xx
yy =′
or in matrix form
−
=
′
′
1
.
100
010
201
1
y
x
y
x
1 2 3 4 -1 -2 0
Fig. 7.5 The shape on the right is reflected
X
Y
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,
yay =
xx =′
yyyayaayy 2)( +−=+−−=′
In matrix form
⋅
−=
1100
210
001
1
'
'
y
x
ay
x
y
06.01 Translation
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(β)
)tan(βyxx +=′
yy =′
Maths for Computer Graphics
θ
Fig. 7.6 The original square shape is sheared to the right by and angle β,
and the horizontal shift is proportional to ytan(β).
ytan(β) y
original sheared
X
Y
β
Maths for Computer Graphics
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').
X
Y
P(x, y)
P'(x', y') y'
y
x' x
β
Fig. 7.7 The point P(x, y) is rotated through an angle β to P′(x′, y′).
)cos( βθ +=′ Rx
)sin( βθ +=′ Ry
θ
06.01 Translation
Maths for Computer Graphics
2D Rotation )cos( βθ +=′ Rx
)sin( βθ +=′ Ry
therefore
( ))sin()sin()cos()cos( βθβθ −=′ Rx
( ))sin()cos()cos()sin( βθβθ +=′ Ry
−=′ )sin()cos( ββ
R
y
RxRx
+=′ )sin()cos( ββ
Rx
R
yRy
)sin()cos( ββ yxx −=′
)cos()sin( ββ yxy +=′
In matrix form
−
=
′
′
1
.
100
0)cos()sin(
0)sin()cos(
1
y
x
y
x
ββββ
06.01 Translation
Maths for Computer Graphics
2D Rotation Example To rotate a point by 90° the matrix becomes
−
=
′
′
1
.
100
001
010
1
y
x
y
x
Thus the point (1, 0) becomes (0, 1). If we rotate by 360° the matrix becomes
=
′
′
1
.
100
010
001
1
y
x
y
x
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 ),(yx
pp 1: Subtract ),( ypxp from the coordinates (x, y).
2: Perform the rotation. 3: Add ),( ypxp to the rotated coordinates.
1: Subtract ),(
yxpp
)(1 xpxx −=
)(1 ypyy −=
2: Rotate β about the origin
)sin()()cos()(2 ββyx
pypxx −−−=
)cos()()sin()(2 ββyx
pypxy −+−=
3: Add ),(yx
pp
xpypyxpxx +−−−=′ )sin()()cos()( ββ
ypypyxpxy +−+−=′ )cos()()sin()( ββ
simplifying
)sin())cos(1()sin()cos( ββββyx
ppyxx +−+−=′
)sin())cos(1()cos()sin( ββββxy
ppyxy −−++=′
06.01 Translation
Maths for Computer Graphics
2D Rotation about an arbitrary point )sin())cos(1()sin()cos( ββββ
yxppyxx +−+−=′
)sin())cos(1()cos()sin( ββββxy
ppyxy −−++=′
In matrix form
−−
+−−
=
′
′
1
.
100
)sin())cos(1()cos()sin(
)sin())cos(1()sin()cos(
1
y
x
pp
pp
y
x
xy
yx
ββββββββ
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 ),(yx
pp we:
1: translate ),(yx
pp −−
2: perform the scaling (sx, sy) 3: translate ),(
yxpp
In matrix form
[ ] [ ] [ ]
−−
′
′
⋅⋅⋅=
1
),(translate),(),(translate
1
y
x
ppssscaleppy
x
yxyxyx
which becomes
−
−
=
1100
10
01
100
00
00
100
10
01
1
'
'
y
x
p
p
s
s
p
p
y
x
y
x
y
x
y
x
06.01 Translation
Maths for Computer Graphics
2D Scaling about a point
Concatenating
−
−
=
1100
10
01
100
00
00
100
10
01
1
'
'
y
x
p
p
s
s
p
p
y
x
y
x
y
x
y
x
−
−
=
1100
0
0
100
10
01
1
'
'
y
x
pss
pss
p
p
y
x
yyy
xxx
y
x
and finally
−
−
=
1100
0
0
1
'
'
y
x
pss
pss
y
x
yyy
xxx
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
[ ] [ ] [ ]
⋅−⋅⋅=
1
)0,()0,(
1
'
'
y
x
atranslatereflectionatranslatey
x
xx
which expands to
−
−
=
′
′
1
.
100
010
01
.
100
010
001
.
100
010
01
1
y
xaa
y
xxx
−
=
′
′
1
.
100
010
01
.
100
010
01
1
y
xaa
y
xxx
−
=
′
′
1
.
100
010
201
1
y
xa
y
xx
06.01 Translation
Maths for Computer Graphics
2D rotation about an arbitrary point A rotation about the origin is given by
−
=
′
′
1
.
100
0)cos()sin(
0)sin()cos(
1
y
x
y
x
ββββ
A rotation about an arbitrary point ( )yx
pp ,
[ ] [ ] [ ]
⋅−−⋅⋅=
′
′
1
),(translaterotate),(translate
1
y
x
ppppy
x
yxyxβ
which expands to
⋅
−
−
⋅
−
⋅
=
1100
10
01
100
0)cos()sin(
0)sin()cos(
100
10
01
1
'
'
y
x
p
p
p
p
y
x
y
x
y
x
ββββ
⋅
−−
+−−
=
1100
)sin())cos(1()cos()sin(
)sin())cos(1()sin()cos(
1
'
'
y
x
pp
pp
y
x
xy
yx
ββββββββ
06.01 Translation
Maths for Computer Graphics
3D transformations 3D translation
=
′
′
′
1
.
1000
100
010
001
1
z
y
x
t
t
t
z
y
x
z
y
x
3D scaling
=
′
′
′
1
.
1000
000
000
000
1
z
y
x
s
s
s
z
y
x
z
y
x
3D scaling relative to a point
−
−
−
=
′
′
′
1
.
1000
)1(00
)1(00
)1(00
1
z
y
x
sps
sps
sps
z
y
x
zzz
yyy
xxx
06.01 Translation
Maths for Computer Graphics
3D Rotations
P(x, y, z)
P′(x′, y′, z)
X
Y
Z
β
Fig. 7.8 Rotating P about the z-axis.
)sin()cos( ββ yxx −=′
)cos()sin( ββ yxy +=′
zz =′
−
=
′
′
′
1
.
1000
0100
00)cos()sin(
00)sin()cos(
1
z
y
x
z
y
x
ββββ
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
xx =′
)sin()cos( ββ zyy −=′
)cos()sin( ββ zyz +=′
In a matrix transform
−
=
′
′
′
1
.
1000
0)cos()sin(0
0)sin()cos(0
0001
1
z
y
x
z
y
x
ββββ
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
)cos()sin( ββ xzx +=′
yy =′
)sin()cos( ββ xzz −=′
In matrix form
−=
′
′
′
1
.
1000
0)cos(0)sin(
0010
0)sin(0)cos(
1
z
y
x
z
y
x
ββ
ββ
06.01 Translation
Maths for Computer Graphics
Yaw, Pitch and Roll rotations
roll pitch
yaw X
Y
Z
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
−
1000
0100
00)cos()sin(
00)sin()cos(
rollroll
rollroll
rotate pitch about the x-axis
−
1000
0)()sin(0
0)sin()cos(0
0001
pitchcoapitch
pitchpitch
rotate yaw about the y-axis
−
1000
0)cos(0)sin(
0010
0)sin(0)cos(
yawyaw
yawyaw
06.01 Translation
Maths for Computer Graphics
Combined rotations A common way of combining yaw, pitch and roll is
[ ] [ ] [ ]
⋅⋅⋅=
′
′
′
11
z
y
x
rollpitchyawz
y
x
If translation is involved
[ ] [ ] [ ] [ ]
⋅⋅⋅⋅=
′
′
′
11
z
y
x
rollpitchyawtranslatez
y
x
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
Gimbal Lock
Figure 7.12 shows the orientation of X′Y′Z′ after it is subjected to a roll of 45° about the z-axis.
Figure 7.13 shows the orientation of X′Y′Z′ 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.
Maths for Computer Graphics
Z'
roll = 45º
X
Y
Z X
Y
Z
X' Y'
Z'
Y'
X'
pitch = 90º
Fig. 7.12 The X'Y'Z' axial system
after a roll of 45°. Fig. 7.13 The X'Y'Z' axial system
after a pitch of 90°.
06.01 Translation
Maths for Computer Graphics
Rotating about an axis
Fig. 7.14 Rotating a point about an axis parallel with the
z-axis.
P′(x′, y′, z′)
P(x, y, z)
β
X
Y
Z
px
py z′= z
[ ] [ ] [ ]
⋅−−⋅⋅=
′
′
′
1
)0,,()0,,(
1
z
y
x
pptranslaterotatepptranslatez
y
x
yxyxβ
Or in matrix form
−−
+−−
′
′
′
=
11000
0100
)sin())cos(1(0)cos()sin(
)sin())cos(1(0)sin()cos(
1
.
z
y
x
pp
pp
z
y
x
xy
yx
ββββββββ
06.01 Translation
Maths for Computer Graphics
Determinants Determinants arise in the solution of linear equations
ybxac 111 += (1)
ybxac 222 += (2)
Solving for x Multiply (1) by b2 and (2) by b1
ybbxbabc 212121 +=
ybbxbabc 211212 +=
Then subtract xbaxbabcbc 12211221 −=−
1221
1221
baba
bcbcx
−−
=
Provided that the denominator 01221 ≠− baba .
06.01 Translation
Maths for Computer Graphics
Determinants
ybxac 111 += (1)
ybxac 222 += (2)
Solving for y Multiply (1) by a2 and (2) by a1
ybaxaaca 122112 +=
ybaxaaca 212121 +=
Subtracting ybaybacaca 12211221 −=−
1221
1221
baba
cacay
−−
=
Provided that the denominator 01221 ≠− baba .
06.01 Translation
Maths for Computer Graphics
Determinants
1221
1221
baba
bcbcx
−−
=
1221
1221
baba
cacay
−−
=
Let
1221
22
11baba
ba
ba−= = the determinat
12211221
1
bababcbc
x
−=
−
12211221
1
babacaca
y
−=
−
122112211221
1
babacaca
y
bcbc
x
−=
−=
−
Et voila!
22
11
22
11
22
11
1
ba
ba
ca
ca
y
bc
bc
x==
06.01 Translation
Maths for Computer Graphics
Determinants summary
ybxac 111 +=
ybxac 222 +=
=
y
x
ba
ba
c
c
22
11
2
1
22
11
22
11
22
11
1
ba
ba
ca
ca
y
bc
bc
x==
Example yx += 210
yx −= 54
15
121
45
102
14
110
−
==
−
yx
7
1
4214 −=
−=
−yx
Therefore x = 2 and y = 6
06.01 Translation
Maths for Computer Graphics
Determinants
With a set of three linear equations:
zcybxad 1111 ++=
zcybxad 2222 ++=
zcybxad 3333 ++=
the value of x is defined as
123213312132231321
123213312132231321
cbacbacbacbacbacba
cbdcbdcbdcbdcbdcbdx
−+−+−−+−+−
=
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
zcybxad 1111 ++=
zcybxad 2222 ++=
zcybxad 3333 ++=
=
z
y
x
cba
cba
cba
d
d
d
.
333
222
111
3
2
1
therefore
333
222
111
333
222
111
333
222
111
333
222
111
1
cba
cba
cba
dba
dba
dba
z
dca
dca
dca
y
cbd
cbd
cbd
x===
23213312132231321
333
222
111
cbacbacbacbacbacba
cba
cba
cba
−+−+−=
which can be written
22
11
3
33
11
2
33
22
1cb
cba
cb
cba
cb
cba +−
06.01 Translation
Maths for Computer Graphics
Graphical interpretation of the determinant Consider the transform
=
′
′
y
x
dc
ba
y
x.
The determinant of the transform is ad – cb. The vertices of the unit-square are moved as follows
)0,0()0,0( ⇒
),()0,1( ca⇒
),()1,1( dcba ++⇒
),()1,0( db⇒
06.01 Translation
Maths for Computer Graphics
Determinant and the unit square
(b, d)
Y
A
a b
c
d
b a
(0, 0)
Fig. 7.28 The inner parallelogram is the transformed unit square.
B
C D
E
F G X
(a, c)
(a+b, c+d)
GFEDCB))(( −−−−−−++= dcbaarea
accbbdaccbbdbdcbadac 21
21
21
21 −−−−−−+++=
cbad −=
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
20
02 and the determinant is 4
20
02=
This transform encodes a scaling of 3 and a translation of (3, 3), and results in an overall area scaling of 9:
100
330
303
and the determinant is
933
300
10
300
10
333 =+−
Consider the rotate transform
−
)cos()sin(
)sin()cos(
θθθθ
its determinant is 1)(sin)(cos 22 =+ θθ