2D Transformations 2D Transformation

Given a 2D object, transformation is to

y change the objects
Position (translation)
y Size (scaling)
x
Orientation (rotation)
Shapes (shear)
x y
Apply a sequence of matrix multiplication to
the object vertices
x

Point representation Translation

Re-position a point along a straight line
We can use a column vector (a 2x1 matrix) to
represent a 2D point x Given a point (x,y), and the translation
distance (tx,ty)
y
A general form of linear transformation can The new point: (x, y) (x,y)

be written as: x = x + tx
ty
y = y + ty (x,y)
tx
x = ax + by + c X a b c x
OR Y = d e f * y
1 0 0 1 1 OR P = P + T where P = x p= x T= tx
y = dx + ey + f y y ty

1
 3x3 2D Translation Matrix Translation
x = x + tx How to translate an object with multiple
y y ty
vertices?
Use 3 x 1 vector

x 1 0 tx x
y = 0 1 ty * y
1 0 0 1 1 Translate individual
vertices
Note that now it becomes a matrix-vector multiplication

2D Rotation Rotation
Default rotation center: Origin (0,0) (x,y) -> Rotate about the origin by (x,y)

(x, y) (x,y)
r
> 0 : Rotate counter clockwise
How to compute (x, y) ?

x = r cos () y = r sin ()
x = r cos ( + ) y = r sin ( + )
< 0 : Rotate clockwise

2
 Rotation Rotation
(x,y) (x,y)
x = r cos () y = r sin () x = x cos() y sin()
x = r cos ( + ) y = r sin ( + ) (x,y) y = y cos() + x sin() (x,y)
r r

x = r cos ( + )
Matrix form?
= r cos() cos() r sin() sin()
= x cos() y sin() x cos() -sin() x
=
y = r sin ( + ) y sin() cos() y
= r sin() cos() + r cos()sin()
= y cos() + x sin() 3 x 3?

3x3 2D Rotation Matrix Rotation

x =
cos() -sin() x (x,y) How to rotate an object with multiple
y sin() cos() y vertices?
(x,y)
r

x =
cos() -sin() 0 x
y sin() cos() 0 y
1 0 0 1 1 Rotate individual
Vertices

3
 2D Scaling 2D Scaling
(4,4)
Scale: Alter the size of an object by a scaling factor
(Sx, Sy), i.e. (2,2) Sx = 2, Sy = 2

(2,2)
(1,1)
x = x . Sx x Sx 0 x
=
y = y . Sy y 0 Sy y
Not only the object size is changed, it also moved!!
(4,4)
Usually this is an undesirable effect
Sx = 2, Sy = 2
(2,2) We will discuss later (soon) how to fix it
(2,2)
(1,1)

3x3 2D Scaling Matrix Put it all together

Translation: x = x + tx
x Sx 0 x
= y y ty
y 0 Sy y

Rotation: x = cos() -sin() * x

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

4
Or, 3x3 Matrix representations Why use 3x3 matrices?
Translation: x 1 0 tx x
So that we can perform all transformations
y = 0 1 ty * y
1 0 0 1 1 using matrix/vector multiplications

Rotation: x cos() -sin() 0 x

y
=
sin() cos() 0 * y This allows us to pre-multiply all the matrices
1 0 0 1 1 together
x Sx 0 0 x
Scaling: y = 0 Sy 0 * y The point (x,y) needs to be represented as
1 0 0 1 1
(x,y,1) -> this is called Homogeneous
Why use 3x3 matrices? coordinates!

Shearing Shearing in y

x 1 0 0 x
y = g 1 0 * y
1 0 0 1 1

Interesting Facts:
Y coordinates are unaffected, but x cordinates
are translated linearly with y A 2D rotation is three shears
That is: Shearing will not change the area of the object

x 1 h 0 x
y = y y = 0 1 0 * y Any 2D shearing can be done by a rotation, followed
x = x + y * h 1 0 0 1 1 by a scaling, and followed by a rotation

5
 Rotation Revisit Arbitrary Rotation Center
The standard rotation matrix is used to To rotate about an arbitrary point P (px,py)
rotate about the origin (0,0) by :
Translate the object so that P will coincide with
cos() -sin() 0 the origin: T(-px, -py)
sin() cos() 0 Rotate the object: R()
0 0 1
Translate the object back: T(px,py)

What if I want to rotate about an

(px,py)
arbitrary center?

Arbitrary Rotation Center Scaling Revisit

Translate the object so that P will coincide with The standard scaling matrix will only
the origin: T(-px, -py)
anchor at (0,0)
Rotate the object: R()
Translate the object back: T(px,py) Sx 0 0
0 Sy 0
0 0 1
Put in matrix form: T(px,py) R() T(-px, -py) *P
What if I want to scale about an arbitrary
x 1 0 px cos() -sin() 0 1 0 -px x
y = 0 1 py sin() cos() 0 0 1 -py y pivot point?
1 00 1 0 0 1 0 0 1 1

6
 Arbitrary Scaling Pivot Affine Transformation
To scale about an arbitrary pivot point P Translation, Scaling, Rotation, Shearing are all affine
transformation
(px,py):
Affine transformation transformed point P (x,y) is
Translate the object so that P will coincide with a linear combination of the original point P (x,y), i.e.
the origin: T(-px, -py) x m11 m12 m13 x
Rotate the object: S(sx, sy) y = m21 m22 m23 y
1 0 0 1 1
Translate the object back: T(px,py)
Any 2D affine transformation can be decomposed
into a rotation, followed by a scaling, followed by a
(px,py)
shearing, and followed by a translation.
Affine matrix = translation x shearing x scaling x rotation

Composing Transformation Composing Transformation

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

7
 Transformation order matters! How OpenGL does it?
Example: rotation and translation are not OpenGLs transformation functions are
commutative
meant to be used in 3D
Translate (5,0) and then Rotate 60 degree
No problem for 2D though just ignore
OR
the z dimension
Rotate 60 degree and then translate (5,0)??
Translation:
glTranslatef(d)(tx, ty, tz) ->
Rotate and then translate !! glTranslatef(d)(tx,ty,0) for 2D

How OpenGL does it? OpenGL Transformation Composition

Rotation: A global modeling transformation matrix

glRotatef(d)(angle, vx, vy, vz) -> (GL_MODELVIEW, called it M here)
glRotatef(d)(angle, 0,0,1) for 2D glMatrixMode(GL_MODELVIEW)
y
(vx, vy, vz) rotation axis
y The user is responsible to reset it if necessary
glLoadIdentity()

x
-> M= 100
x
010
z You can imagine z is pointing out 001
of the slide

8
 OpenGL Transformation Composition Transformation Pipeline
Matrices for performing user-specified
transformations are multiplied to the model view
global matrix
For example, Object Modeling Object
Local Coordinates transformation World Coordinates
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