2D and 3D Transformations

Chapter 8: 2D and 3D Transformations

Transformations are operations that modify an object's position, size, and orientation in space. By using matrices and homogeneous coordinates (as introduced in Chapter 4), we can represent these transformations in a unified mathematical way.

2D Transformations

In 2D, we represent points as (x,y,1)(x, y, 1) and use 3x3 matrices to transform them.

Translation

Shifting an object from one position to another.

T(dx,dy)=[10dx01dy001]T(dx, dy) = \begin{bmatrix} 1 & 0 & dx \\ 0 & 1 & dy \\ 0 & 0 & 1 \end{bmatrix}

Translation: (x+60, y+40)

Scaling

Changing the size of an object relative to the origin.

S(sx,sy)=[sx000sy0001]S(sx, sy) = \begin{bmatrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{bmatrix}

Rotation

Rotating an object around the origin by an angle θ\theta.

R(θ)=[cos⁡θ−sin⁡θ0sin⁡θcos⁡θ0001]R(\theta) = \begin{bmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{bmatrix}

Rotation around (50, 100)

Reflection

Flipping an object across an axis (e.g., the xx or yy axis).

Reflectionx=[1000−10001]Reflection_x = \begin{bmatrix} 1 & 0 & 0 \\ 0 & -1 & 0 \\ 0 & 0 & 1 \end{bmatrix}

Shearing

Distorting the shape of an object along one or both axes.

Shearx(shx)=[1shx0010001]Shear_x(sh_x) = \begin{bmatrix} 1 & sh_x & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}

3D Transformations

In 3D, we use 4x4 matrices and points represented as (x,y,z,1)(x, y, z, 1).

Translation in 3D

Adding a depth component (dzdz).

T(dx,dy,dz)=[100dx010dy001dz0001]T(dx, dy, dz) = \begin{bmatrix} 1 & 0 & 0 & dx \\ 0 & 1 & 0 & dy \\ 0 & 0 & 1 & dz \\ 0 & 0 & 0 & 1 \end{bmatrix}

Scaling in 3D

Adding a scaling factor (szsz) for the zz axis.

S(sx,sy,sz)=[sx0000sy0000sz00001]S(sx, sy, sz) = \begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}

Rotation in 3D

Rotation in 3D is more complex as it occurs around an axis.

  • About X-axis: xx coordinates remain the same.
  • About Y-axis: yy coordinates remain the same.
  • About Z-axis: zz coordinates remain the same.

Composition of Transformations

The real power of matrix-based transformations is that we can combine multiple operations into a single matrix through multiplication.

M=Mn⋅Mn−1⋅⋯⋅M1M = M_n \cdot M_{n-1} \cdot \dots \cdot M_1

  • Order Matters: Multiplication is non-commutative. Rotate⋅TranslateRotate \cdot Translate is different from Translate⋅RotateTranslate \cdot Rotate.
  • Pivot Points: To rotate or scale an object around an arbitrary point (xp,yp)(x_p, y_p), we must:
    1. Translate the pivot to the origin.
    2. Perform the rotation or scaling.
    3. Translate the pivot back to its original position.

M=T(xp,yp)⋅R(θ)⋅T(−xp,−yp)M = T(x_p, y_p) \cdot R(\theta) \cdot T(-x_p, -y_p)

Summary

Matrices provide a compact and powerful way to manipulate objects in space. Whether we are moving a 2D character or rotating a complex 3D model, the underlying mathematics remain remarkably consistent. Mastering the composition of transformations is essential for creating complex animations and hierarchical models.

PreviousNext Chapter