2 D Transformation 2 D Transformation Transformation changes

2 D Transformation

2 D Transformation • Transformation changes an object’s: – Position – Size – Orientation – Shape (Translation) (Scaling) (Rotation) (Deformation) • Transformation is done by a sequence of matrix operations applied on vertices.

Vector Representation • If we define a 2 D vector as: • A transformation in general can be defined as:

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

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:

Transformation: Rotation Before Rotation After Rotation

Transformation: Rotation • To translate the whole shape:

Transformation: Scaling • Change the object size by a factor of s: (4, 2) (2, 1) s=2 (-2, -1) (-4, -2)

Transformation: Scaling • But when the object is not center at origin (10, 6) (5, 3) (6, 4) s=2 (3, 2) (1, 1) (2, 2)

Transformation: Scaling • Isotropic (uniform) scaling or • Anistropic (non-uniform) scaling or

Summary • Translation: • Rotation • Scaling

Summary • 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:

A Quiz

Some math… • A matrix and only if: is orthogonal if

Some math… • A matrix M is orthogonal if and only if: Diagonal Matrix

Some math… • A vector is normalized if:

Some math… • A matrix if and only if: Ortho: Normalized: is orthonormal

Some math… • A matrix M is orthonormal if and only if: Identity Matrix

Examples • A 2 D rotational matrix is orthonormal: Ortho: Normalized:

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

Summary Transformation Exists? Ortho? Normalized? Translation No NA NA Rotation Yes Yes Scaling Yes No 2 D Transformation (2 -by-2 matrix) Transformation Exists? Ortho? Normalized? Translation Yes No No Rotation Yes Yes Scaling Yes No 2 D Transformation (3 -by-3 matrix)

Transformation: Shearing • y is unchanged. • x is shifted according to y. or

Transformation: Shearing or

Facts about shearing • Any 2 D 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 2 D transformation matrix can be defined as: Rotation->Scaling->rotation Orthonormal Diagonal Orthonormal Singular Value Decomposition (SVD)

Another fact • Same thing when using homogenous coordinates: Orthonormal Diagonal Orthonormal

Conclusion • Translation, rotation, and scaling are three basic transformations. • The combination of these can represent any transformation in 2 D. • That’s why Open. GL only defines these three.

Rotation Revisit Rotate about the origin Rotate about any center?

(ox, oy) Arbitrary Rotation = Step 1: Translate (-ox, -oy) Step 2: Rotate (θ) Step 1: Translate (ox, oy)

Scaling Revisit (10, 6) (6, 4) (5, 3) (2, 2) (10, 6) (3, 2) (1, 1) (3, 2)

Arbitrary Scaling (ox, oy) = Step 1: Translate (-ox, -oy) Step 2: Scale(sx, sy) (ox, oy) can be arbitrary too! Step 1: Translate (ox, oy)

Rigid Transformation • A rigid transformation is: Orthonormal Matrix • Rotation and translation are rigid transformation. • Any combination of them is also rigid.

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 (Last) (First)

We can also compose matrix Translation M 1 Scaling M 2 Rotation M 3 Translation M 4 v’ v’ = (M 1 (M 2( M 3 (M 4 v)))) v’ = M v 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

For example • Rotation and translation are not commutative: Orders are important!

How Open. GL handles transformation • All Open. GL transformations are in 3 D. • We can ignore z-axis to do 2 D transformation.

For example • 3 D Translation gl. Translatef(tx, ty, tz) • 2 D Translation gl. Translatef(tx, ty, 0)

For example • 3 D Rotation gl. Translatef(angle, axis_x, axis_y, axis_z) • 2 D Rotation gl. Translatef(angle, 0, 0, 1) Z-axis (0, 0, 1) to toward you

Open. GL uses two matrices: Each object’s local coordinate Model. View Matrix Each object’s World coordinate For example: Projection Matrix Screen coordinate glu. Ortho 2 D(…)

How Open. GL handles transformation • So you need to let Open. GL know which matrix to transform: gl. Matrix. Mode(GL_MODELVIEW); • You can reset the matrix as: gl. Load. Identity();

For Example Xcode time!