CHAPTER III: TWO-DIMENSIONAL

GEOMETRIC TRANSFORMATIONS

B. Boufama
University of Windsor
Chapter III: Two-Dimensional Geometric Transformations

Introduction

In many applications, such as animation,

objects(or primitives) need to be manipulated,
moved , resized, etc.
These manipulations are achieved with
Geometric transformations.

Geometric transformations alter the

coordinate descriptions of objects. For examples :
• Translations
• Rotations
• Scaling
This chapter is concerned with geometric
transformations in the plane, also called
two-dimensional (2D) geometric transformations.

B. Boufama 1
Chapter III: Two-Dimensional Geometric Transformations

Translation
A translation is a geometric transformation that
moves an object along a straight-line path from
one location to another.
A point is translated by adding the vector
coordinates of translation.
Example :
a point at location (x, y), when translated with
T~ = (tx, ty ), will move the location (x0, y 0) where
x0 = x + tx
y 0 = y + ty
We can also write the above relation as
0
     
 x   x   tx 

0 

=  
+  
y y ty
    

That is,
p0 = p + T

B. Boufama 2
Chapter III: Two-Dimensional Geometric Transformations

A translation is a rigid transformation.

That is, the Euclidean shape remains the
same(invariant) after a translation.
E.g., a cube will remain a cube after translation.
This is ensured by translating every point of the
transformed object by the same amount.

B. Boufama 3
Chapter III: Two-Dimensional Geometric Transformations

To apply translation T = (tx, ty ) to a circle

defined by (xc, yc) and radius r
• translate the center to (xc + tx, yc + ty )
• redraw the same circle at the new location

B. Boufama 4
Chapter III: Two-Dimensional Geometric Transformations

Rotation

A rotation is a geometric transformation that

moves an object along a circular path from one
location to another.
A rotation is defined by
• a rotation angle θ that specifies how much
rotation is to be performed.
• a rotation point or pivot point that specifies
the point around which the object is to be rotated.
The rotation point is also called rotation axis, a
line perpendicular to the XY plane and passing
through that point.

B. Boufama 5
Chapter III: Two-Dimensional Geometric Transformations

The figure shows:

• A point P before rotation
• A new point P 0 that is obtained after rotating P
around the rotation axis with angle of theta.
Question: transformation equations?

B. Boufama 6
Chapter III: Two-Dimensional Geometric Transformations

Consider first the case where the rotation axis

passes through the origin point (0, 0).
Using basic trigonometric identities, we have the
following relations
x0 = r cos(α + θ) = r cos α cos θ − r sin α sin θ
y 0 = r sin(α + θ) = r cos α sin θ + r sin α cos θ
Where r is equal to the distance OP which is also
equal to the distance OP 0.
B. Boufama 7
Chapter III: Two-Dimensional Geometric Transformations

Because x and y can be written as

x = r cos α, y = r sin α
The previous relation can be written as
x0 = x cos θ − y sin θ
y 0 = x sin θ + y cos θ
Again, this can be written in a matrix-form
0
    
x   cos θ − sin θ   x 
0  = 


y sin θ cos θ y
  

A compact form of the above will be:

P 0 = RP
Where R is 2 × 2 orthonormal matrix, RRT = I,
in paricular
r2 + r12
2


 11



 =1



2 2

r21 + r22 =1





B. Boufama 8
Chapter III: Two-Dimensional Geometric Transformations

Rotations with arbitrary axis

The previous rotation equations can be generalized

by including the coordinates of the rotation axis.
x0 = xr + (x − xr ) cos θ − (y − yr ) sin θ




0
 y = y + (x − x ) sin θ + (y − y ) cos θ

r r r


Note : Rotations are rigid transformations.

B. Boufama 9
Chapter III: Two-Dimensional Geometric Transformations

Scaling

A scaling transformation alters the size of an

object.
For example, a polygon can be resized by
multiplying the coordinate values (x, y) of each
vertex by to scaling factors sx and sy , where the
new coordinates are given by:
x0 = sxx and y 0 = sy y
The scaling process can also be written in the
matrix form :
0
    
 x   sx 0   x 
0  = 
    
y 0 sy y
  

Or
P0 = S · P
A uniform scaling is obtained when, sx = sy ,

B. Boufama 10
Chapter III: Two-Dimensional Geometric Transformations

Note : Objects sacled using the previous equations

are both scaled and repositioned.
For example, a uniform scaling of 0.5 on a line
segment:

The location of a scaled object can be controled by

keeping a special point(xf , yf ), called fixed
point unchanged after scaling.
x0 = sxx + xf (1 − sx)




0
 y = s y + y (1 − s )

y f y


Where (xf (1 − sx), yf (1 − sy )) is a constant vector

representing a translation.

B. Boufama 11
Chapter III: Two-Dimensional Geometric Transformations

Matrix representation and

homogemeous coordinates
Geometric transformations are usually applied in
sequence.
For example, an animation might involve several
sequential tarnslation/rotations at a given
increment.

A geometric transformation have the following

general matrix-form:
P 0 = M1 · P + M2
Where M1 and M2 represent the multiplicative
and additive factors respectively.

For example, a uniform scaling with a fixed point

at (xf , yf )
   

0s 0   xf − xf · s 
P = P + 

  
0 s yf − yf · s
 

B. Boufama 12
Chapter III: Two-Dimensional Geometric Transformations

The representation
P 0 = M1 · P + M2
can be used for any basic transformation:
• Translation : M1 is the identity matrix and M2 is the
translation vector.
• Rotation : M1 is the rotation with respect to the
origin and M2 is the translational component
resulting from the position of the rotation axis.
• Scaling : M1 is the scaling matrix while M2 is the
translational component resulting from the position
of the fixed point.
Question:
Can we combine the 2 × 2 matrix M1 with the
2-element column vector M2 into one single 2 × 3
matrix M ?

B. Boufama 13
Chapter III: Two-Dimensional Geometric Transformations

Answer: yes, if we add a third coordinate to the

vectors P and P 0.
0
    
 x   m11 m12 m13   x 
0 
    
 y  =  m21 m22 m23   y 
    
   
    
1 0 0 1 1
    

However, in general we can have any value for the

last row in the point coordinates.
After adding a third component, the cartesian
coordinates (x, y) becomes (hx, hy, h) when h is
any nonzero value. These coordinates are called
homogeneous coordinates.
In our case, we set h = 1 for our convenience.
• translation:
0
    
 x   1 0 tx   x 
 y0  0
    
 That is P = T · P
 0 1 t  y 
 = 
    

   y 



1 0 0 1 1
    

B. Boufama 14
Chapter III: Two-Dimensional Geometric Transformations

• Rotation:
0
    
 x   cos θ − sin θ 0   x 
0  0
    
 y  =  sin θ cos θ 0   y  That is P = R · P
    
   
    
1 0 0 1 1
    

• Scaling:
0
    
 x   sx 0 0   x 
y 0  =  0 sy 0   y  That is P 0 = S · P

    



1 0 0 1 1
    

The above rotation and scaling matrices do not

consider the rotation-axis or fixed point situations.
Rotations around arbitrary axis can be viewed as
a combination of a rotation around the origin and
a translation.
Similarly, a scaling with a fixed point can be
viewed as a combination of a simple scaling and a
translation.

B. Boufama 15
Chapter III: Two-Dimensional Geometric Transformations

Composite transformations

Thanks to the matrix representation, any sequence

of geometric transformations can be described by a
composite transformation matrix, obtained
by the matrix product of each transformation.

• Translations: if a point P is translated by two

successive translations, given by their matrices T1
and T2 respectively, then
P 0 = T2 · {T1 · P } = {T2 · T1} · P = T · P
where
     
1 0 tx1   1 0 tx2   1 0 tx1 + tx2 


T = 0 1 ty1  ·  0 1 ty2  =  0 1 ty1 + ty2 
     



0 0 1 0 0 1 0 0 1
     

B. Boufama 16
Chapter III: Two-Dimensional Geometric Transformations

• Rotations: if a point P is rotated by two

successive rotations, given by their matrices R1 and
R2 respectively, then
P 0 = R2 · {R1 · P } = {R2 · R1} · P = R · P
where
   
cos θ1 − sin θ1 0   cos θ2 − sin θ2 0 


R = sin θ1 cos θ1 0  ·  sin θ2 cos θ2 0 
   



0 0 1 0 0 1
   

 
cos(θ1 + θ2) − sin(θ1 + θ2) 0 


= sin(θ1 + θ2) cos(θ1 + θ2) 0 
 



0 0 1
 

Note: Two successive rotations are additive when

the rotation axis passes through the origin :
R(θ2) · R(θ1) = R(θ1 + θ2)

B. Boufama 17
Chapter III: Two-Dimensional Geometric Transformations

• Scalings: if a point P is scaled by two successive

scaling operations, given by their matrices S1 and S2
respectively, then the composite scaling matrix will
be given by
     
 sx1

0 0   sx2 0 0   sx1 · sx2 0 0 
 0 s 0  ·  0 s 0  =  0 s · s 0
     
y1 y2 y1 y2
     

     
0 0 1 0 0 1 0 0 1
     

Note: Two successive scalings are multiplicative

when the scaling has no fixed point.

B. Boufama 18
Chapter III: Two-Dimensional Geometric Transformations

General rotations

A rotation around an arbitrary axis can be

achieved by the following three steps:
1. Translate the object such that the axis position
moves to the origin.
2. Rotate the object around the origin.
3. Translate the object such that the axis position
moves back to its original position.

B. Boufama 19
Chapter III: Two-Dimensional Geometric Transformations

B. Boufama 20
Chapter III: Two-Dimensional Geometric Transformations

Using matrix operations, the composite

transformation for this sequence is given by
T (xr , yr ) · R(θ) · T (−xr , −yr )
Expanding it yields
     


1 0 xr   cos θ − sin θ 0   1 0 −xr 
0 1 yr  ·  sin θ cos θ 0  ·  0 1 −yr  =
     



0 0 1 0 0 1 0 0 1
     

 


cos θ − sin θ xr (1 − cos θ) + yr sin θ 
sin θ cos θ yr (1 − cos θ) − xr sin θ 
 



0 0 1
 

B. Boufama 21
Chapter III: Two-Dimensional Geometric Transformations

General fixed-point scaling

A scaling with respect to a fixed point (xf , yf ) can

be achieved by the following three steps:
1. Translate the object such that the fixed point moves
to the origin,
2. Scale the object,
3. Translate the object such that the fixed point moves
back to its original position.

B. Boufama 22
Chapter III: Two-Dimensional Geometric Transformations

Using matrix operations, the composite

transformation for this sequence is given by
T (xf , yf ) · S(sx, sy ) · T (−xf , −yf )

Expanding it yields
     


1 0 xf   sx 0 0   1 0 −xf 

0 1 yf  ·  0 sy 0  ·  0 1 −yf =
     
 
 
 
0 0 1 0 0 1 0 0 1
     

 


sx 0 xf (1 − sx) 
0 sy yf (1 − sy )  = S(xf , yf , sx, sy )
 



0 0 1
 

B. Boufama 23
Chapter III: Two-Dimensional Geometric Transformations

Composite transformation properties

Because the geometric transformations are

performed using matrix operations, we have the
following properties :
• Matrix product is associative :
A · B · C = (A · B) · C = A · (B · C)

• Matrix product is noncommutative :

A · B 6= B · A
This is a very important issue. For instance, if an
object is to be translated then rotated, the order
must be observed.
However, sometimes this operation is commutative.
For instance, two successive rotations can be
performed in any order.
B. Boufama 24
Chapter III: Two-Dimensional Geometric Transformations

Form of a general transformation

A general 2D transformation, might include,

translations, rotations, and scalings, can be
expressed in a single matrix :
M = T (tx, ty ) · R(xf , yf , θ) · S(xf , yf , sx, sy )
M is a 3 × 3 matrix given by
 


