# 2D Transformations

3D Transformations
OpenGL Transformation
 The most basic ones
 Translation
 Scaling
 Rotation
 Shear
 And others, e.g., perspective transform, projection, etc

 Basic types of transformations
 Rigid-body: preserves length and angle
 Affine: preserves parallel lines, not angles or lengths
 Free-form: anything goes

Basic Transformations
Homogeneous coordinate system
Composition of transformations

(4,5) (7,5)
Y
X Before Translation
(
(
(
¸
(

¸

(
(
(
¸
(

¸

=
(
(
(
¸
(

¸

'
'
+ =
'
(
¸
(

¸

=
(
¸
(

¸

'
'
=
'
(
¸
(

¸

=
1
*
1 0 0
1 0
0 1
1
y
x
d
d
y
x
T P P
d
d
T
y
x
P
y
x
P
y
x
y
x
Form s Homogeniou
x’ = x + d
x

y’ = y + d
y

(7,1) (10,1)
X
Y
Translation by (3,-4)
(4,5) (7,5)
Y
X
(2,5/4) (7/2,5/4)
X
Y
Before Scaling Scaling by (1/2, 1/4)
(
¸
(

¸

=
(
¸
(

¸

(
¸
(

¸

¹ ¹ ¹
'
=
=
'
=
'
y
x
y
x
y
x
s y
s x
y
x
s
s
P P S
y s y
x s x
*
*
*
0
0
*
*
*
Types of Scaling:

Differential ( s
x
!= s
y
)
Uniform ( s
x
= s
y
)

(
(
(
¸
(

¸

(
(
(
¸
(

¸

=
(
(
(
¸
(

¸

'
'
1
*
1 0 0
0 0
0 0
1
Form s Homogeniou
y
x
s
s
y
x
y
x
( )
( )
(
¸
(

¸

+
+
= '
u |
u |
sin
cos
r
r
v
( )
¹
´
¦
÷ = '
÷ = '
¬ +
u | u |
u | u |
u |
cos sin sin cos
sin sin cos cos
r r y
r r x
expand
u u
u u
u
|
cos sin
sin cos
sin
cos
y x y
y x x
r y
r x
+ = '
÷ = '
¬
=
=
but
(
¸
(

¸

=
|
|
sin
cos
r
r
v
(5,2) (9,2)
Y
X
(2.1,4.9)
(4.9,7.8)
X
Y
Before Rotation Rotation of 45 deg. w.r.t. origin
(
(
(
¸
(

¸

(
(
(
¸
(

¸

÷
=
(
(
(
¸
(

¸

'
'
1
*
1 0 0
0 cos sin
0 sin cos
1
Form s Homogeniou
y
x
y
x
u u
u u
(
¸
(

¸

+
÷
=
(
¸
(

¸

(
¸
(

¸

÷
'
=
u u
u u
u u
u u
cos * sin *
sin * cos *
*
cos sin
sin cos
*
y x
y x
y
x
P P R
y y x
x y x
'
= +
'
= ÷
u u
u u
cos * sin *
sin * cos *
(
(
(
¸
(

¸

÷ =
÷ =
'
=
'
1 0 0
0 1 0
0 0 1
axis - X about Reflection
x
M
y y x x
(
(
(
¸
(

¸

÷
=
=
'
÷ =
'
1 0 0
0 1 0
0 0 1
axis - Y about Reflection
y
M
y y x x
(1,1)
(1,-1)
Y
X
(-1,1) (1,1)
X
Y
(
(
(
¸
(

¸

=
(
(
(
¸
(

¸

=
(
(
(
¸
(

¸

=
1 0 0
0 1
0 1
1 0 0
0 1
0 0 1
1 0 0
0 1 0
0 1
b
a
SH b SH
a
SH
xy y x
unit cube
Sheared in X
direction
Sheared in Y
direction
Sheared in both X
and Y direction
y
-
y
x
-
x
) , (
-
(sx,sy)
(-θ
-

(-dx,-dy)
-
(dx,dy)
M M
M M
S S
R R
T T
sy sx
=
=
=
=
=
1
1
1
)
1
)
1

: Ref Mirror
: Sclaing
: Rotation
: n Translaito
1 1
 Translation, scaling and rotation are expressed
(non-homogeneously) as:
 translation: P' = P + T
 Scale: P' = S · P
 Rotate: P' = R · P
 Composition is difficult to express, since translation
not expressed as a matrix multiplication
 Homogeneous coordinates allow all three to be
expressed homogeneously, using multiplication by 3
× 3 matrices
 W is 1 for affine transformations in graphics
 P
2d
is a projection of P
h
onto the w = 1 plane
 So an infinite number of points correspond to :
they constitute the whole line (tx, ty, tw)
x
y
w
P
h
(x,y,w)
P
2d
(x,y,1)
w=1
1. Rigid-body Transformation
 Preserves parallelism of lines
 Preserves angle and length
 e.g. any sequence of R(u) and T(dx,dy)
2. Affine Transformation
 Preserves parallelism of lines
 Doesn’t preserve angle and length
 e.g. any sequence of R(u), S(sx,sy) and T(dx,dy)
unit cube
45 deg rotaton Scale in X not in Y
(
(
(
¸
(

¸

1 0 0
22 21
12 11
y
x
t r r
t r r
The following Matrix is Orthogonal if the upper left 2X2 matrix has the
following properties
1. A) Each row are unit vector.
sqrt(r
11
* r
11
+ r
12
* r
12
) = 1
B) Each column are unit vector.
sqrt(c
11
* c
11
+ c
12
* c
12
) = 1

2. A) Rows will be perpendicular to each other
(r
11
, r
12
) . ( r
21
, r
22
) = 0
B) Columns will be perpendicular to each other
(c
11
, c
12
) . (c
21
,c
22
) = 0
e.g. Rotation matrix is orthogonal

(
(
(
¸
(

¸

÷
1 0 0
0 cos sin
0 sin cos
u u
u u
• Orthogonal Transformation ¬ Rigid-Body Transformation
• For any orthogonal matrix B ¬ B
-1
= B
T

• In general matrix multiplication is not commutative
• For the following special cases commutativity holds i.e.
M
1
.M
2
= M
2
.M
1

M
1
M
2

Translate Translate
Scale Scale
Rotate Rotate
Uniform Scale Rotate
• Some non-commutative
Compositions:
 Non-uniform scale, Rotate
 Translate, Scale
 Rotate, Translate
Original
Transitional
Final
Create new affine transformations by multiplying sequences of
the above basic transformations.
q = CBAp
q = ( (CB) A) p = (C (B A))p = C (B (Ap) ) etc.
matrix multiplication is associative.
But to transform many points, best to do
M = CBA
then do q = Mp for any point p to be rendered.
To transform just a point, better to do q = C(B(Ap))
For geometric pipeline transformation, define M and set it up
with the model-view matrix and apply it to any vertex
subsequently defined to its setting.
R
u,P
=
Q(x,y)
P(h,k)
Step 1: Translate P(h,k) to origin
T(-h ,-k)
Q
1
(x

,y

)
P
1
(0,0)
Step 2: Rotate u w.r.t to origin
R
u
*
Q
2
(x

,y

)
P
2
(0,0)
Step 3: Translate (0,0) to P(h,k0)
T(h ,k) *
P
3
(h,k)
Q
3
(x

+h, y

+k)
T(-h ,-k) S(s
x
,s
y
)* T(h ,k) *
S
sx,sy,P
=
(4,3)
(1,1) (4,1)
S
3/2,1/2,(1,1)

Step 1: Translate P(h,k) to origin
(4,2)
(0,0) (4,0)
T(-1,-1)
Step 2: Scale S(s
x
,s
y
) w.r.t origin
(6,1)
(6,0) (0,0)
S(3/2,1/2)
(7,1)
Step 3: Translate (0,0) to P(h,k)
(7,2)
(1,1)
T(1,1)
Step 1: Translate (0,b) to origin
T(0 ,-b) M
L
=
Step 2: Rotate -u degrees
Step 3: Mirror reflect about X-axis
R(-u) * T(0 ,b) *
Step 4: Rotate u degrees
Step 5: Translate origin to (0,b)
M
x
* R(u) *
(0,b)
Y
X
t
O
Y
X O
Y
X O
Y
X O
Y
X O
(0,b)
Y
X
t
O
Schaum’s outline series:
Problems:
 4.1
 4.2
 4.3, 4.4, 4.5 => R
u,P

 4.6, 4.7, 4.8 => S
sx,sy,P
 4.9, 4.10, 4.11, 4.21 => M
L
 4.12 => Shearing

1. www.willamette.edu/~gorr/classes/GeneralGraphics/Transforms/transforms2d.htm
2. http://www.cs.sfu.ca/~torsten/Teaching/Cmpt361/LectureNotes/PDF/06_2Dtrans.pdf

Basics of 3D geometry
Basic 3D Transformations
Composite Transformations

 Thumb points to +ve Z-axis
 Fingers show +ve rotation from X to Y
axis
Y
X
Z (out of page)
Y
X
Z (larger z are
away from viewer)
Right-handed orentation Left-handed orentation
 Transformation – is a function that takes a point (or vector) and
maps that point (or vector) into another point (or vector).
 A coordinate transformation of the form:
x’ = a
xx
x + a
xy
y + a
xz
z + b
x
,
y’ = a
yx
x + a
yy
y + a
yz
z + b
y
,
z’ = a
zx
x + a
zy
y + a
zz
z + b
z
,
is called a 3D affine transformation.
|
|
|
|
|
.
|

\
|
|
|
|
|
|
.
|

\
|
=
|
|
|
|
|
.
|

\
|
1 1 0 0 0

'
'
'
z
y
x
b a a a
b a a a
b a a a
w
z
y
x
z zz zy zx
y yz yy yx
x xz xy xx
 The 4
th
row for affine transformation is always [0 0 0 1].
 Properties of affine transformation:
– translation, scaling, shearing, rotation (or any combination of them)
are examples affine transformations.
– Lines and planes are preserved.
– parallelism of lines and planes are also preserved, but not angles and
length.
P P d d d T
d z
d y
d x
z
y
x
d
d
d
z y x
z
y
x
z
y
x
'
=
¹ ¹ ¹
(
(
(
(
¸
(

¸

+
+
+
=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

* ) , , (
1 1
*
1 0 0 0
1 0 0
0 1 0
0 0 1
z
y
x
d z z
d y y
d x x
+ =
'
+ =
'
+ =
'
(
(
(
(
¸
(

¸

=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

¹ ¹ ¹
'
=
1
*
*
*
1
*
1 0 0 0
0 0 0
0 0 0
0 0 0
* ) , , (
z
y
x
z
y
x
z y x
s z
s y
s x
z
y
x
s
s
s
P P s s s S
Original
scale all axes
scale Y axis
z s z
y s y
x s x
z
y
x
*
*
*
=
'
=
'
=
'
(
(
(
(
¸
(

¸

+
÷
=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

÷
¹ ¹ ¹
'
=
1
cos * sin *
sin * cos *
1
*
1 0 0 0
0 1 0 0
0 0 cos sin
0 0 sin cos
*
,
z
y x
y x
z
y
x
P P R
k
u u
u u
u u
u u
u
For 3D-Rotation 2 parameters are
needed
 Angle of rotation
 Axis of rotation
Rotation about z-axis:
(
(
(
(
¸
(

¸

+ ÷
+
=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

÷
¹ ¹ ¹
' =
1
cos * sin *
sin * cos *
1
*
1 0 0 0
0 cos 0 sin
0 0 1 0
0 sin 0 cos
*
,
u u
u u
u u
u u
u
z x
y
z x
z
y
x
P P R
j
(
(
(
(
¸
(

¸

+
÷
=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

÷
¹ ¹ ¹
' =
1
cos * sin *
sin * cos *
1
*
1 0 0 0
0 cos sin 0
0 sin cos 0
0 0 0 1
*
,
u u
u u
u u
u u
u
z y
z y
x
z
y
x
P P R
i
About x-axis
About y-axis
(
(
(
(
¸
(

¸

+
+
=
(
(
(
(
¸
(

¸

(
(
(
(
¸
(

¸

¹ ¹ ¹
'
=
1
*
*
1
*
1 0 0 0
0 1 0 0
0 1 0
0 0 1
* ) , (
z
sh z y
sh z x
z
y
x
sh
sh
P P sh sh SH
y
x
y
x
y x xy
y
z
x
Some of the composite transformations
to be studied are:
 A
V,N
= aligning a vector V with a vector N
 R
u,L
= rotation about an axis L( V, P )
 S
sx,sy,P
= scaling w.r.t. point P
A
v
= R
u,i

V = aI + bJ + cK
x
y
z
b
a
c
k
2 2
λ
λ
cos
λ
sin
by axis - about x Rotate : 1 Step
c b
c
b
+ =
¦
¦
)
¦
¦
`
¹
=
=
u
u
u
b
|V|
ì
x
y
z
b
a
k
( 0, b,c)
b
|V|
ì
x
y
z
a
k
|V|
ì
u
u
( a, 0, ì)
( 0, 0, ì)
( 0, b,c)
A
v
= R
u,i
R
-¢,j
*
2 2
λ
λ
cos
λ
sin
by axis - about x Rotate : 1 Step
c b
c
b
+ =
¦
¦
)
¦
¦
`
¹
=
=
u
u
u
2 2 2

| V |
| V |
λ
) cos(
| V |
) sin(
- by axis - y about V Rotate : 2 Step
c b a
a
+ + =
¦
¦
)
¦
¦
`
¹
= ÷
÷
= ÷
|
|
|
P( a, b, c)
b
x
y
z
b
a
c
k
| V|
( a, 0, ì)
( 0, b,c)
b
x
y
z
b
a
c
|V|
( 0, 0, |V|)
( 0, b,c)
a
¢
ì
 A
V
-1
= A
V
T
 A
V,N
= A
N
-1
* A
V
(
(
(
(
¸
(

¸

=
÷
1 0 0 0
0
0 0
0
λ λ
λ
-
λ
- λ
V
c
V
b
V
a
b c
V
ac
V
ab
V
V
A
Let the axis L be represented by vector V and
passing through point P
1. Translate P to the origin
2. Align V with vector k
3. Rotate u° about k
4. Reverse step 2
5. Reverse step 1
R
u,L
=

T
-P
A
V
*

R
u,k
*

A
V
-1
*

T
-P
-1
*
V
P
u
Q
Q'
L
z
x
y
k
Let the plane be represented by plane normal N
and a point P in that plane
x
y
z
Let the plane be represented by plane normal N
and a point P in that plane
1. Translate P to the origin
M
N,P
=

T
-P
x
y
z
Let the plane be represented by plane normal N
and a point P in that plane
1. Translate P to the origin
2. Align N with vector k
M
N,P
=

T
-P
A
N
*

x
y
z
Let the plane be represented by plane normal N
and a point P in that plane
1. Translate P to the origin
2. Align N with vector k
3. Reflect w.r.t xy-plane
M
N,P
=

T
-P
A
N
*

S
1,1,-1
*

x
y
z
x
y
z
Let the plane be represented by plane normal N
and a point P in that plane
1. Translate P to the origin
2. Align N with vector k
3. Reflect w.r.t xy-plane
4. Reverse step 2
M
N,P
=

T
-P
A
N
*

S
1,1,-1
*

A
N
-1
*

Let the plane be represented by plane normal N
and a point P in that plane
1. Translate P to the origin
2. Align N with vector k
3. Reflect w.r.t xy-plane
4. Reverse step 2
5. Reverse step 1
M
N,P
=

T
-P
A
N
*

S
1,1,-1
*

A
N
-1
*

T
-P
-1
*
x
y
z
 The Composite Transform must have
– Translation of P
1
to Origin ¬ T
z
x
y
3
P'
1
P'
2
P'
T
– Some Combination of Rotations ¬ R
R
x
y
z
2
P' '
3
P' '
1
P' '
z
x
y
3
P
1
P
2
P
Fig. 1 Fig. 2
 Translate points in fig. 1 into points in fig 2 such that:
– P
1
is at Origin
– P
1
P
2
is along positive z-axis
– P
1
P
3
lies in positive y-axis half of yz plane
x x
z y x
z y x
z z z
y y y
x x x
R x .x R
R R R
R R R
z R y R x R
z R y R x R
z R y R x R
r r r
r r r
r r r
R
R
vextor of component : Note
other each to
lar perpendicu are ii)
vectors unit are i)
Transform body - Rigid is R
be Let
¬
(
(
(
¸
(

¸

=
(
(
(
¸
(

¸

=
, ,
, ,
. . .
. . .
. . .
33 32 31
23 22 21
13 12 11
| |
z
z
z
z
z y x
z y x
z y x
T T
R
z R
y R
x R
z R z R z R
y R y R y R
x R x R x R
R R k R
=
' '
' '
=
(
(
(
¸
(

¸

¬
' '
' '
=
(
(
(
¸
(

¸

(
(
(
¸
(

¸

¬
=
' '
' '
= · ¬
÷
2 1
2 1
2 1
2 1
2 1
2 1
P P
P P
P P
P P

P P
P P
.
.
.
1
0
0
. . .
. . .
. . .
ˆ
1

R
z
x
y
3
P
'
1
P'
2
P'
x
y
z 2
P
' '
3
P
' '
1
P
' '
R
z
k
ˆ
k
P P
P P
R
axis - z along P P aligns R
2 1
2 1
2 1
ˆ
=
' '
' '
· ¬
' '
R
x
y
z 2
P
' '
3
P
' '
1
P
' '
z
x
y
3
P
'
1
P'
2
P'
| |
x
2 1 3 1
2 1 3 1
x
x
x
2 1 3 1
2 1 3 1
z y x
z y x
z y x
T
2 1 3 1
2 1 3 1
T
R
P P P P
P P P P
z R
y R
x R
P P P P
P P P P
z R z R z R
y R y R y R
x R x R x R
R R
P P P P
P P P P
i R
=
' '
×
' '
' '
×
' '
=
(
(
(
¸
(

¸

¬
' '
×
' '
' '
×
' '
=
(
(
(
¸
(

¸

(
(
(
¸
(

¸

¬
=
' '
×
' '
' '
×
' '
= · ¬
÷
.
.
.
0
0
1
. . .
. . .
. . .
ˆ
1

R
x
i
ˆ
i R
R
ˆ
=
' '
×
' '
' '
×
' '
· ¬
' '
×
' '
2 1 3 1
2 1 3 1
2 1 3 1
P P P P
P P P P
axis - x along P P P P aligns
R
z
k
ˆ
| |
y x z
y
y
y
x z
z y x
z y x
z y x
T
x z
T
R R R
z R
y R
x R
R R
z R z R z R
y R y R y R
x R x R x R
R R R R j R
= × =
(
(
(
¸
(

¸

¬
× =
(
(
(
¸
(

¸

(
(
(
¸
(

¸

¬
= × = · ¬
÷
.
.
.
0
1
0
. . .
. . .
. . .
ˆ
1

( ) j R
R
ˆ
= × · ¬
×
x z
x z
R R
axis - y along R R aligns
R
x
y
z 2
P
' '
3
P
' '
1
P
' '
z
x
y
3
P
'
1
P'
2
P'
R
x
i
ˆ
R
z
k
ˆ
R
y
j
ˆ
Schaum’s outline series:
Problems:
 6.1
 6.2, 6.5, 6.9, 6.10, 6.11, 6.12 ¬ A
v
 6.3, 6.4 ¬ R
u,L
 6.6, 6.7, 6.8 ¬ M
N,P

OpenGL transformation commands
Transformation Order
Hierarchical Modeling

 OpenGL uses 3 stacks to maintain
transformation matrices:
 Model & View transformation matrix stack
 Projection matrix stack
 Texture matrix stack
 You can load, push and pop the stack
 The top most matrix from each stack is
applied to all graphics primitive until it is
changed
M
N
Model-View
Matrix Stack
Projection
Matrix Stack
Graphics
Primitives
(P)
Output
N•M•P
 Specify current matrix (stack) :
 void glMatrixMode(GLenum mode)
▪ Mode : GL_MODELVIEW, GL_PROJECTION,
GL_TEXTURE
 Initialize current matrix.
 void glLoadIdentity(void)
▪ Sets the current matrix to 4X4 identity matirx
 void glLoadMatrix{f|d}(cost TYPE *M)
▪ Sets the current matrix to 4X4 matrix specified by M

Note: current matrix ¬ Top most matrix of the current
matrix
stack
A
B
C
A
B
I
A
B
M
g
l
L
o
a
d
M
a
t
r
i
x
(
M
)

 Concatenate Current Matrix:
 void glMultMatrix(const TYPE *M)
▪ Multiplies current matrix C, by M. i.e. C = C*M
 Caveat: OpenGL matrices are stored in
column major order.

 Best use utility function glTranslate, glRotate,
glScale for common transformation tasks.
(
(
(
(
¸
(

¸

16 12 8 4
15 11 7 3
14 10 6 2
13 9 5 1
m m m m
m m m m
m m m m
m m m m
 Each time an OpenGL transformation M is called the
current MODELVIEW matrix C is altered:
Cv v =
'
CMv v =
'
glTranslatef(1.5, 0.0, 0.0);
glRotatef(45.0, 0.0, 0.0, 1.0);

CTRv v =
'
Note: v is any vertex placed in rendering pipeline v’ is the transformed
vertex from v.
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(...);
glRotatef(...);
glScalef(...);
gluCylinder(...);
As a Global System
 Objects moves but
coordinates stay the
same
 Think of transformation
in reverse order as they
appear in code
As a Local System
 Objects moves and
coordinates move with it
 Think of transformation
in same order as they
appear in code

There is a World Coordinate System where:
 All objects are defined
 Transformations are in World Coordinate space
Two Different Views
Local View
 Translate Object
 Then Rotate
glLoadIdentity();
glMultiMatrixf( T);
glMultiMatrixf( R);
draw_ the_ object( v);
v’ = ITRv
Global View
 Rotate Object
 Then Translate
Effect is same, but perception is different
glLoadIdentity();
glMultiMatrixf( R);
glMultiMatrixf( T);
draw_ the_ object( v);
v’ = ITRv
Local View
 Rotate Object
 Then Translate
Global View
 Translate Object
 Then Rotate
Effect is same, but perception is different
 Many graphical objects are structured
 Exploit structure for
 Efficient rendering
 Concise specification of model parameters
 Physical realism
 Often we need several instances of an object
 Wheels of a car
 Arms or legs of a figure
 Chess pieces
 Encapsulate basic object in a function
 Object instances are created in “standard” form
 Apply transformations to different instances
 Typical order: scaling, rotation, translation
A
B
C
C
– void glPushMatrix(void);
A
B
– void glPoipMatrix(void);
A
B
C
C
m
glGetFloatv
– void glGetFloatv(GL_MODELVIEW_MATRIX, *m);
A
B
C
Some of the OpenGL functions helpful for
hierarchical modeling are:
 A scene graph is a hierarchical representation of a scene
 We will use trees for representing hierarchical objects such
that:
 Nodes represent parts of an object
 Topology is maintained using parent-child relationship
 Edges represent transformations that applies to a part and all the
subparts connected to that part

typedef struct treenode {
GLfloat m[16]; // Transformation
void (*f) ( ); // Draw function
struct treenode *sibling;
struct treenode *child;
} treenode;
Scene
Sun Star X
Earth Venus Saturn
Moon Ring
 Initializing transformation matrix for node
treenode torso, head, ...;
/* in init function */
glLoadIdentity();
glRotatef(...);
glGetFloatv(GL_MODELVIEW_MATRIX, torso.m);

 Initializing pointers
torso.f = drawTorso;
torso.sibling = NULL;
torso.child = &head;
 To render the hierarchy:
 Traverse the scene graph depth-first
 Going down an edge:
▪ push the top matrix onto the stack
▪ apply the edge's transformation(s)
 At each node, render with the top matrix
 Going up an edge:
▪ pop the top matrix off the stack

 Recursive definition
void traverse (treenode *root) {
if (root == NULL) return;
glPushMatrix();
glMultMatrixf(root->m);
root->f();
if (root->child != NULL) traverse(root->child);
glPopMatrix();
if (root->sibling != NULL) traverse(root->sibling);
}
 C is really not the right language for this !!