Two-Dimensional

Transformations:
• Transformation
• 2-D Transformation
• Translation and Homogeneous Coordinates
• Rotation, Reflection, Scaling, Combined Transformation
Introduction of Transformations
Computer Graphics provide the facility of viewing object from
different angles. The architect can study building from different
angles i.e.
• Front Evaluation
• Side elevation
• Top plan
A Cartographer can change the size of charts and topographical
maps. So if graphics images are coded as numbers, the numbers
can be stored in memory. These numbers are modified by
mathematical operations called as Transformation.
The purpose of using computers for drawing is to provide facility
to user to view the object from different angles, enlarging or
reducing the scale or shape of object called as Transformation.
Two essential aspects of transformation are given
below:
1. Each transformation is a single entity. It can be denoted by a unique name or
symbol.
2. It is possible to combine two transformations, after connecting a single
transformation is obtained, e.g., A is a transformation for translation. The B
transformation performs scaling. The combination of two is C=AB. So C is
obtained by concatenation property.

Transformations and Matrices

In computer graphics we often require to transform the coordinates of an
object(position, orientation and size).
There are two complementary points of view for describing object transformation.
3. Geometric Transformation: The object itself is transformed relative to the
coordinate system or background. The mathematical statement of this viewpoint
is defined by geometric transformations applied to each point of the object.
4. Coordinate Transformation: The object is held stationary while the coordinate
system is transformed relative to the object. This effect is attained through the
application of coordinate transformations.
An example that helps to distinguish these
two viewpoints
The movement of an automobile against a scenic background we
can simulate this by
• Moving the automobile while keeping the background fixed-
(Geometric Transformation)
• We can keep the car fixed while moving the background
scenery- (Coordinate Transformation)
Types of Transformations:
Translation
Scaling
Rotating
Reflection
Shearing
What is 2D Transformation?
• What is 2D Transformation?
Some graphics are changed into something else by applying some of the
rules, known as Transformation. Various types of transformation are there
such as translation, scaling up or down, rotation, shearing, etc. This
transformation when takes place in 2D plane, is known as 2D transformation.
In order to reposition the graphics on the screen and change the size or
orientation, Transformations play a crucial role in computer graphics.
• What are Homogenous Coordinates?
The sequence of transformation like as translation followed by rotation and
scaling, the process followed is as follows:
• The coordinates are translated
• The translated coordinates are rotated
• The rotated coordinates are scaled for completing the composite
transformation.
Translation
A translation moves an object to a different position on the screen. You can
translate a point in 2D by adding translation coordinate (tx, ty) to the original
coordinate X,Y to get the new coordinate X′,Y′.

From the given figure, you can write that −

X’ = X + tx
Y’ = Y + ty
The pair (tx, ty) is called the translation vector or shift vector. The above
equations can also be represented using the column vectors.

P=[X][Y] p' = [X′][Y′] T = [tx][ty]

We can write it as −

