2D Transformations

y
x

x y

x
 2D Transformation
 Given a 2D object, transformation is to
change the object’s
 Position (translation)
 Size (scaling)
 Orientation (rotation)
 Shapes (shear)
 Apply a sequence of matrix
multiplication to the object vertices
 Point representation
 We can use a column vector (a 2x1
matrix) to represent a 2D point x
y

 Translation is a rigid-body
transformation
 Translation
 Re-position a point along a straight line
 Given a point (x,y), and the translation
distance (tx,ty)
The new point: (x’, y’) P’(x’,y’)
x’ = x + tx
ty
y’ = y + ty P(x,y)
tx

OR P’ = P + T where P’ = x’ p= x T = tx
y’ y ty
 Translation
 How to translate an object with
multiple vertices?

Translate individual
vertices
 2D Rotation
 Default rotation center: Origin
 (0,0) is rigid-body
Rotation
transformation

Rotate counter clockwise



Rotate clockwise

 Rotation
(x,y) -> Rotate about the origin by  (x’,y’)

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

r

How to compute (x’, y’) ?

x = r cos () y = r sin ()

x’ = r cos () y = r sin ()
 Rotation
(x’,y’)
x = r cos () y = r sin ()
x’ = r cos () y = r sin ()  (x,y)
r

x’ = r cos ()
= r cos() cos() – r sin() sin()
= x cos() – y sin()
y’ = r sin ()
= r sin() cos() + r cos()sin()
= y cos() + x sin()
 Rotation
(x’,y’)
x’ = x cos() – y sin()
(x,y)
y’ = y cos() + x sin() 
r


Matrix form?

x’ =
cos() -sin() x
y’ sin() cos() y

3 x 3?
 3x3 2D Rotation Matrix
x’ =
cos() -sin() x (x’,y’)
y’ sin() cos() y
 (x,y)
r


x’ =
cos() -sin() 0 x
y’ sin() cos() 0 y
1 0 0 1 1
 Rotation
 How to rotate an object with
multiple vertices?
* A positive value for the angle θ defines a
counterclockwise
rotation about the pivot point


Rotate individual
Vertices
 2D Scaling

Scale: Alter the size of an object by a scaling factor

(Sx, Sy), i.e.

x’ = x . Sx x’ Sx 0 x
=
y’ = y . Sy y’ 0 Sy y

(4,4
)
(2,2) Sx = 2, Sy = 2

(2,2)
(1,1)
 2D Scaling
(4,4
)
(2,2) Sx = 2, Sy = 2

(2,2)
(1,1)

 Not only the object size is changed, it also moved!!

 Usually this is an undesirable effect
 We will discuss later (soon) how to fix it
3x3 2D Scaling Matrix
x’ Sx 0 x
=
y’ 0 Sy y

x’ Sx 0 0 x
y’ = 0 Sy 0 * y
1 0 0 1 1
Put it all together
 Translation: x’= x+ tx
y’ y ty

 Rotation: x’= cos() -sin()* x

y’ sin() cos() y

 Scaling: x’ = Sx 0 * x
y’ 0 Sy y
Or, 3x3 Matrix
representations
 Translation: x’ 1 0 tx x
y’ = 0 1 ty * y
1 0 0 1 1

 Rotation: x’ cos() -sin() 0 x

=
y’ sin() cos() 0 * y
1 0 0 1 1
x’ Sx 0 0 x
 Scaling: y’ = 0 Sy 0 * y
1 0 0 1 1

Why use 3x3 matrices?

 Why use 3x3 matrices?
 So that we can perform all
transformations using matrix/vector
multiplications

 This allows us to pre-multiply all the

matrices together
 Rotation Revisit
 The standard rotation matrix is
used to rotate about the origin
(0,0)
cos() -sin() 0
sin() cos() 0
0 0 1

 What if I want to rotate about an

arbitrary center?
 Arbitrary Rotation Center
 To rotate about an arbitrary point P
(px,py) by :
 Translate the object so that P will coincide
with the origin: T(-px, -py)
 Rotate the object: R()
 Translate the object back: T(px,py)

(px,py)
 Arbitrary Rotation Center
 Translate the object so that P will coincide
with the origin: T(-px, -py)
 Rotate the object: R()
 Translate the object back: T(px,py)

 Put in matrix form: T(px,py) R() T(-px, -py) *

P
x’ 1 0 px cos() -sin() 0 1 0 -px x
y’ = 0 1 py sin() cos() 0 0 1 -py y
1 00 1 0 0 1 0 0 1 1
 Scaling Revisit
 The standard scaling matrix will
only anchor at (0,0)
Sx 0 0
0 Sy 0
0 0 1

 What if I want to scale about an

arbitrary pivot point?
 Arbitrary Scaling Pivot
 To scale about an arbitrary pivot point P
(px,py):
 Translate the object so that P will coincide
with the origin: T(-px, -py)
 Rotate the object: S(sx, sy)
 Translate the object back: T(px,py)

(px,py)
 Composing Transformation
 Composing Transformation – the process of
applying several transformation in succession
to form one overall transformation
 If we apply transform a point P using M1
matrix first, and then transform using M2, and
then M3, then we have:
(M3 x (M2 x (M1 x P ))) = M3 x M2 x M1 x
P (pre-multiply)
M
 Composing Transformation

Matrix multiplication is associative
M3 x M2 x M1 = (M3 x M2) x M1 = M3 x (M2 x M1)
 Transformation products may not be commutative Ax
B != B x A
 Some cases where A x B = B x A
A B
translation translation
scaling scaling
rotation rotation
uniform scaling rotation
(sx = sy)
 Transformation order
matters!
 Example: rotation and translation are not
commutative
Translate (5,0) and then Rotate 60 degree

OR

Rotate 60 degree and then translate (5,0)??

Rotate and then translate !!

 How OpenGL does it?
 OpenGL’s transformation functions
are meant to be used in 3D
 No problem for 2D though – just
ignore the z dimension
 Translation:
 glTranslatef(d)(tx, ty, tz) ->
glTranslatef(d)(tx,ty,0) for 2D
 How OpenGL does it?
 OpenGL has a simple and powerful
transformation model.
 Since the transformation
machinery in OpenGL is exposed in
the form of the modelview and
projection matrices,
 How OpenGL does it?
 Rotation:
 glRotatef(d)(angle, vx, vy, vz) ->
glRotatef(d)(angle, 0,0,1) for 2D
y y
(vx, vy, vz) – rotation axis

x x

z You can imagine z is pointing out

of the slide
 OpenGL Transformation
Composition
 A global modeling transformation matrix
glMatrixMode(GL_MODELVIEW)
 The user is responsible to reset it if
necessary
glLoadIdentity()
-> M= 100
010
001
 OpenGL Transformation
Composition
 Matrices for performing user-specified
transformations are multiplied to the model
view global matrix
 For example,
1 0 1
glTranslated(1,1 0); M = M x 0 1 1
0 0 1
 All the vertices P defined within glBegin() will
first go through the transformation (modeling
transformation)
P’ = M x P