sx cos θ −sy sin θ xf (1 − sx cos θ) + yf sy sin θ + tx 
sx sin θ sy cos θ yf (1 − sy cos θ) − xf sx sin θ + ty 
 



0 0 1
 

Where,

0
   
 x   x 
0 
  
y  = M ·  y 
  
  


1 1
   

B. Boufama 25
Chapter III: Two-Dimensional Geometric Transformations

Transformations between coordinate systems

It is very common in Graphics that an object

described in one coordinate system has to be
transformed into another coordinate system.
For example, we have the following situations :
• A scene is described is a coordinate system, call it
scene-coordinates.
• An object, described in a different coordinate
system, call it object-coordinates.
• Our Goal: place the object in the scene.
Pre-requisite: the object must be transformed
such that its coordinates become defined in the
scene coordinate system, by performing a
transformation that include a rotation, translation
and a an optional scaling.

B. Boufama 26
Chapter III: Two-Dimensional Geometric Transformations

To transform an object description from the object

coordinate to the scene coordinate, assuming that
no scaling is needed, we need superimpose the
Object coordinate system onto the Scene
coordinate system.

B. Boufama 27
Chapter III: Two-Dimensional Geometric Transformations

Ignoring scalings, such a coordinate system change

can be performed in two steps :
• A translation to bring the origin (x0, y0) of the
object coordinate system on the origin of the scene
coordinate system. This translation is given by
 
1 0 −x0 

T (−x0, −y0) = 0 1 −y0 





0 0 1



• A rotation around the scene origin to superimpose

the OX-axis on the X-axis. This rotation is given by
 
cos θ sin θ 0 


R(−θ) = − sin θ cos θ 0 
 



0 0 1
 

The object-to-scene transformation matrix MO2S

is given by
MO2S = R(−θ) · T (−x0, −y0)

B. Boufama 28
Chapter III: Two-Dimensional Geometric Transformations

Affine transformation

An affine transformation is a linear transformation

where p0 = A · p:
0
     
 x   a11 a12 a13   x 
0 
     
 y  =  a21 a22 a23  ·  y 
    
     
     
1 0 0 1 1
     

Expanding the above yields

x0 = a11x + a12y + a13




0
 y = a x + a y + a

21 22 23


The above suggest that any 3 × 3 matrix with the

last row defined by (0, 0, 1) is an affine
transformation. In particular, all the genral
transformations we have seen are affine.

B. Boufama 29
Chapter III: Two-Dimensional Geometric Transformations

Inavriants of affine transformations

An affine transformation does not necessary

preserve the shape. In particular, angles and
lenghths are not preserved by all affine
transformations.
The invariants of affine transformations are
• Parallelism : two parallel lines will remain parallel
after an affine transformation
• Ratios : a ratio between two lenghts will remain the
same. For instance, if a point m was the midle
points of p and q, then the transformed point m0 will
remain the midle point of p0 and q 0.
• Finite points will remain finite points.

B. Boufama 30
Chapter III: Two-Dimensional Geometric Transformations

Example : Consider the affine transformation A

 
1 2 3 


A = 4 5 6 
 



0 0 1
 

And consider a square defined by four points.

Bef ore transf ormation Af ter transf ormation

0
 





p 1 = (0, 0, 1) 




p 1 = (3, 6, 1)
0
 
 p2 = (1, 0, 1) A·p  p = (4, 10, 1)

 


 

2
0






p 3 = (0, 1, 1) =⇒ 





p 3 = (5, 11, 1)
 p0 = (6, 15, 1)
 
 p = (1, 1, 1)

 

 
4 4

B. Boufama 31
Chapter III: Two-Dimensional Geometric Transformations

OpenGL geometric primitives

B. Boufama 32
Chapter III: Two-Dimensional Geometric Transformations

Examples:
• Empty polygon :
glBegin(GL_LINE_LOOP);
glVertex2i(100, 100);
glVertex2i(200, 100);
glVertex2i(250, 200);
glVertex2i(200, 300);
glEnd();
• Two lines :
glBegin(GL_LINES);
glVertex2i(100, 100);
glVertex2i(200, 100);
glVertex2i(250, 200);
glVertex2i(200, 300);
glEnd();

B. Boufama 33
Chapter III: Two-Dimensional Geometric Transformations

Transformation functions in OpenGL

Although these are three-dimensional

transformation, they can be used for the 2D case.
• glRotatef(angle, x, y, z) :
where,
– angle, in degrees, is the rotation angle
– (x, y, z), a vector, are the 3D coordinates of the
rotation axis.
• glTranslatef(x, y, z) :
where, (x, y, z) is the translation vector
• glScalef(sx, sy , sz ) :
where, sx, sy and sz are the three scale factors along
the coordinate axis.
Example: Rolling polygon.
B. Boufama 34
Chapter III: Two-Dimensional Geometric Transformations

GLint tx, ty, angle, moving;

GLint pol[8][2] ={{150, 50}, {200, 50}, {250, 100}, {250, 150}, {200, 200},
{150, 200}, {100, 150}, {100, 100}};
// The centroid of these 8 points is : (175, 125)

void myInit(int *, char **);

void mouseManager(int, int, int, int);
void displayFunc(void);
void timer(int);

int main(int argc, char **argv){

myInit(&argc, argv);
glutDisplayFunc(displayFunc);
glutMouseFunc(mouseManager);

tx=ty=angle=moving=0;
glutMainLoop(); //infinite loop
}

void displayFunc(void){
int i;

glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
gluOrtho2D(0.0,640.0,0.0,480.0);

glTranslatef(175+tx, 125.0+ty, 0.0);

glRotatef(angle, 0.0, 0.0, 1.0);
glTranslatef(-(175+tx), -(125.0+ty), 0.0);

glTranslatef(tx, ty, 0.0);

glBegin(GL_POLYGON); // glBegin(GL_LINE_LOOP);
for(i=0; i<8; i++)
glVertex2i(pol[i][0], pol[i][1]);
glEnd();
glFlush();
}

B. Boufama 35
Chapter III: Two-Dimensional Geometric Transformations

void mouseManager(int button, int state, int x, int y){

switch(button){
case GLUT_LEFT_BUTTON:
if(state==GLUT_DOWN)
if(moving==1)
moving=0;
else{
moving=1;
glutTimerFunc(100, timer, 1);
}
break;
case GLUT_RIGHT_BUTTON:
if(state==GLUT_DOWN)
if(moving==2)
moving=0;
else{
moving=2;
glutTimerFunc(100, timer, 2);
}
break;
case GLUT_MIDDLE_BUTTON:
exit(0);
break;
defaut:;
}
}
void timer(int v){
if(moving==0)
return;
if(moving==1)
tx=(tx+3)%640;
else
ty=(ty+3)%480;

angle= (angle+3)%360;
displayFunc();
glutTimerFunc(100, timer, v);
}

B. Boufama 36
Chapter III: Two-Dimensional Geometric Transformations

void myInit(int *argc, char **argv){

glutInit(argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(640,480);
glutInitWindowPosition(100, 150);
glutCreateWindow(argv[0]);

glClearColor(1.0,1.0,1.0,0.0); // Set clear color to white

glColor3f(1.0f,0.0f,0.0f); // set the drawing color to black
glPointSize(2.0);
glMatrixMode(GL_PROJECTION); // virtual camera
}

B. Boufama 37
Chapter III: Two-Dimensional Geometric Transformations

Summary

• The basic geometric transformations are translation,

rotation, and scaling.
• Any 2D geometric transformation can be expressed
as a 3 × 3 matrix operator.
• Several 2D geometric transformations can be
concatenated and described by a 3 × 3 matrix.
• Homogeneous coordinates are used to make the
matrix operations more convenient.
• A transformation between cartesian coodinate
systems can be achieved by a translation then
rotation tranformations.
• Affine transformations are linear tranformation that
can be described by a 3 × 3 matrix.
• In general, affine transformations are not rigid
transformations.

B. Boufama 38