Module 3

2D Transformations
 The ability to change the geometry of each object by changing its size,
position, or orientation. These operations are called geometric
transformations.
 The changes in orientation, size, and shape are accomplished with
geometric transformations that alter the coordinate descriptions of
objects.
 Transformation refers to the mathematical operations or rules that are
applied on a graphical image consisting of the number of lines, circles,
and ellipses to change its size, shape, or orientation.
 When a transformation takes place on a 2D plane, then it is known as 2D
transformation.
 Transformations play an important role in computer graphics to
reposition the graphics on the screen and change their size or
orientation.
Types of Transformations
1. Translation
2. Scaling
3. Rotating
4. Reflection
5. Shearing
Translation, Scaling, and Rotation are also known as basic transformations.
Reflection and Shearing are often applied to objects.
Translation

 In Computer graphics, 2D Translation is a process of moving an object

from one position to another without changing the shape of the object
in a two-dimensional plane.
 It is the straight-line movement of an object from one position to
another. We translate a two-dimensional point by adding translation
distances tx and ty to the original coordinate position (x, y) to move the
point to a new position (x', y').
 x' = x + tx
y' = y + ty
 The translation distance pair (tx, ty) is called a translation vector or shift
vector.
We can apply Translation on the following objects:

 Line
 Rectangle
 Polygon
 Square
 Circle
The Translation equation can be represented as Matrix Form:

Consider a point object O has to be moved from one position to another in a

2D plane.

 Let the Initial coordinates of the object O = (x, y)

 Let the new coordinates of the object O after translation = (x’, y’)
 Translation vector or Shift vector = (tx, ty)

tx defines the distance the x coordinate has to be moved and t y defines the
distance the y coordinate has to be moved.
This translation is achieved by adding the translation coordinates to the old
coordinates of the object:

 x’ = x + tx (This denotes translation towards X axis)

 y’ = y + ty (This denotes translation towards Y axis)
Example 1:

Given a circle C with radius 10 and center coordinates (1, 4). Apply the
translation with distance 5 towards X axis and 1 towards Y axis. Obtain the new
coordinates of C without changing its radius.

Solution:
Given:

 Old center coordinates of C = (x, y) = (1, 4)

 Translation vector = (tx, ty) = (5, 1)
Let the new center coordinates of C = (x’, y’).
Now apply the translation equations:
x’ = x + tx = 1 + 5 = 6
y’ = y + ty = 4 + 1 = 5
Thus, New center coordinates of C = (6, 5).

Example 2:
Given a square with coordinate points A(0, 3), B(3, 3), C(3, 0), D(0, 0). Apply the
translation with distance 1 towards X axis and 1 towards Y axis. Obtain the new
coordinates of the square.
Solution:
Given:

 Old center coordinates of the square:

A = (0, 3), B = (3, 3), C = (3, 0), and D = (0, 0)
 Translation vector = (tx, ty) = (1, 1)

For Coordinates A = (0, 3)

Let the new coordinates of corner A = (x’, y’). Applying the translation
equations, we get:
x’ = x + tx = 0 + 1 = 1
y’ = y + ty = 3 + 1 = 4
Thus, New coordinates of corner A = (1, 4).
For Coordinates B = (3, 3)
Let the new coordinates of corner B = (x’, y’). Applying the translation
equations, we get:
x’ = x + tx = 3 + 1 = 4
y’ = y + ty = 3 + 1 = 4
Thus, New coordinates of corner A = (4, 4).

For Coordinates C = (3, 0)

Let the new coordinates of corner C = (x’, y’). Applying the translation
equations, we get:
x’ = x + tx = 3 + 1 = 4
y’ = y + ty = 0 + 1 = 1
Thus, New coordinates of corner C = (4, 1).
For Coordinates D = (0, 0)
Let the new coordinates of corner D = (x’, y’). Applying the translation
equations, we get:
x’ = x + tx = 0 + 1 = 1
y’ = y + ty = 0 + 1 = 1

Thus, New coordinates of corner D = (1, 1).

Thus, New coordinates of the square:
A = (1, 4), B = (4, 4), C = (4, 1), D = (1, 1)

Translation is a rigid-body transformation that moves objects without

deformation.

 When the straight line is translated, then it will be drawn using

endpoints.
 For translating a polygon, each vertex of the polygon is converted to a
new position. Similarly, curved objects are translated.
 To change the position of the circle or ellipse its center coordinates are