P’ = P + T
What is Rotation?
• The object can be rotated at a particular angle θ (theta) from its
origin using the Rotation option. It is observed that the point
P(X, Y) is located at angle φ from the horizontal X coordinate
with distance r from the origin.
• It is assumed that a point is rotated at angle θ. After rotating to
the new location, a new point P’ (X’, Y’) appears
What is Scaling?
The size of the object can be changed by using scaling
transformation. The scaling process either expands or compresses
the dimensions of the object. By multiplying the original
coordinates of the object with the scaling factor, scaling can be
achieved.
It is assumed that the original coordinates are (X, Y), the scaling
factors are (SX, SY), and the produced coordinates are (X’, Y’).
This can be mathematically represented as shown below −
X' = X . SX and Y' = Y . SY
• The scaling factor SX, SY scales the object in X and Y
direction respectively. The above equations can also be
represented in matrix form as below −
P’ = P . S
What is Reflection?
• The mirror image of the original object is known as Reflection.
Here the rotation operation is with 180°. The size of the object
does not change in reflection.
• The following figures show reflections with respect to X and Y
axes, and about the origin respectively.
What is Shear?
The shape of the object is slanted by Shear transformation. There
are two types of shear transformations X-Shear and Y-Shear. By
these two methods, X coordinates values and Y coordinate values
are shifted. Shearing is also known as Skewing.
• X-Shear
The X-Shear preserves the Y coordinate and changes are made to
X coordinates, which causes the vertical lines to tilt right or left as
shown in below figure.
• Y-Shear
The Y-Shear preserves the X coordinates and changes the Y
coordinates which causes the horizontal lines to transform into
lines which slopes up or down as shown in the following figure.
Homogeneous Coordinates
• The rotation of a point, straight line or an entire image on the
screen, about a point other than origin, is achieved by first
moving the image until the point of rotation occupies the
origin, then performing rotation, then finally moving the image
to its original position.
• The moving of an image from one place to another in a straight
line is called a translation. A translation may be done by
adding or subtracting to each point, the amount, by which
picture is required to be shifted.
• Translation of point by the change of coordinate cannot be
combined with other transformation by using simple matrix
application. Such a combination is essential if we wish to
rotate an image about a point other than origin by translation,
rotation again translation.
Homogeneous Coordinates
• To combine these three transformations into a single
transformation, homogeneous coordinates are used. In
homogeneous coordinate system, two-dimensional coordinate
positions (x, y) are represented by triple-coordinates.
• Homogeneous coordinates are generally used in design and
construction applications. Here we perform translations,
rotations, scaling to fit the picture into proper position.
• Example of representing coordinates into a homogeneous
coordinate system: For two-dimensional geometric
transformation, we can choose homogeneous parameter h to
any non-zero value. For our convenience take it as one. Each
two-dimensional position is then represented with
homogeneous coordinates (x, y, 1).
Following are matrix for two-dimensional transformation in
homogeneous coordinate:
Window to Viewport Transformation
• Window to Viewport Transformation is the process of
transforming a 2D world-coordinate objects to device
coordinates. Objects inside the world or clipping window are
mapped to the viewport which is the area on the screen where
world coordinates are mapped to be displayed.
General Terms:
• World coordinate – It is the Cartesian coordinate w.r.t which we
define the diagram, like Xwmin, Xwmax, Ywmin, Ywmax
• Device Coordinate –It is the screen coordinate where the
objects is to be displayed, like Xvmin, Xvmax, Yvmin, Yvmax
• Window –It is the area on world coordinate selected for display.
• ViewPort –It is the area on device coordinate where graphics is
to be displayed.
Mathematical Calculation of
Window to Viewport:
• It may be possible that the size of the Viewport is much
smaller or greater than the Window. In these cases, we have
to increase or decrease the size of the Window according to
the Viewport and for this, we need some mathematical
calculations.
• (xw, yw): A point on Window
• (xv, yv): Corresponding point on Viewport. we have to calculate
the point (xv, yv)
Example:
Lets assume,
• for window, Xwmin = 20, Xwmax = 80, Ywmin = 40, Ywmax = 80.
• for viewport, Xvmin = 30, Xvmax = 60, Yvmin = 40, Yvmax = 60.
• Now a point ( Xw, Yw ) be ( 30, 80 ) on the window. We have to calculate
that point on viewport
i.e ( Xv, Yv ).
• First of all, calculate scaling factor of x coordinate Sx and scaling factor of
y coordinate Sy using above mentioned formula.
Sx = ( 60 - 30 ) / ( 80 - 20 ) = 30 / 60
Sy = ( 60 - 40 ) / ( 80 - 40 ) = 20 / 40
• So, now calculate the point on viewport ( Xv, Yv ).
Xv = 30 + ( 30 - 20 ) * ( 30 / 60 ) = 35
Yv = 40 + ( 80 - 40 ) * ( 20 / 40 ) = 60
• So, the point on window ( Xw, Yw ) = ( 30, 80 ) will be ( Xv, Yv ) = ( 35,
60 ) on viewport.