2D Transformations

2D Transformation

Transformation involves altering graphics by applying specific rules to change their position, size, or orientation. It encompasses various types such as translation, scaling, rotation, shearing, and reflection. When these transformations occur on a 2D plane, it's termed 2D transformation. These transformations are crucial in computer graphics for repositioning graphics on the screen, modifying their dimensions, or changing their orientation. They are fundamental in creating animations, user interfaces, and complex visual effects.

Types of Transformations in Computer Graphics

• Translation: Moves an object without changing its size or orientation.

• Rotation: Turns an object around a specified point.

• Scaling: Changes the size of an object, either uniformly or non-uniformly.

• Reflection: Mirrors an object across an axis.

• Shear: Distorts the shape of an object by shifting one part of it in a certain direction.

2D Translation

2D Translation involves shifting a point from one position to another on a 2D plane. It is a rigid body transformation, meaning it does not alter the shape or size of the object.

If we have a point A with coordinates $(x, y)$, and we want to translate it to a new point A' with coordinates $(x', y')$, we add translation factors $\text{T}_x$ and $\text{T}_y$ to the original coordinates. These factors represent the distance by which the point is moved along the x and y axes, respectively.

• $x' = x + \text{T}_x$

• $y' = y + \text{T}_y$

In matrix form:

$A' = A + T$

Where:

• $A = \begin{bmatrix} x \ y \end{bmatrix}$

• $T = \begin{bmatrix} \text{T}_x \ \text{T}_y \end{bmatrix}$

• $A' = \begin{bmatrix} x' \ y' \end{bmatrix}$

Example:

If point A has coordinates (3, 4), and the translation factors are $\text{T}_x = 4$ and $\text{T}_y = 5$, the new coordinates A' can be calculated as:

$A' = \begin{bmatrix} 3 \ 4 \end{bmatrix} + \begin{bmatrix} 4 \ 5 \end{bmatrix} = \begin{bmatrix} 7 \ 9 \end{bmatrix}$

So, the new coordinates of point A' are (7, 9).

2D Scaling

2D Scaling refers to changing the size of an object or image. It can either enlarge (scale up) or reduce (scale down) the object.

• $S_x$ = scaling factor in the x-direction

• $S_y$ = scaling factor in the y-direction

If S_x > 1, the object is stretched along the x-axis. If 0 < S_x < 1, the object is compressed along the x-axis. Similarly, $S_y$ controls scaling along the y-axis.

If we have a point A with coordinates $(x, y)$, and we want to scale it to a new point A' with coordinates $(x', y')$, we multiply the original coordinates by scaling factors $\text{S}_x$ and $\text{S}_y$.

• $x' = x \cdot \text{S}_x$

• $y' = y \cdot \text{S}_y$

In matrix form:

$A' = A \cdot S$

Where:

• $A = \begin{bmatrix} x \ y \end{bmatrix}$

• $S = \begin{bmatrix} \text{S}_x &amp; 0 \ 0 &amp; \text{S}_y \end{bmatrix}$

• $A' = \begin{bmatrix} x' \ y' \end{bmatrix}$

$\begin{bmatrix} x' &amp; y' \end{bmatrix} = \begin{bmatrix} x &amp; y \end{bmatrix} \cdot \begin{bmatrix} \text{S}_x &amp; 0 \ 0 &amp; \text{S}_y \end{bmatrix} = \begin{bmatrix} x \cdot \text{S}_x &amp; y \cdot \text{S}_y \end{bmatrix}$

2D Rotation

2D Rotation involves rotating a point or object around an axis by a specific angle. The axis of rotation is typically the origin (0, 0) but can be any specified point.

Let's consider a point A with coordinates $(x, y)$, which we want to rotate by an angle $\theta$ to a new point A' with coordinates $(x', y')$.

• $x = r \cdot \cos(\phi)$

• $y = r \cdot \sin(\phi)$

After rotation by angle θ:

• $x' = r \cdot \cos(\theta + \phi)$

• $y' = r \cdot \sin(\theta + \phi)$

Using trigonometric identities:

• $\cos(\theta + \phi) = \cos(\theta) \cdot \cos(\phi) - \sin(\theta) \cdot \sin(\phi)$

• $\sin(\theta + \phi) = \sin(\theta) \cdot \cos(\phi) + \cos(\theta) \cdot \sin(\phi)$

Therefore:

• $x' = r \cdot (\cos(\theta) \cdot \cos(\phi) - \sin(\theta) \cdot \sin(\phi))$

• Since $x = r \cdot \cos(\phi)$ and $y = r \cdot \sin(\phi)$, we can substitute these into the equation for x':

• $x' = x \cdot \cos(\theta) - y \cdot \sin(\theta)$

• $y' = r \cdot (\sin(\theta) \cdot \cos(\phi) + \cos(\theta) \cdot \sin(\phi))$

• Since $x = r \cdot \cos(\phi)$ and $y = r \cdot \sin(\phi)$, we can substitute these into the equation for y':

• $y' = y \cdot \cos(\theta) + x \cdot \sin(\theta)$

In matrix form:

$A' = A \cdot R$

Where:

• $A = \begin{bmatrix} x \ y \end{bmatrix}$

• $R = \begin{bmatrix} \cos(\theta) &amp; \sin(\theta) \ -\sin(\theta) &amp; \cos(\theta) \end{bmatrix}$

• $A' = \begin{bmatrix} x' \ y' \end{bmatrix}$

For anti-clockwise rotation:

$\begin{bmatrix} x' \ y' \end{bmatrix} = \begin{bmatrix} x \ y \end{bmatrix} \cdot \begin{bmatrix} \cos(\theta) &amp; -\sin(\theta) \ \sin(\theta) &amp; \cos(\theta) \end{bmatrix}$

Homogenous Coordinates

To perform a sequence of transformations such as translation followed by rotation and scaling, we typically follow a sequential process:

1. Translate the coordinates.

2. Rotate the translated coordinates.

3. Scale the rotated coordinates to complete the composite transformation.

To shorten this process, we use a 3×3 transformation matrix instead of a 2×2 transformation matrix. To convert a 2×2 matrix to a 3×3 matrix, we add an extra dummy coordinate W. In this way, we can represent the point by