transformed, then the object is drawn using new coordinates.
Scaling
 Scaling is a process of changing the size of objects. It is a type of
transformation through which we can zoom in or zoom out any
particular object or shape. It is the process of expanding or compressing
the dimension of an object.
  There are two factors used in scaling transformation i.e. sx and sy, where
sx is a scale factor for the X coordinate, and sy is the scale factor for the Y
coordinate.
 If sx and sy are equal it is also called Uniform Scaling, if not equal then it
is called Differential Scaling. Scaling is performed based on the origin.
 Scaling operation can be achieved by multiplying each vertex coordinate
(x, y) of the polygon by scaling factor sx and sy to produce the
transformed coordinates as (x’, y’).
x’ = x * sx
y’ = y * sy

 The scaling factor sx, sy scales the object in X and Y direction respectively.
 (sx, sy) > 1: Enlarge the object size
 (sx, sy) = 1: Object with same size
 (sx, sy) < 1: Reduce the object size
 If scaling factors with values less than one will move the object closer to
the origin. If scaling factors with values less than one will move the
coordinate position farther from the origin.
We can apply Scaling on the following objects:

 Straight Lines
 Curved Lines
 Polygon
 Circle
The Scaling equation can be represented as Matrix Form:

P’ = P.S
 i.e. P’ = S.P

Example:
A Square object with the coordinate points P (1, 4), Q (4, 4), R (4, 1), T (1,1).
Apply the scaling factor 3 on the X-axis and 4 on the Y-axis. Find out the new
coordinates of the square.
Solution:
Coordinates Points for Square:
P = (1, 4), Q = (4, 4), R = (4, 1), and S = (1, 1)

Scaling factor along with X axis, sx = 3

Scaling factor along with Y axis, sy = 4
Applying the equation to find the new coordinates
For Coordinate P = (1, 4)

x’ = x * sx = 1 x 3 = 3
y’ = y * sy = 4 x 4 = 16
The new Coordinates, P = (3, 16)
For Coordinate Q = (4, 4)
x’ = x * sx = 4 x 3 = 12

y’ = y * sy = 4 x 4 = 16
The new Coordinates, Q = (12, 16)
For Coordinate R = (4, 1)
x’ = x * sx = 4 x 3 = 12

y’ = y * sy = 1 x 4 = 4
The new Coordinates, R = (12, 4)
For Coordinate S = (1, 1)
x’ = x * sx = 1 x 3 = 3

y’ = y * sy = 1 x 4 = 4
The new Coordinates, S = (3, 4)

Scaling Relative to any Arbitrary/Fixed Point

 We can control the location of a scaled object by choosing a position,
called the fixed point (xf, yf), that is to remain unchanged after the
scaling transformation.
Scaling using a fixed point (xf, yf):
x’ = xf + (x – xf) * sx
y’ = yf + (y – yf) * sy
This diagram visually represents the process of scaling relative to a fixed point
(xf, yf) in four steps.
Step 1: Original Position of Object and Fixed Point:
The triangle is in its original position, and the fixed point (xf, yf) is marked. This
fixed point is the point that won't move after scaling.
Step 2: Translate the Object so the Fixed Point is at the Origin:

To make scaling simpler, the object is shifted (translated) so that the fixed point
(xf, yf) aligns with the origin (0, 0).
Step 3: Scaling Around the Origin:
Once the fixed point is at the origin, the object is scaled using the scaling
factors sx and sy relative to the origin. This changes the size of the object but
keeps the fixed point (at the origin) stationary.
Step 4: Translate Back to the Original Position:
Finally, the object is shifted back (translated) so that the fixed-point returns to
its original position (xf, yf).
Pivot Point
A pivot point is a specific location on or near an object that serves as the
reference point for transformations such as Scaling, Rotation, and Translation.
It acts as the anchor or center of control, determining how and where these
transformations are applied.
Example:

 In Rotation, the object rotates around the pivot point.

  In Scaling, the object expands or contracts relative to the pivot point.
 In Translation, the pivot point defines the starting reference for
movement.
Rotation
 A two-dimensional rotation is applied to an object by repositioning it
along a circular path in the two-dimensional x-y plane.
 To generate a rotation, we specify a rotation angle Theta (θ) and the
pivot point (x, y) around which the object rotates. There are two types of
rotations:
 Anti-clockwise rotation
 Clockwise rotation
 A positive rotation angle results in an anti-clockwise rotation, while a
