1 / 46

2D Transformation

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. Vector Representation.

aldona
Download Presentation

2D Transformation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2D Transformation

  2. 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.

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

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

  5. Transformation: Translation • To translatethe whole shape:

  6. Transformation: Rotation • Default rotation center: origin

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

  8. Transformation: Rotation Before Rotation After Rotation

  9. Transformation: Rotation • To translatethe whole shape:

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

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

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

  13. Summary • Translation: • Rotation • Scaling

  14. Summary • Translation: • Rotation • Scaling We use the homogenous coordinate to make sure transformations have the same form.

  15. Why use 3-by-3 matrices? • Transformations now become the consistent. • Represented by as matrix-vector multiplication. • We can stack transformations using matrix multiplications.

  16. Some math… • Two vectors are orthogonal if:

  17. A Quiz

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

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

  20. Some math… • A vector is normalized if:

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

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

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

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

  25. Summary 2D Transformation (2-by-2 matrix) 2D Transformation (3-by-3 matrix)

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

  27. Transformation: Shearing or

  28. 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

  29. In fact, • Without translation,any 2D transformationmatrix can be defined as: • Rotation->Scaling->rotation Orthonormal Orthonormal Diagonal Singular Value Decomposition (SVD)

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

  31. 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.

  32. Rotation Revisit Rotate about the origin Rotate about any center?

  33. Arbitrary Rotation (ox, oy) = Step 1: Translate (ox, oy) Step 1: Translate (-ox, -oy) Step2: Rotate (θ)

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

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

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

  37. 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)

  38. We can also compose matrix Translation Scaling Rotation Translation M1 M2 M3 M4 v v’ v’ = (M1 (M2(M3 (M4 v)))) v’ = M v

  39. 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

  40. For example • Rotation and translationare not commutative: Orders are important!

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

  42. For example • 3D Translation • 2D Translation glTranslatef(tx, ty, tz) glTranslatef(tx, ty, 0)

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

  44. OpenGL uses two matrices: Each object’s local coordinate ModelView Matrix Each object’s World coordinate For example: Projection Matrix gluOrtho2D(…) Screen coordinate

  45. 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();

  46. For Example Xcode time!

More Related