2D Transformation

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:

xy

⎛⎝⎜

⎞⎠⎟

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 '

⎛⎝⎜

⎞⎠⎟ = s

s⎛⎝⎜

⎞⎠⎟

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

⎛

⎝⎜⎜

⎞

⎠⎟⎟ =

ss

1

⎛

⎝⎜⎜

⎞

⎠⎟⎟

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 ox1 oy

1

⎛

⎝⎜⎜⎜

⎞

⎠⎟⎟⎟

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

u1u2

M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟, v=

v0v1v2M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

uTv= u0 u1 u2 L( )

v0v1v2M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟=u⋅v

A Quiz

u =123

⎛

⎝⎜⎜

⎞

⎠⎟⎟, v=

−101

⎛

⎝⎜⎜

⎞

⎠⎟⎟ u =

121

⎛

⎝⎜⎜

⎞

⎠⎟⎟, v=

−101

⎛

⎝⎜⎜

⎞

⎠⎟⎟

Some math…

• A matrix is orthogonal if

and only if:

mi ⋅m φ=0, ∀i, φ(i ≠φ)

M =

| | |m 0 m 1 m 2 L

| | |

⎛

⎝⎜⎜⎜

⎞

⎠⎟⎟⎟

Some math…

• A matrix M is orthogonal if and only if:

m i ⋅m φ=0, ∀i, φ

MTM=

− m 0T −

− m 1T −

− m 2T −

M

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

| | |m 0 m 1 m 2 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 =

v0v1v2M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

vTv= v0 v1 v2 L( )

v0v1v2M

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟=v⋅v=1

Some math…

• A matrix is orthonormal

if and only if:

mi ⋅m φ=0, ∀i, φ(i ≠φ)

M =

| | |m 0 m 1 m 2 L

| | |

⎛

⎝⎜⎜⎜

⎞

⎠⎟⎟⎟

mi ⋅m i =1,

Ortho:

Normalized:

Some math…

• A matrix M is orthonormal if and only if:

MTM=

− m 0T −

− m 1T −

− m 2T −

M

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

| | |m 0 m 1 m 2 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 '

⎛⎝⎜

⎞⎠⎟ = m 0 m 1( )

xy

⎛⎝⎜

⎞⎠⎟ = cosθ −sinθ

sinθ cosθ⎛⎝⎜

⎞⎠⎟

xy

⎛⎝⎜

⎞⎠⎟

m0 ⋅m 1 =−cosθsinθ +sinθ cosθ =0Ortho:

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

Examples

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

x 'y '

⎛⎝⎜

⎞⎠⎟ = m 0 m 1( )

xy

⎛⎝⎜

⎞⎠⎟ =

sx 00 sy

⎛⎝⎜

⎞⎠⎟

xy

⎛⎝⎜

⎞⎠⎟

m0 ⋅m 1 =sx⋅0 + 0 ⋅sy=0Ortho:

m0 ⋅m 0 =sx⋅sxNormalized:m1 ⋅m 1 =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 h1

1

⎛

⎝⎜⎜

⎞

⎠⎟⎟

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 b

c d⎛⎝⎜

⎞⎠⎟

xy

⎛⎝⎜

⎞⎠⎟

x 'y '

⎛⎝⎜

⎞⎠⎟ =

cosφ −sinφsinφ cosφ

⎛⎝⎜

⎞⎠⎟ sx

sy⎛⎝⎜

⎞⎠⎟

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 f1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

a bd e

1

⎛

⎝⎜⎜

⎞

⎠⎟⎟

xy1

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

We can also compose matrix

Translation Scaling Rotation Translation

xy1

⎛

⎝⎜⎜

⎞

⎠⎟⎟

M1 M2 M3 M4vv’

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!