2D Transformations

1
 Transformation
• What are they?
• Changing something to something else via rules.
• Mathematics: mapping between values in a range set and domain set (function/ relation)
• Geometric: translate, rotate, scale, shear…

• Why are they important to graphics?

• Moving objects on screen/ in space
• specifying the camera’s view of a 3D scene
• Mapping from model space to world space to camera space to screen space
• Specifying parent/child relationships

[6]-2
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 T.

y y’
3
 Transformations

Basic 2D Transformations:
 Translation
 Scaling
 Rotation
Other 2D Transformations:
 Reflection
 Shearing

4
5
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.

6
Translation (OpenGL)

Specifying a 2D-Translation:

glTranslatef(tx, ty, 0.0);

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

7
8
 Scaling About the Origin

(x’,y’)

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

Uniform Non-Uniform
sx  s y
( sx , sy  0)
The parameters sx, sy are called scale factors.
sx  s y
9
 Scaling About the Origin(OpenGL)

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.

10
11
12
 Rotation About the Origin cont.
y
(x’,y’)

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

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

13
Rotation About the Origin (OpenGL)

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).

14
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

15
 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
16
 Rotation About a Pivot Point

STEP-2: Rotate about the origin

(x2, y2) (x1, y1)

x 2  x1 cosq  y1sinq

y 2  x1 sinq  y1 cosq

17
 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
18
Rotation About a Pivot Point
x   ( x  x p ) cosq  ( y  y p ) sin q  x p
y   ( x  x p ) sin q  ( y  y p ) cosq  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 !

19
 Scaling About a Fixed Point

• Translate the fixed point to origin

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

(xf , yf )

x  ( x  x f ).s x  x f
y   ( y  y f ).s y  y f
20
 y
Reflections Initial
Reflection about y
x =  x Object

Reflection about
origin
Reflection about x
x =  x y =  y
y =  y
[21
Reflections(OpenGL)

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

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

22
Shear
Shear in x-direction

x  x  Shx 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.

23
 Shear
Shear in y direction

x  x
y  y  Shy x

•A shear transformation in the y-direction (along y) shifts the points in the y-

direction proportional to the x-coordinate.
•The x-coordinate of each point is unaffected.

24
Matrix Representation
x'  x  tx
y'  y  t y
 x   x t x 
 y     y   t 
     y
x  x cos q  y sin q
y   x sin q  y cos q
 x   cos q  sin q   x 
 y   sin q   y
   cos q  
x '  x.S x  S x . x  0. y
y '  y.Sy  0. x  Sy. y
 x   sx 0   x
 y   0 sy   y
    

25
 Matrix Representations

 x    x  t x 
Translation  y     y   t 
     y
 x   cosq  sin q   x 
 y     sin q cosq   y 
Rotation [Origin]
    
 x   sx 0   x 
Scaling [Origin]  y    0 s   y 
   y  

26
 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 
    
27
Matrix Representations

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

Shear along y    y  

28
 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.

29
 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)
30
Homogeneous Coordinates

Matrix Representation

x '  x  t x  1.x  0. y  t x .1
y '  y  t y  0.x  1. y  t y .1
1  0.x  0. y  1.1
 x   1 0 tx   x 
 y  0 1 ty   y
    

1  0 0 1 1 

31
 Homogeneous Coordinates
Basic Transformations
 x   1 0 tx   x 
Translation   
P’=TP   y   0 1 t y   y 
 1   0 0 1   1 
 x   cos q  sin q 0  x 
Rotation [O]   
P’=RP y
  
  sin q cos q 0   y 
 1   0 0 1   1 
 x   s x 0 0  x 
Scaling [O]  y    0 s 0   y 
P’=SP    y

 1   0 0 1   1  32
[6]-33
 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 (q )  R(q )
1

1
1 1
S ( sx , s y )  S  , 
 sx s y 
 
1 1
M x  M x and M y  M y 34
 Transformation Matrices

Additional Properties:

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

R (q1 ) R (q 2 )  R (q1  q 2 )

R (q )  1

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

35
 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  sx 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

36
 Order of Transformations
In composite transformations, the order of transformations is very important.
Rotation followed by Translation:

Translation followed by Rotation:

37
 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 !!

38
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 
39
 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.

40
Thank You

41