Chapter 4 PDF
Chapter 4 PDF
Chapter 4 PDF
Transformation means changing some graphics into something else by applying rules. We can have
various types of transformations such as translation, scaling up or down, rotation, shearing, etc. When a
transformation takes place on a 2D plane, it is called 2D transformation.
Transformations play an important role in computer graphics to reposition the graphics on the screen
and change their size or orientation.
a) Translation
b) Rotation
c) Scaling.
For each cases of transformation, we consider the reference / pivot point is origin, so if we have to do
these transformations for a point P(x, y) about any arbitrary point (x r, yr), then we have to first shift the
given point to the origin and then perform required transformation and finally shift to that arbitrary point
position.
Geometric transformations involve taking a preimage and transforming it in some way to produce an
image.
x' x t x
y' x t y
[ ] [] []
x'
y'
=
x + tx
y ty
P= x
y [] [] []
P'= x'
y'
T=
tx
ty
∴P'=P+T
For Example:
Given a point P with original position (2,2). Then after performing translation operation with tx = 6 and ty
= 4, we get new transformed coordinate P’ with coordinate (8,6).
b) Rotation
A two-dimensional rotation is applied to an object by repositioning it along a circular path in the xy plane.
To generate a rotation, we specify a rotation angle ‘θ’ and the position (x r , y r ,) of the rotation point (or
pivot point) about which the object is to be rotated.
➢ + Value for ‘θ’ define counter-clockwise rotation about
a point
➢ - Value for ‘θ’ defines clockwise rotation about a point
Let (x, y) is the original point, ‘r’ the constant distance from
origin, & ‘Φ’ the original angular displacement from x-axis.
Now the point (x, y) is rotated through angle ‘θ’ in a counter
clock wise direction
we can express the transformed coordinates in terms of ‘Φ’
and ‘θ’ as
x’ = r cos( Φ + θ) = r cosΦ . cosθ - r sin Φ. sinθ ....(i)
y’ = r sin( Φ + θ) = r cosΦ . sinθ + r sinΦ . cosθ ....(ii)
We know that original coordinates of point in polar
coordinates are
x = r cos Φ
y = r sin Φ
Substituting these values in (i) and (ii), we get,
x’ = x cosθ - y sinθ
y’ = x sinθ + y cosθ
So using column vector representation for coordinate points the matrix form would be P’ = R . P
− Translate the point (xr,yr) and P(x,y) by translation vector (-xr , -yr) which translates the pivot to origin
and P(x,y) to (x-xr , y-yr).
− Now apply the rotation equations when pivot is at origin to
rotate the translated point (x-xr , y-yr) as:
x1 ( x x r ) cos ( y y r ) sin
y1 ( x x r ) sin ( y y r ) cos
− Re- translate the rotated point ( x1 , y1 ) with translation vector
(xr,yr) which is reverse translation to original translation.
Finally we get the equation after successive transformation
as
x'=x r +( x−x r )cos θ−( y− y r )sin θ …………1
y ' y r ( x x r ) sin ( y y r ) cos …………2
Which are actually the equations for rotation of (x,y) from the pivot point (xr,yr)
c) Scaling
A scaling transformation alters the size of an object. This operation can be carried out for polygons by
multiplying the coordinate values (x, y) of each vertex by scaling
factors sx and sy to produce the transformed coordinates (x', y').
x' = x. sx and y’ = y. sy
X-direction Shear:
An X-direction shear relative to x-axis is produced with transformation matrix
equation.
Y-direction Shear:
An y-direction shear relative to y-axis is produced by following transformation
equations.
e. Reflection
A reflection is a transformation that produce a mirror image of an object. In
2D-transformation, reflection is generated relative to an axis of reflection.
The reflection of an object to an relative axis of reflection , is same as 180 o
rotation about the reflection axis.
x’ = x
y’= - y
Compiled By: Mohan Bhandari
ii. Reflection about y axis or about line x = 0
x’ = - x
y’= y
x’ = - x
y’ = -y
Here, we have multiple transformation at once, So when more than one transformations are
applied for performing a task then such transformation is called composite transformation.
So the composite transformation required for reflecting the given object about y=x axis is
Solution:
Given Point P (2, 5) and translation distance Tx= 3, and Ty= 3
We have From Translation Matrix
i.e.
Q. Translate the given square having coordinate A (0,0), B (3,0), and C (3,3) and D ( 0, 3) by the
translating value 2 in both directions.
Solution:
Given points A (0,0), B (3,0), and C (3,3) and D ( 0, 3) and translating value 2 (tx=ty=2)
i.e.
B’= []3
0
+ []
2
2
= []
5
2
C’= []3
3
+ []
2
2
= []
5
5
D’= []0
3
+ []
2
2
= []
2
5
Hence the final co-ordinate are A’(2,2), B’(5,2), C’(5,5) and D’(2,5)
Homogeneous Co-ordinates
To perform a sequence of transformation such as translation followed by rotation and scaling, we need
to follow a sequential process −
To shorten this process, we have to use 3×3 transformation matrix instead of 2×2 transformation matrix.
To convert a 2×2 matrix to 3×3 matrix, we have to add an extra dummy coordinate. So, we can
represent the point by 3 numbers instead of 2 numbers, which is called Homogenous Coordinate
system.
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 h, Yh, h). The ‘h’ is
normally set to 1. If the value of ‘h’ is more the one value then all the co-ordinate values are scaled by
this value.
Coordinates of a point are represented as three element column vectors, transformation operations are
written as 3 x 3 matrices.
For translation
b. Clock Wise(CCW):
For scaling
=
[ ][
1 0 0
0 1 c
0 0 1
cos θ −sin θ 0
sin θ cos θ 0
0 0 1 ][ ][ ][ ]
1 0 0
0 −1 0
0 0 1
cos θ sin θ 0
−sin θ cos θ 0
0 0 1
1 0 0
0 1 −c
0 0 1
=
[ ][ 1 0 0
0 1 c
0 0 1
cos θ −sin θ 0
sin θ cos θ 0
0 0 1 ][ ][ ]
1 0 0
0 −1 0
0 0 1
cos θ sin θ −c sinθ
−sin θ cos θ −c cos θ
0 0 1
=
[ ][ 1 0 0
0 1 c
0 0 1
cos θ −sin θ 0
sin θ cos θ 0
0 0 1 ][ ] cos θ sin θ −c sin θ
sin θ −cos θ c cos θ
0 0 1
[ ][ ]
1 −m 1 m −cm
0
=
[ ]1 0 0
0 1 c
0 0 1
√( m2 +1)
−m
√( m2 +1)
√( m2 +1)
1
√( m2 +1)
0
√(m2 +1)
m
√(m2 +1)
√(m2 +1)
−1
√(m2 +1)
√(m2+1)
c
√(m2+1)
0 0 1 0 0 1
][ ]
1−m2 2m −2cm
[1 0 0 m2 +1 m 2+ 1 m 2 +1
2 2
= 0 1 c 2m m −1 c−cm
0 0 1 2
m +1
2
m +1
2
m +1
0 0 1
Q. Rotate a triangle A(0,0) , B(2,2) , C(4,2) about the origin by the angle of 45
degree.
Solution:
The given triangle ABC can be represented by a matrix, formed from the homogeneous coordinates
of the vertices.
Also, we have
Hence the final co-ordinate points are A’(0,0), B’(0, 2√2) and C’( √2, 3√2).
Q. Rotate the triangle (5, 5), (7, 3), (3, 3) about fixed point (5, 4) in counter
clockwise (CCW) by 90 degree.
Solution
The required steps are:
1. Translate the fixed point to origin.
P’ = Com * P
Hence, the new required coordinate points are (4, 4), (6, 6) & (6, 2).
Q. Reflect an object (2, 3), (4, 3), (4, 5) about line y = x +1.
Here,
The given line is y = x +1.
Thus,
When x = 0, y=1
When x = 1, y=2
When x = 2, y=3
Also,
The slope of the line (m) = 1
Thus, the rotation angle (θ) = Tan-1(m) = Tan -1(1)=450
Here, the required steps are:
5. Reverse translate the line to original position by adding the y-intercept with one
Com = T’ Rθ’RxRθT
P’ = Com * P
Hence, the final coordinates are (2, 3), (2, 5) & (4, 5)
where m= 1, c=1.
Q. Rotate triangle ABC by 450 clockwise about origin and scale it by (2,3) about
origin.
Here,
1. Rotate by 45 clockwise
com = S(2,3).R-45
A’ = com * A
B’ = com * B
Q. Rotate the △ABC by 90° anti clockwise about ( 5,8) and scale it by (2,2) about
(10,10)
Q. A mirror is placed such that it passes through (0,10) (10,0). Find the mirror
image of an object (6,7), (7,6), (6,9).
Q. Show that Successive translations are additive
If two successive translations are applied then they are additive.
Proof:
If two successive translation vectors (tx1, ty1) and (tx2, ty2) are applied to a coordinate
position P, the final transformed location P‘ is calculated with the following composite
transformation as:
T’ = T(x2,y2) . T(x1,y1)
=
[
1 0 Tx 2
0 1 Ty 2
0 0 1 ] [ .
1 0 Tx 1
0 1 Ty 1
0 0 1 ]
[ ]
1 0 Tx 1+Tx 2
= 0 1 Ty 1+Ty 2
0 0 1
Hence, T(tx2, tx2).T(tx1,ty1)= T(tx1+ty1, tx2+ty2) which demonstrates that two successive
translation are additive
Q. Show that Successive rotation are additive
If two successive rotations are applied, then they are additive.
Proof:
Let P be point anticlockwise rotated by angle θ1 to point P’ and again let P’ be rotated by
angle θ2 to point P’’, then the combined transformation can be calculated with the
following composite matrix as:
T = R(θ2) R(θ1)
=
[ 0 0 1 0 ][
cos θ 2 − sinθ 2 0 cos θ 1 −sin θ 1 0
sin θ 2 cos θ2 0 sinθ 1 cos θ 1 0
0 1 ]
= [ cos θ 2∗cosθ 1 −sin θ 2 ∗sinθ 1 −cos θ 2∗sinθ 1− sinθ 2 ∗cosθ 1 0
sin θ 2∗cosθ 1+ cosθ 2 ∗sinθ1 − sin θ 2∗sinθ 1+cosθ 2∗cosθ 2 0
0 0 1 ]
[ ]
cos(θ 1+θ 2) − sin(θ 1+θ 2) 0
= sin(θ 1+θ 2) cos (θ 1+θ 2) 0
0 0 1
Compiled By: Mohan Bhandari
i.e. Rθ2. R θ1 = R (θ1 + θ2), which demonstrates that two successive rotations are additive.
i.e. S (sx2,sy2) S(sx2,sy2) = S(sx1.sx2, sy1.sy2 ), which demonstrates that two successive
scaling are multiplicative.
Multiple Coordinate Systems in a Graphics Program
A coordinate system is a reference system used to represent the object along with its features within a
common co-ordinate framework.
In a typical graphics program, we may need to deal with a number of different coordinate systems, and a
good part of the work is the conversion of coordinates from one system to another. The list of some of
the coordinate systems are:
a) Modeling co-ordinate system
The Model Coordinate System is simply the coordinate system where the model was created. It
is used to define coordinates that are used to construct the shape of individual parts (objects) of
a 2D scene
b) World co-ordinate system
A Model Coordinate System is the unique coordinate space of the model. Two distinct models,
each with their own coordinate systems can’t interact with each other. There needs to be a
universal coordinate system that allows each model to interact with each other. This universal
system is called World Coordinate System. For interaction to occur, the coordinate system of
each model is transformed into the World Coordinate System
Fig: Mapping of picture section falling under rectangular Window onto a designated rectangular view port
The window defines what is to be viewed whereas the view port defines where it is to be displayed.
Window can have any shape (circle, polygon) however some graphics package provide window and
view port operations on standard rectangle only. Window deals with object space whereas view port
deals with image space.
Transformations from world to device coordinates involve translation, rotation and scaling operations, as
well as procedures for deleting those parts of the picture that are outside the limits of a selected display
area i.e. clipping.
To make the viewing process independent of the requirements of any output device, graphics systems
convert object descriptions to normalized coordinates.
Procedure for to transform a window to the view port we have to perform the following steps:
Step1: The object together with its window is translated until the lower left corner of the window
is at the origin
Step2: The object and window are scaled until the window has the dimensions of the view port
Step3: Again translate to move the view port to its correct position on the screen
(Setup Window,Translate window, Scale to normalize, Scale to view port, Translate to View port)
Application
i. By changing the position of the view port, we can view objects at different positions on the
display area of an output device.
ii. By varying the size of view ports, we can change size of displayed objects.
iii. Zooming effects can be obtained by successively mapping different-sized windows on a
fixed-sized view port
iv. Panning effects (Horizontal Scrolling) are produced by moving a fixed-size window across
the various objects in a scene.
Window to View port Coordinate Transformation
A window can be specified by four world coordinates: xwmin, xwmax, ywmin and ywmax. Similarly, a view
port can be described by four device coordinates: xvmin, xvmax, yvmin and yvmax
The equations for mapping window co-ordinate to view port coordinate is given by
xv= xvmin + (xw - xwmin)Sx
yv= yvmin + (yw- ywmin)Sy
Hence,
xv= 50 + (200 -100)* 0.5 = 100
yv= 50 + (200 -100)* 0.5 = 100
The transformed view port coordinate is (100,100).
Q. Find the normalization transformation matrix for window to view port which uses the
rectangle whose lower left corner is at (2,2) and upper right corner is at (6,10) as a
window and the view port that has lower left corner at (0,0) and upper right corner at (1,1)
The composite transformation matrix for transforming the window co-ordinate to viewport coordinate is
given as
T = S(sx, Sy)T(-2, -2)
Now we know,
[ ][ ]
Sx 0 0 1 0 tx
T= 0 Sy 0 0 1 ty
0 0 1 0 0 1
[ ][ ]
0.25 0 0 1 0 −2
= 0 0.125 0 0 1 −2
0 0 1 0 0 1
[ ]
0.25 0 −0.5
= 0 0.125 −0.25
0 0 1
Clipping
The process of discarding those parts of a picture which are outside of a specified region or window is
called clipping. The procedure using which we can identify whether the portions of the graphics object
is within or outside a specified region or space is called clipping algorithm.
The region or space which is used to see the object is called window and the region on which the object
is shown is called view port.
Clipping is necessary to remove those portions
of the objects which are not necessary for further
operation’s. excludes unwanted graphics from
the screen. So there are three cases
i. The object may be
completely outside the
viewing area defined by
the window port.
ii. The object may be seen partially in the window port.
iii. The object may be seen completely in the window port
For case i and ii, clipping operation is necessary but not for case iii.
Applications of Clipping
i. Extracting part of a defined scene for viewing.
ii. Identifying visible surfaces in three-dimensional views.
iii. Anti aliasing line segments or object boundaries.
iv. Drawing and painting operations that allow parts of a picture to be selected for copying,
moving erasing, or duplicating.
Types of Clipping
i. Point Clipping
ii. Line Clipping (straight-line segments)
iii. Area Clipping (polygons)
iv. Curve Clipping
v. Text Clipping
Point Clipping
Point clipping is the process of removing all those points that lies
outside a given region or window. Let xwmin and xwmax be the edge
of the boundaries of the clipping window parallel to Y axis and yw min
Compiled By: Mohan Bhandari
and ywmax be the edge of the boundaries of the clipping window parallel to X axis as shown in figure
below.
So any point P(x,y) of world coordinate can be saved for display if the following conditions are satisfied
Line Clipping
In line clipping, a line or part of line is clipped if it is outside the window port. All the line segment falls
into one of the following clipping cases.
a. The line is totally outside the window port so is directly clipped.
b. The line is partially clipped if a part of the line lies outside the window port.
c. The line is not clipped if all whole line lied within the window port.
So in the above figure, line FE require total clipping, CD, GH, IJ require partial clipping
and AB requires no clipping.
➢Any point inside the clipping window has a region code 0000.
➢Any endpoint (x, y) of a line segment, the code can be determined as follows:
- If x < xw min, first bit is 1, (Point lies to left of window(Left)) (0th bit) Otherwise 0.
- If x > xw max, second bit is 1, (Point lies to right of window(Right)) (1st bit), otherwise 0.
- If y < yw min, third bit is 1, (Point lies to below window(Bottom)) (2nd bit), otherwise 0.
- If y > yw max, fourth bit is 1, (Point lies to above window(Top)) (3rd bit), otherwise 0.
Algorithm:
a) Given a line segment with end points P1=(x1,y1) and P2(x2,y2), compute 4 bit region code
for each end point.
b) To clip a line, first we have to find out which regions its two endpoints lie in.
Case I:
Case II:
Case III:
If lines can not be identified as completely inside or outside we have to do some more
calculations.
Here we find the intersection points with a clipping boundary using the slope intercept form
of the line equation
Here, to find the visible surface, the intersection points on the boundary of window can be
determined as:
y-y1= m (x-x1)
where m = (y 2 -y 1 )/ (x 2 -x 1 )
c) Assign a new four-bit code to the intersection point and repeat until either cas1 or case2
are satisfied.
Q. Use the Cohen –Sutherland algorithm to clip the line P1(70,20) and P2(100,10) against
a window lower left hand corner (50,10) and upper right hand corner (80,40)
Solution:
The Sutherland–Hodgeman algorithm is used for clipping polygons. A single polygon can actually be
split into multiple polygons. The algorithm clips a polygon against all edges of the clipping region in turn.
This algorithm is actually quite general — the clip region can be any convex polygon in 2D, or any
convex polyhedron in 3D.
There are four possible cases for any given edge of given polygon against clipping edge.
1. Both vertices are inside :
Only the second vertex is added to the output list
2. First vertex is outside while second one is inside :
Both the point of intersection of the edge with the clip boundary and the second vertex are added
to the output list
3. First vertex is inside while second one is outside :
Only the point of intersection of the edge with the clip boundary is added to the output list
4. Both vertices are outside :
Example: