2D Transformation

• Transformation changes an object’s:– Position (Translation)– Size (Scaling)– Orientation (Rotation)– Shape (Deformation)

• Transformation is done by a sequence of matrix operations applied on vertices.

2D Transformation

Vector Representation

• If we define a 2D vector as:

• A transformation in general can be defined as:

x

y

⎛⎝⎜

⎞⎠⎟

x ' =ax+by+ cy'=dx+ ey+ f

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

a b cd e f0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x '

y '

⎛⎝⎜

⎞⎠⎟= a b

d e⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟+

cf

⎛⎝⎜

⎞⎠⎟

Transformation: Translation

• Given a position (x, y) and an offset vector (tx, ty):

x ' =x+ txy'=y+ ty

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

1 tx1 ty

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x '

y '

⎛⎝⎜

⎞⎠⎟= 1

1⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟+

txty

⎛⎝⎜

⎞⎠⎟

Transformation: Translation

• To translate the whole shape:

Transformation: Rotation

• Default rotation center: origin

Transformation: Rotation• If We rotate around the origin,• How to rotate a vector (x, y) by an angle of θ ?

• If we assume:x =rcosφy=rsinφ

x ' =rcos(θ +φ)y'=rsin(θ +φ)

Transformation: Rotationx =rcosφy=rsinφ

x ' =rcos(θ +φ)y'=rsin(θ +φ)

Before Rotation After Rotation

x ' =rcosφcosθ −rsinφsinθ =xcosθ −ysinθy'=rcosφsinθ + rsinφcosθ =xsinθ + ycosθ

x '

y '

⎛⎝⎜

⎞⎠⎟= cosθ −sinθ

sinθ cosθ⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

Transformation: Rotation

• To translate the whole shape:

θ

Transformation: Scaling• Change the object size by a factor of s:

x ' =s⋅xy'=s⋅y

x '

y '

⎛⎝⎜

⎞⎠⎟

= ss

⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

ss

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

(2, 1)

(-2, -1)

s = 2

(4, 2)

(-4, -2)

Transformation: Scaling• But when the object is not center at origin

(5, 3)

(1, 1)

s = 2

(10, 6)

(2, 2)(3, 2)

(6, 4)

Transformation: Scaling

x ' =s⋅xy'=s⋅y

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=s

s1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟or

x ' =sx⋅xy'=sy⋅y

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

sxsy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟or

• Isotropic (uniform) scaling

• Anistropic (non-uniform) scaling

Summaryx '

y '

⎛⎝⎜

⎞⎠⎟= 1

1⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟+

txty

⎛⎝⎜

⎞⎠⎟

x '

y '

⎛⎝⎜

⎞⎠⎟=

sxsy

⎛

⎝⎜

⎞

⎠⎟

xy

⎛⎝⎜

⎞⎠⎟

x '

y '

⎛⎝⎜

⎞⎠⎟= cosθ −sinθ

sinθ cosθ⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

• Translation:

• Rotation

• Scaling

Summary

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

ss

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=1 ox

1 oy1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

• Translation:

• Rotation

• Scaling

We use the homogenous coordinate to make sure transformations have the same form.

Why use 3-by-3 matrices?

• Transformations now become the consistent.• Represented by as matrix-vector

multiplication.

• We can stack transformations using matrix multiplications.

Some math…

• Two vectors are orthogonal if:

u ⋅v=u0v0 +u1v1 +u2v2 +L =0

u =

u0

u1

u2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

, v=

v0

v1

v2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

uTv= u0 u1 u2 L( )

v0

v1

v2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=u⋅v

A Quiz

u =123

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟, v=

−101

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

u =121

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟, v=

−101

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

Some math…

• A matrix is orthogonal if

and only if:

m i ⋅mj =0, ∀i, j (i ≠ j)

M =| | |

m0 m1 m2 L

| | |

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

Some math…

• A matrix M is orthogonal if and only if:

m i ⋅mj =0, ∀i, j

MTM=

− m0T −

− m1T −

− m2T −

M

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

| | |m0 m1 m2 L

| | |

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

Diagonal Matrix

=

? 0 00 ? 00 0 ?

O

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

m0Tm0 m0

Tm1 m0Tm2

m1Tm0 m1

Tm1 m1Tm2 L

m2Tm0 m1

Tm2 m2Tm2

M O

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

Some math…

• A vector is normalized if:

v0v0 + v1v1 + v2v2 +L =1

v =

v0

v1

v2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

vTv= v0 v1 v2 L( )

v0

v1

v2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=v⋅v=1

Some math…

• A matrix is orthonormal

if and only if:

m i ⋅mj =0, ∀i, j (i ≠ j)

M =| | |

m0 m1 m2 L

| | |

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

m i ⋅mi =1,

Ortho:

Normalized:

Some math…

• A matrix M is orthonormal if and only if:

MTM=

− m0T −

− m1T −

− m2T −

M

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

| | |m0 m1 m2 L

| | |

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

Identity Matrix

=

1 0 00 1 00 0 1

O

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

m0Tm0 m0

Tm1 m0Tm2

m1Tm0 m1

Tm1 m1Tm2 L

m2Tm0 m2

Tm2 m1Tm2

M O

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

Examples

• A 2D rotational matrix is orthonormal:

x '

y '

⎛⎝⎜

⎞⎠⎟

= m0 m1( )xy

⎛⎝⎜

⎞⎠⎟

= cosθ −sinθsinθ cosθ

⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

m0 ⋅m1 =−cosθ sinθ + sinθ cosθ =0Ortho:

m0 ⋅m0 =cosθ cosθ + sinθ sinθ =1Normalized:m1 ⋅m1 =cosθ cosθ + sinθ sinθ =1

Examples

• Is a 2D scaling matrix orthonormal? (if sx, sy is not 1)

x '

y '

⎛⎝⎜

⎞⎠⎟

= m0 m1( )xy

⎛⎝⎜

⎞⎠⎟

=sx 00 sy

⎛

⎝⎜

⎞

⎠⎟

xy

⎛⎝⎜

⎞⎠⎟

m0 ⋅m1 =sx⋅0 + 0 ⋅sy=0Ortho:

m0 ⋅m0 =sx⋅sxNormalized:m1 ⋅m1 =sy⋅sy

SummaryTransformation Exists? Ortho? Normalized?

Translation No NA NA

Rotation Yes Yes Yes

Scaling Yes Yes No

2D Transformation (2-by-2 matrix)

Transformation Exists? Ortho? Normalized?

Translation Yes No No

Rotation Yes Yes Yes

Scaling Yes Yes No

2D Transformation (3-by-3 matrix)

Transformation: Shearing

• y is unchanged.• x is shifted according to y.

x ' =x+ h⋅yy'=y

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=1 h

11

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟or

Transformation: Shearing

x ' =xy'=g⋅x+ y

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

1g 1

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟or

Facts about shearing

• Any 2D rotation matrix can be defined as the multiplication of three shearing matrices.

• Shearing doesn’t change the object area.

• Shearing can be defined as:rotation->scaling->rotation

In fact,• Without translation, any 2D transformation

matrix can be defined as:Rotation->Scaling->rotation

x '

y '

⎛⎝⎜

⎞⎠⎟

= a bc d

⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

x '

y '

⎛⎝⎜

⎞⎠⎟=

cosφ −sinφsinφ cosφ

⎛

⎝⎜

⎞

⎠⎟

sxsy

⎛

⎝⎜

⎞

⎠⎟

cosθ −sinθsinθ cosθ

⎛

⎝⎜⎞

⎠⎟xy

⎛⎝⎜

⎞⎠⎟

Orthonormal Diagonal Orthonormal

Singular Value Decomposition (SVD)

Another fact

• Same thing when using homogenous coordinates: x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=a bc d

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

cosφ −sinφsinφ cosφ

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

sxsy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

Orthonormal Diagonal Orthonormal

Conclusion

• Translation, rotation, and scaling are three basic transformations.

• The combination of these can represent any transformation in 2D.

• That’s why OpenGL only defines these three.

Rotation Revisit

Rotate about the origin Rotate about any center?

Arbitrary Rotation

=

Step 1:Translate (-ox, -oy)

Step2:Rotate (θ)

Step 1:Translate (ox, oy)

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

1 ox1 oy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

1 −ox1 −oy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

(ox, oy)

Scaling Revisit

(5, 3)

(1, 1)

(10, 6)

(2, 2)

(3, 2)

(6, 4)

(10, 6)

(3, 2)

Arbitrary Scaling

=

Step 1:Translate (-ox, -oy)

Step2:Scale(sx, sy)

Step 1:Translate (ox, oy)

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

1 ox1 oy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

sxsy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

1 −ox1 −oy

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

(ox, oy)

(ox, oy) can be arbitrary too!

Rigid Transformation

• A rigid transformation is:

• Rotation and translation are rigid transformation.

• Any combination of them is also rigid.

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=a b cd e f

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

Orthonormal Matrix

Affine Transformation• An affine transformation is:

• Rotation, scaling, translation are affine transformation.

• Any combination of them (e.g., shearing) is also affine.

• Any affine transformation can be decomposed into:Translation->Rotation->Scaling->Rotation

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

=a b cd e f

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

(First)(Last)

=1 c

1 f

1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

a bd e

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x

y

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

We can also compose matrix

Translation Scaling Rotation Translation

x

y

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

M1 M2 M3 M4

vv’

x '

y '

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

v’ = (M1 (M2( M3 (M4 v))))

v’ = M v

Some Math• Matrix multiplications are associative:

• Matrix multiplications are not commutative:

• Some exceptions are:• Translation X Translation• Scaling X Scaling• Rotation X Rotation• Uniform scaling X Rotation

A ×B×C = A ×B( )×C =A × B×C( )

A ×B =B×A

For example• Rotation and translation are not commutative:

1 11

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

0.6 −0.80.8 0.6

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

0.6 −0.8 10.8 0.6

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

0.6 −0.80.8 0.6

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

1 11

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟=

0.6 −0.8 0.60.8 0.6 0.8

1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

Orders are important!

How OpenGL handles transformation

• All OpenGL transformations are in 3D.

• We can ignore z-axis to do 2D transformation.

For example

• 3D Translation

• 2D Translation

glTranslatef(tx, ty, tz)

glTranslatef(tx, ty, 0)

For example• 3D Rotation

• 2D Rotation

glTranslatef(angle, axis_x, axis_y, axis_z)

Z-axis (0, 0, 1) to toward you

glTranslatef(angle, 0, 0, 1)

OpenGL uses two matrices:

Projection Matrix

ModelView Matrix

Each object’s local coordinate

Each object’s World coordinate

Screen coordinate

For example: gluOrtho2D(…)

How OpenGL handles transformation

• So you need to let OpenGL know which matrix to transform:

• You can reset the matrix as:

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

For Example

Xcode time!