April 2010 1

Geometric Transformations for

Computer Graphics
Shmuel Wimer
Bar Ilan Univ., School of Engineering
April 2010 2
2D Translation
P
' P
T
x
y
,
, ,

x y
x
y
x x t y y t
t
x x
t
y y
' '
= + = +
'
(
( (
'
= = =
(
( (
'


'
= +
P P T
P P T
April 2010 3
2D Rotation
x
y
r
x
r
y
u
( )
Rotation in angle about a
pivot (rotation) point , .
r r
x y
u
x
y
u
( )
,
r r
x y
( )
, x y
' '
( )
, x y
( ) ( )
( ) ( )
( )
cos sin
sin cos
cos sin
sin cos
r r r
r r r
r r
x x x x y y
y y x x y y
u u
u u
u u
u u
'
= +
'
= + +
'
= +

(
=
(

P P R P P
R
April 2010 4
2D Scaling
x
S
y
S
,
0
0
x y
x
y
x x s y y s
s
x x
s
y y
' '
= =
'
(
( (
=
(
( (
'


'
= P S P
x
y
( )
,
f f
x y
( )
( )
( )
1
1
x f x
y f y
f
x x s x s
y y s y s
'
= +
'
= +
'
= + P P S P 1- S
( )
Scaling about a fixed point ,
f f
x y
April 2010 5
Homogeneous Coordinates
1 2
1 2
Rotate and then displace a point :
: 2 2 rotation matrix. : 2 1 displacement vector.
'


P P = M P +M
M M
Displacement is unfortunately a non linear operation.
( ) ( )
Make displacement linear with .
, , ,1 . Transformations turn into 3 3 matrices. x y x y
Homoheneous Coordinates
Very big advantage. All transformations are concatenated by
matrix multiplication.
April 2010 6
( )
1 0
0 1 , ,
1 0 0 1 1
x
y x y
x t x
y t y t t
'
( ( (
( ( (
' '
= =
( ( (
( ( (

P T P 2D Translation
( )
cos sin 0
sin cos 0 ,
1 0 0 1 1
x x
y y
u u
u u u
'

( ( (
( ( (
' '
= =
( ( (
( ( (

P R P
2D Rotation
( )
0 0
0 0 , ,
1 0 0 1 1
x
y x y
x S x
y S y S S
'
( ( (
( ( (
' '
= =
( ( (
( ( (

P S P
2D Scaling
April 2010 7
1 1 1
1 0 cos sin 0 1 0 0
0 1 , sin cos 0 , 0 1 0
0 0 1 0 0 1 0 0 1
x x
y y
t S
t S
u u
u u

( ( (
( ( (
= = =
( ( (
( ( (

T R S
Inverse transformations:
( ) ( )
2 1 2 1
'
= = = P M M P M M P M P
Composite transformations:
( ) ( )
{ }
( ) ( )
{ }
( ) ( ) ( )
2 2 1 1 2 2 1 1
2 1 1 2
2 1 1 2
2 2 1 1 1 2 1 2
, , , ,
1 0 1 0 1 0
0 1 0 1 0 1
0 0 1 0 0 1 0 0 1
, , ,
x y x y x y x y
x x x x
y y y y
x y x y x x y y
t t t t t t t t
t t t t
t t t t
t t t t t t t t
' = =
+
( ( (
( ( (
= +
( ( (
( ( (

= + +
P T T P T T P
T T T
Composite translations:
April 2010 8
( ) ( ) { } ( ) ( ) { }
( ) ( ) ( )
( )
2 1 2 1
2 1 1 2
1 2
u u u u
u u u u
u u
' = =
= +
' = +
P R R P R R P
R R R
P R P
Composite Rotations:
( ) ( ) ( )
2 1 1 2
2 1 1 2
2 2 1 1 1 2 1 2
0 0 0 0 0 0
0 0 0 0 0 0
0 0 1 0 0 1 0 0 1
, , ,
x x x x
y y y y
x y x y x x y y
S S S S
S S S S
S S S S S S S S

( ( (
( ( (
=
( ( (
( ( (

= S S S
Composite Scaling:
April 2010 9
General 2D Rotation
Move to origin Rotate
Move back
( )
( )
1 0 cos sin 0 1 0
0 1 sin cos 0 0 1
0 0 1 0 0 1 0 0 1
cos sin 1 cos sin
sin cos 1 cos sin
0 0 1
r r
r r
r r
r r
x x
y y
x y
y x
u u
u u
u u u u
u u u u

( ( (
( ( (
=
( ( (
( ( (

+ (
(

(
(

( )
,
r r
x y
April 2010 10
General 2D Scaling
Move to origin Scale
Move back
( )
( )
0 1
1 0 0 0 1 0
0 1 0 0 0 1 0 1
0 0 1 0 0 1 0 0 1
0 0 1
x f x
f x f
f y f y f y
S x S
x S x
y S y S y S
(

( ( (
(
( ( (
=
(
( ( (
(
( ( (


( )
,
f f
x y
April 2010 11
2D Directional Scaling
y
x
2
S
1
S
u
( ) ( ) ( )
( )
( )
1
1 2
2 2
1 2 2 1
2 2
2 1 1 2
,
cos sin cos sin 0
cos sin sin cos 0
0 0 1
S S
S S S S
S S S S
u u
u u u u
u u u u

=
( +
(
+
(
(

R S R
y
x
y
x
1
2
O
1
2
45
S
S
u
=
=
=
April 2010 12
2D Reflections
x
y
x
y
x
y
1 0 0
0 1 0
0 0 1
(
(

(
(

1 0 0
0 1 0
0 0 1

(
(
(
(

1 0 0
0 1 0
0 0 1

(
(

(
(

April 2010 13
0 1 0
1 0 0
0 0 1
(
(
(
(

y x = y x =
0 1 0
1 0 0
0 0 1

(
(

(
(

April 2010 14
Geometric Transformations by Rasterization
The transformed shape needs to be filled.
A whole scan-line filling is usually in order.
However, simple transformations can save new filling by
manipulating blocks in the frame buffer.
min
P
max
P
0
P
Translation:
Move block of pixels of frame buffer into new destination.
April 2010 15
1 2 3
4 5 6
7 8 9
10 11 12
(
(
(
(
(

3 6 9 12
2 5 8 11
1 4 7 10
(
(
(
(

90 counterclockwise rotation
12 11 10
9 8 7
6 5 4
3 2 1
(
(
(
(
(

180 rotation
Rotated pixel block
Destination pixel array
RGB of destination pixel can
be determined by averaging
rotated ones (as antialiasing)
April 2010 16
Translation
( )
, , x y z
( )
, , x y z
' ' '
x
y
z
x
y
z
x x t
y y t
z z t
'
= +
'
= +
'
= +
3D Transformations
1 0 0
0 1 0
0 0 1
1 0 0 0 1 1
x
y
z
x t x
y t y
z t z
'
( ( (
( ( (
'
( ( (
=
' ( ( (
( ( (

Very similar to 2D. Using 4x4 matrices rather than 3x3.
April 2010 17
General 3D Rotation
1. Translate the object such that rotation axis passes
through the origin.
2. Rotate the object such that rotation axis coincides with
one of Cartesian axes.
3. Perform specified rotation about the Cartesian axis.
4. Apply inverse rotation to return rotation axis to original
direction.
5. Apply inverse translation to return rotation axis to
original position.
April 2010 18
x
z
y
2
P
1
P
x
z
y
2
P
'
1
P
'
x
z
y
1
P
'
2
P
''
x
z
y
1
P
'
2
P
''
u
x
z
y
2
P
'
1
P
'
x
z
y
2
P
1
P
April 2010 19
( )
1 2
2 1 2 1 2 1 2 1
The vector from to is:
, , x x y y z z = =
P P
V P P
( )
( )
( )
( )
2 1
2 1
2 1
2 2 2
Unit rotation vector: | | , ,
| |
| |
| |
1
a b c
a x x
b y y
c z z
a b c
= =
=
=
=
+ + =
u V V
V
V
V
1
1
1
1 0 0
0 1 0
0 0 1
0 0 0 1
x
y
z

(
(

(
=
(
(

T
( )
, , a b c = u
x
y
z
April 2010 20
Rotating to coincide with axis z u
( )
2 2
2 2
First rotate around axis to lay in plane.
Equivqlent to rotation ' s projection on plane around axis.
cos , sin .
We obtained a unit vector , 0, in plane.
x x z
y z x
c b c c d b d
a b c d x z
o o

= + = =
= + =
u
u
w
( )
1 0 0 0
0 0
0 0
0 0 0 1
x
c d b d
b d c d
o
(
(

(
=
(
(

R
( )
, , a b c = u
x
y
z
o
'
u
o
April 2010 21
( )
, , a b c = u
x
y
z
|
( )
, 0, a d = w
2 2
Rotate counterclockwise around axis.
is a unit vector whose component is , component is 0,
hence component is .
y
x a y
z b c d

+ =
w
w
cos , sin d a | | = =
( )
0 0
0 1 0 0
0 0
0 0 0 1
y
d a
a d
|
(
(
(
=
(
(

R
( ) ( ) ( ) ( ) ( ) ( )
1 1 1
x y z y x
u o | u | o

= R T R R R R R T
April 2010 22
( )
cos sin 0 0
sin cos 0 0
0 0 1 0
0 0 0 1
z
u u
u u
u

(
(
(
=
(
(

R
( ) ( ) ( ) ( ) ( ) ( )
1 1 1
x y z y x
u o | u | o

= R T R R R R R T
( )
( ) ( ) ( )
( ) ( ) ( )
( ) ( ) ( )
2
2
2
1 cos cos 1 cos sin 1 cos sin
1 cos sin 1 cos cos 1 cos sin
1 cos sin 1 cos sin 1 cos cos
R
a ab c ac b
ba c b bc a
ca b cb a c
u
u u u u u u
u u u u u u
u u u u u u
=
( + +
(
+ +
(
(
+ +

M
April 2010 23
Efficient 3D Rotations by Quaternions
( ) ( )
Quaternions are extensions of complex numbers to 4-dimension.
, : real , , : imaginary q s ia jb kc s s a b c = + + + = = v v
2 2 2
1, , , i j k ij ji k jk kj i ki ik j = = = = = = = = =
( )
( )
1 2 1 2
1 2 1 2 1 2 2 1
Addition: ,
Multiplication: ,
q q s s
q q s s s s
+ = + +
= +
1 2
1 2 1 2
v v
v v v + v v v
( ) ( )
2
2 1 1 1
2
1
, , , 1, 0 q s q s qq q q
q

= + = = = v v v
April 2010 24
x
z
y
u
u
( )
Rotate a point position , , about the unit vector . x y z = p u
( ) ( )
Quarternion representation:
Rotation: cos , sin
2 2
Position: 0, , , ,
q
x y z
u u
| |
=
|
\ .
= =
u
P p p
( ) ( ) ( ) ( )
1 2
Rotation of is carried out with the quarternion operation:
0, 2
This can be calculated by efficient HW for fast 3D rotations
when many rotation operations are involved.
q q s s

'
= = + + +
P
P P p v p v v p v v p
April 2010 25
3D Scaling
x
y
z
x
y
z
x
y
z
x x S
y y S
z x S
'
=
'
=
'
=
Enlarging object also moves it from origin
0 0 0
0 0 0
0 0 0
1 0 0 0 1 1
x
y
z
x S x
y S y
z S z
'
( ( (
( ( (
'
( ( (
'
= = =
' ( ( (
( ( (

P S P
April 2010 26
( )
, ,
f f f
x y z
x
y
z
Scaling with respect to a fixed point (not necessarily of object)
( )
, ,
f f f
x y z
x
y
z
( )
, ,
f f f
x y z
x
y
z
( )
, ,
f f f
x y z
x
y
z
( )
( )
( )
1
0 0 1
0 0 1
0 0 1
0 0 0 1
x x f
y y f
z z f
S S x
S S y
S S z

(
(

(
=
(

(
(

T S T