# 2D transformation

Infographic tutorial 2020-11-18 01:30:14# 2D Transformation

Transformation means changing some graphics into something else by applying rules. We can have different types of transformations such as translate, scale up or down, rotate, shear, etc. When a transformation takes place on a 2D plane, it is called a 2D transformation.

Transformations play an important role in computer graphics to reposition graphics on the screen and change their size or orientation.

## Homogeneous coordinates

To perform a sequence of transformation such as translation followed by rotation and scaling, we need to follow a sequential process -

- Translate coordinates,
- Rotate translated coordinates, then
- Update scale coordinate rotation to complete the composite transformation.

To shorten this process, we need to use a 3 × 3 transformation matrix instead of a 2 × 2 transformation matrix. To convert a 2 × 2 matrix to a 3 × 3 matrix, wWe need to add a coordinate extra dummy W.

In this way, we can represent the point by 3 numbers instead of 2 numbers, which is called the ** Homogeneous Coordinates ** system. In this system, we can represent all the transformation equations in matrix multiplication. Any Cartesian point P (X, Y) can be converted into homogeneous coordinates by P '(X _{ h }, Y _{ h }, h).

## Translation

A translation moves an object to a different position on the screen. You can translate a point to 2D by adding the translation coordinate (t _{ x }, t _{ y }) to the original coordinate (X, Y) to get the new one. coordinate (X ', Y ').

From

** X '= X + t _{ x } **

** Y '= Y + t _{ y }**

The pair (t _{ x }, t _{ y }) is called the translation vector or shift vector. The above equations can also be represented using column vectors.

$ P = frac {[X]} {[Y]} $ p '= $ frac {[X ']} {[Y ']} $ T = $ frac {[t_ {x} ]} {[t_ {y}]} $

We can write it as -

** P '= P + T **

## Rotation

In rotation, we rotate object at a particular angle θ (theta) with respect to its origin. From

Using sta trigonometryndard, the original coordinate of point P (X, Y) can be represented by -

$ X = r, cos, phi ... ... (1) $

$ Y = r, sin, phi ...... (2) $

Similarly, we can represent the point P '(X ', Y ') as -

$ {x} ' = r : cos: left (phi: +: theta right) = r: cos: phi: cos: theta: -: r: sin: phi: sin: theta ....... (3) $

$ {y} '= r: sin: left (phi: +: theta right) = r: cos: phi: sin: theta: +: r: sin: phi: cos: theta ....... (4) $

By replacing equation (1) & (2) in (3) and (4) respectively, we will get

$ {x} '= x: cos: theta -: y: sin: theta $

$ {y} '= x: sin: theta +: y: cos: theta $

Representing the above equation in matrix form,

$$ [X 'Y '] = [XY] begin {bmatrix} cos theta & sin theta −sin theta & cos theta end {bmatrix} OR $$

P '= P. R

Where R is the rotation matrix

$$ R = begin {bmatrix} cos theta & sin theta −sin theta & cos theta end {bmatrix} $$

The angle of rotation can be positive and negative.

For a positive rotation angle, we can use the rotation matrix above. However, for negative angular rotation, the matrix will change as shown below -

$$ R = begin {bmatrix} cos (- theta) & sin (- theta) -sin (- theta) & cos (- theta) end {bmatrix} $$

$$ = begin {bmatrix} cos theta & −sin theta sin theta & cos theta end {bmatrix} left (because cos (- theta) = cos theta; et; sin (- theta) = −sin theta right) $$

## Scaling

To change the size of an object, a transformation of scaling is used. In the process of scaling, you dewrap or compress the object's dimensions. Scaling can be achieved by multiplying the original coordinates of thObject with the scale factor to get the desired result.

Suppose the original coordinates are (X, Y), the scale factors are (S _{ X }, S _{ Y }) , and the coordinates produced are (X ', Y '). This can be represented mathematically as shown below -

** X '= X. S _{ X } and Y '= Y. S _{ Y } **

The scale factor S _{ X }, S _{ Y } scales the object by Direction X and Y respectively. The above equations can also be represented as a matrix as below -

$$ binom {X '} {Y '} = binom {X} {Y} begin {bmatrix} S_ {x} & 0 0 & S_ {y} end {bmatrix} $$

OR

** P '= P. S **

Where S is the scaling matrix. The scaling process is shown in the following figure.

If we provide values less than 1 to the scale factor S, we can reduce the size of the object. If we provide values greater than 1 then we can increase the size of the object.

## Reflection

The reflection is the mirror image of the original object. In other words, it can be said that it is a 180 ° rotation operation. In reflection transformation, the size of the object does not change.

The following figures show reflections about the X and Y axes, and about the origin respectively.

## Shear

A transformation that skews the shape of an object is called the shear transformation. There are two ** X-Shear ** and ** Y-Shear **. One shifts the X coordinate values and another shifts the Y coordinate values. However; in both cases, only one coordinate changes its coordinates and the other preserves its values. Shear is also called ** Tilt **.

### X-Shear

X-shear preserves coordinateY and changes are made to the X coordinates, causing the vertical lines to tilt right or left as shown in the figure below.

The transformation matrix for X- Shear can be represented by -

$$ X_ {sh} = begin {bmatrix} 1 & shx & 0 0 & 1 & 0 0 & 0 & 1 end {bmatrix} $$

Y '= Y + Sh _{ y }. X

X '= X

### Y-Shear

The Y-Shear preserves the X coordinates and modifies the Y coordinates, so that the horizontal lines turn into lines slanting up or down bottom as shown in the following figure.

Y-shear can be represented in a matrix from -

$$ Y_ {sh} begin {bmatrix} 1 & 0 & 0 shy & 1 & 0 0 & 0 & 1 end {bmatrix} $$

X '= X + Sh _{ x }. Y

Y '= Y

## Composite transformation

If a transformation of plane T1 is followed by a second plane transformation T2, then the result itself can be represented by a single transformation T which is the composition of T1 and T2 taken in this order. This is written T = T1 ∙ T2.

Composite transformation can be achieved by concatenation of transformation matrices to obtain a combined transformation matrix.

A combined matrix -

** [T] [X] = [X] [T1] [T2] [T3 ] [T4]…. [Tn] **

Where [Ti] is a combination of

- Translation
- Update 'scale
- Shear
- Rotation
- Reflection

Changing the order of transformation would lead to different results, because in general the matrix multiplication is not cumulative, that is, [A]. [B] ≠ [B]. [A] and the order of multiplication. The fundamental purpose of compositing transformations is to gain efficiency by applying a single compound transform to a point, rather than by applying a series of transformations, one after another.

For example, to rotate an object around an arbitrary point (X _{ p }, Y _{ p }), we need to perform three steps -

- Translate the original point (X
_{ p }, Y_{ p }). - Rotate it around the origin.
- Finally, translate the center of rotation in its place.