negative angle results in a clockwise rotation. Every point of the object
rotates by the same angle. For example, when a straight line rotates, its
endpoints move by the same angle, and the line is redrawn between the
new endpoints. Similarly, polygons rotate by shifting all vertices by the
same angle. A circle rotates by moving its center position according to
the same angle.
We can apply Rotation on the following objects:

 Straight Lines
 Curved Lines
 Polygon
 Circle
The Rotation of any object depends upon the two points.

 Rotation Point: It is also called the Pivot point.

 Rotation Angle: It is denoted by Theta (θ)
Anti-clockwise Rotation based on origin
The positive value of the rotation angle rotates an object in an anti-clockwise
direction. To generate a new rotation point based on the current point is:
x’ = x*cosθ - y*sinθ
y’ = x*sinθ + y*cosθ
Matrix representation is:
P’ = P*R(θ)
It is written as P’ = R(θ)*P

Example:

Clockwise Rotation based on origin

The negative value of the rotation angle rotates an object in the clockwise
direction. To generate a new rotation point based on the current point is
x’= x*cosθ + y*sinθ
y’= -x*sinθ + y*cosθ
Matrix representation is:
P’ = P*R(-θ)

It is written as P’ = R(-θ) *P
Example:
Rotation about an arbitrary/general pivot point

Steps:
Step 1: Translate the object so that the pivot point is moved to the coordinate
origin.
Step 2: Rotate the object about the origin
Step 3: Translate the object so that the pivot point is returned to its original
position.

Rotation
It is a transformation which produces a mirror image of an object. In the
Reflection process, the size of the object does not change. The object is rotated
by180°.
Types of Reflection
1. Reflection along x-axis
In this kind of Reflection, the value of x is positive, and the value of y is
negative. The object will lie another side of the x-axis.
x’= x or x = x * 1
 y’= -y or y = y * -1
Matrix representation:
P’= P * Rx
It is written as P’= Rx * P

Example:

2. Reflection along y-axis

In this kind of Reflection, the value of x is negative, and the value of y
is positive. The object will lie another side of the y-axis.
x’= -x or x = x * -1
y’= y or y = y * 1
Matrix representation:
P’= P * Ry
It is written as P’= Ry * P
 Example:

3. Reflection along an axis perpendicular to X-Y plane and passing

through the origin
In this kind of Reflection, the value of both x and y is negative.
x’= -x or x = x * -1
y’= -y or y = y * -1
Matrix representation:
P’ = P * Rxy
It is written as P’ = Rxy * P
 Example:

4. Reflection along line Y=X

In this kind of Reflection, the value of x is equal to the value of y.
Reflection is based on 8-way symmetry feature of circle.

Matrix Representation:
P’ = P * Ryx
It is written as P’ = Ryx * P
 Example:

Shearing
Shearing is the transformation of an object which changes the shape of the
object. The shearing can be in one direction or two directions. Shearing is also
termed as Skewing. Shearing can be done in three ways:
1. Shearing in the x-direction (x-shear)
The x-shear preserves the y coordinate and changes are made to x
coordinates only. It is also called Horizontal Shearing.
Shearing in x-axis can be done using this equation:
x’ = x + Shx * y
y’ = y
Matrix representation is
P’= Shx * P
Example:

2. Shearing in the y-direction (y-shear)

The y-shear preserves the x coordinates and changes the y coordinates
only. It is also called Vertical Shearing.
 Shearing in Y axis can be done using this equation:
x’ = x
y’ = y+ Shy * x
Matrix representation is
P’ = Shy * P
Example:

3. Shearing in the x-y direction (x-y shear)

In x-y shear changes both the x and y coordinates.
x’ = x + Shx * y
y’ = y + Shy * x
Example:
Example of Shearing:
Given a Triangle with points A(1, 1), B(0, 0), and C(1, 0). Find out the new
coordinates of the object along x-direction, y-direction, and x-y direction. Apply
shear parameter 4 on x-axis and 1 on y-axis.
Solution:
Homogeneous Coordinates
Homogeneous Coordinates represent the coordinates in 2D with 3 vectors. The
2D means x and y are converted to 3 vectors x, y, 1.
In this system, we can represent all the transformation equations in matrix
multiplication. Any Cartesian point P (x, y) can be converted to homogenous
coordinates by P’ (x, y, 1).

Homogeneous Coordinates of the three basic 2D transformations such as

Translation, Scaling, and Rotation as follows: