Computer Graphics

2D Transformations

1
 Transformation
Transform every point on an object according to certain rule.

Q (x’, y’)

P (x,y)
T

Initial Object

Transformed Object

x x’ The point Q is the image of P under the transformation

y y’ T.
RM [6]-2
 Translation
(55,60)

(20,35)

(45,30)
(65,30)

x  x  tx
(10,5) (30,5)
y  y  t y
The vector (tx, ty) is called the offset vector.

RM [6]-3
 Translation (OpenGL)

Specifying a 2D-Translation:

glTranslatef(tx, ty, 0.0);

(The z component is set to 0 for 2D translation).

RM [6]-4
 Rotation About the Origin
y
(x’,y’)

(x’,y’)
(x,y)
(x,y)

o x
x   x cos  y sin 
y   x sin   y cos
The above 2D rotation is actually a rotation about the z-axis (0,0,1) by
an angle .

RM [6]-5
 Rotation About the Origin

Specifying a 2D-Rotation about the origin:

glRotatef(theta, 0.0, 0.0, 1.0);

theta: Angle of rotation in degrees.

The above function defines a rotation about the z-axis (0,0,1).

RM [6]-6
 Rotation About a Pivot Point

(x’,y’) (x,y)

(xp , yp)
Pivot Point

•Pivot point is the point of rotation

•Pivot point need not necessarily be on the object

RM [6]-7
 Rotation About a Pivot Point

STEP-1: Translate the pivot point to the origin

(x,y)

(x1, y1)

(xp , yp)

x1  x  x p

y1  y  y p
RM [6]-8
 Rotation About a Pivot Point

STEP-2: Rotate about the origin

(x2, y2) (x1, y1)

x 2  x1 cos  y1sin 

y 2  x1 sin   y1 cos

RM [6]-9
 Rotation About a Pivot Point
STEP-3: Translate the pivot point to original position
(x’, y’)

(x2, y2)

(xp, yp)

x  x 2  x p

y  y 2  y p
RM [6]-10
 Rotation About a Pivot Point
x   ( x  x p ) cos  ( y  y p ) sin   x p
y   ( x  x p ) sin   ( y  y p ) cos  y p

Specifying a 2D-Rotation about a pivot point (xp,yp):

glTranslatef(xp, yp, 0);

glRotatef(theta, 0, 0, 1.0);
glTranslatef(-xp, -yp, 0);

Note the OpenGL specification of the sequence of transformations in the

reverse order !

RM [6]-11
 Scaling About the Origin

(x’,y’)

(x,y)
x   x. s x
(x,y)

(x’,y’)
y   y. s y

Uniform Non-Uniform

( sx , s y  0) The parameters sx, sy are called scale factors.

sx  s y sx  s y
RM [6]-12
 Scaling About the Origin

Specifying a 2D-Scaling with respect to the origin:

glScalef(sx, sy, 1.0);

sx, sy: Scale factors along x, y.

For proper scaling sx, sy must be positive.
For 2D scaling, the third scale factor must be set to 1.0.

RM [6]-13
 Scaling About a Fixed Point

• Translate the fixed point to origin

(x,y) • Scale with respect to the origin
•Translate the fixed point to its original
(x’,y’) position.

(xf , yf )

x   ( x  x f ).s x  x f
y   ( y  y f ).s y  y f
RM [6]-14
 Reflections
y
Reflection about y Initial
Object
x =  x

Reflection about
origin
Reflection about x
x =  x
y =  y
y =  y
RM [6]-15
 Reflections

Reflection about x: glScalef(1, -1, 1);

Reflection about y: glScalef(-1, 1, 1);
Reflection about origin: glScalef(-1, -1, 1);

RM [6]-16
 Shear

x   x  hx y
y  y

•A shear transformation in the x-direction (along x)

shifts the points in the x-direction proportional
to the y-coordinate.
•The y-coordinate of each point is unaffected.
RM [6]-17
 Matrix Representations

 x    x  t x 
Translation  y     y   t 
     y

Rotation [Origin]
 x   cos  sin    x 
 y     sin  cos   y 
    
 x    sx 0   x 
Scaling [Origin]  y    0 s   y 
   y  

RM [6]-18
 Matrix Representations

 x  1 0  x
Reflection about x  y    0   
 1  y 
  
 x    1 0  x 
Reflection about y
 y    0   
1  y 
  
Reflection about  x    1 0   x 
the Origin  y   0  1  y 
    
RM [6]-19
 Matrix Representations

Shear along x  x  1 h  x 
 y    0   
1  y 
  
 x   1 0  x 
Shear along y
 y    h   
1  y 
  

RM [6]-20
 Homogeneous Coordinates
To obtain square matrices an additional row was added to the matrix and an
additional coordinate, the w-coordinate, was added to the vector for a point.
In this way a point in 2D space is expressed in three-dimensional
homogeneous coordinates.
This technique of representing a point in a space whose dimension is one
greater than that of the point is called homogeneous representation. It
provides a consistent, uniform way of handling affine transformations.

RM [6]-21
 Homogeneous Coordinates
•If we use homogeneous coordinates, the geometric
transformations given above can be represented using
only a matrix pre-multiplication.
• A composite transformation can then be represented
by a product of the corresponding matrices.
Cartesian Homogeneous

( x, y ) 
( xh, yh, h), h  0

a b
 ,  ( a, b, c ), c  0
c c
Examples: (5, 8) (15, 24, 3)
(x, y) (x, y, 1)
RM [6]-22
 Homogeneous Coordinates
Basic Transformations
 x   1 0 t x   x 
Translation  y   0 1 t   y 
P’=TP    y  
 1  0 0 1   1 
 x   cos  sin  0  x 
Rotation [O]  y    sin  cos   
P’=RP    0  y 
 1   0 0 1  1 
 x    sx 0 0  x 
Scaling [O]  y    0 s 0  y 
P’=SP    y  
RM  1   0 0 1  1  [6]-23
 Inverse of Transformations

If,  x  x then,  x  x

 y   [T ] y   y   [T ]1  y 
       
 1   1   1   1 

1
Examples: T (t x , t y )  T (t x ,t y )
R 1 ( )  R( )
1 1
S (sx , s y )  S  , 
1
s s 
 x y
RM
H x1 (h)  H x (h) [6]-24
 Transformation Matrices

Additional Properties:

T (t x , t y )T (u x , u y )  T (t x  u x , t y  u y )

R (1 ) R ( 2 )  R (1   2 )

R ( )  1

S ( s x , s y ) S ( wx , wy )  S ( s x wx , s y wy )

RM [6]-25
 Composite Transformations
Transformation T followed by  x  x
Transformation Q followed by  y   [ R ][Q ][T ] y 
Transformation R:    
 1   1 

Example: (Scaling with respect to a fixed point)

 x   1 0 x f   s x 0 0 1 0  x f   x 
 y   0 1 y   0    
0 0 1  y f   y 
   f  sy
 1  0 0 1   0 0 1 0 0 1   1 

Order of Transformations

RM [6]-26
 Order of Transformations
In composite transformations, the order of
transformations is very important.
Rotation followed by Translation:

Translation followed by Rotation:

RM [6]-27
 Order of Transformations (OpenGL)
OpenGL postmultiplies the current matrix
with the new transformation matrix
glMatrixMode(GL_MODELVIEW); Current Matrix

glLoadIdentity(); [I]

glTranslatef(tx, ty, 0); [T]

glRotatef(theta, 0, 0, 1.0); [T][R]

glVertex2f(x,y); [T][R]P

Rotation followed by Translation !!

RM [6]-28
 General Properties
Preserved Attributes
Line Angle Distance Area

Translation Yes Yes Yes Yes

Rotation Yes Yes Yes Yes

Scaling Yes No No No

Reflection Yes Yes Yes Yes

Shear Yes No No Yes

RM [6]-29
 Affine Transformation
A general invertible, linear, transformation.

x   a1 x  b1 y  c1
y   a 2 x  b2 y  c2
(a1b2  a 2 b1  0)

Transformation Matrix:

 a1 b1 c1 
a b2 c 2 
 2
 0 0 1 
RM [6]-30
 Affine Transformation: Properties

• Product of affine transformations is affine.

•Affine transformations preserve linearity of segments.
•Affine transformations preserve parallelism between
lines.
•Affine transformations are invertible.

RM [6]-31