UNIT - II

Prepared By: Sufia Enayat, Asst.Professor

MALLA REDDY COLLEGE OF ENGINEERING
Maisammaguda, Secunderabad, Telangana.

III YR – I SEM CSE & IT

 Transformation
Changing Position, shape, size, or orientation of an object on display is known as transformation.

Basic Transformation
• Basic transformation includes three transformations Translation, Rotation, andScaling.
• These three transformations are known as basic transformation because with combination of these
three transformations we can obtain any transformation.

Translation

(𝒙′, 𝒚′)

𝒕𝒚

(𝒙, 𝒚)

𝒕𝒙

Fig. 3.1: - Translation.

• It is a transformation that used to reposition the object along the straight line path from one coordinate
location to another.
• It is rigid body transformation so we need to translate whole object.
• We translate two dimensional point by adding translation distance 𝒕𝒙 and 𝒕𝒚 to the original coordinate
position (𝒙, 𝒚) to move at new position (𝒙′, 𝒚′) as:
𝒙′ = 𝒙 + 𝒕𝒙 & 𝒚′ = 𝒚 + 𝒕𝒚
• Translation distance pair (𝒕𝒙,𝒕𝒚) is called a Translation Vector or ShiftVector.
• We can represent it into single matrix equation in column vectoras;
𝑷′ = 𝑷 + 𝑻

• We can also represent it in row vector form as:

𝑷′ = 𝑷 + 𝑻
[𝒙′ 𝒚′] = [𝒙 𝒚] + [𝒕𝒙 𝒕𝒚]
• Since column vector representation is standard mathematical notation and since many graphics package
like GKS and PHIGS uses column vector we will also follow column vectorrepresentation.
• Example: - Translate the triangle [A (10, 10), B (15, 15), C (20, 10)] 2 unit in x direction and 1 unit in y
direction.
We know that
𝑃′ = 𝑃 + 𝑇

Page | 1
 • Final coordinates after translation are [A’ (12, 11), B’ (17, 16), C’(22,11)].

Rotation
• It is a transformation that used to reposition the object along the circular path in the XY - plane.
• To generate a rotation we specify a rotation angle 𝜽 and the position of the Rotation Point (Pivot
Point) (𝒙𝒓,𝒚𝒓) about which the object is to berotated.
• Positive value of rotation angle defines counter clockwise rotation and negative value of rotation angle
defines clockwise rotation.
• We first find the equation of rotation when pivot point is at coordinate origin(𝟎,𝟎).

(𝒙′,𝒚′)

(𝒙, 𝒚)
𝜽

Fig. 3.2: - Rotation.

• From figure we can write.
𝒙 = 𝒓 𝐜𝐨𝐬 ∅
𝒚 = 𝒓 𝐬𝐢𝐧 ∅
and
𝒙′ = 𝒓 𝐜𝐨𝐬(𝜽 + ∅) = 𝒓 𝐜𝐨𝐬 ∅ 𝐜𝐨𝐬 𝜽 − 𝒓 𝐬𝐢𝐧 ∅ 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒓 𝐬𝐢𝐧(∅ + 𝜽) = 𝒓 𝐜𝐨𝐬 ∅ 𝐬𝐢𝐧 𝜽 + 𝒓 𝐬𝐢𝐧 ∅ 𝐜𝐨𝐬 𝜽

Page | 2
 • Now replace 𝒓 𝐜𝐨𝐬 ∅ with 𝒙 and 𝒓 𝐬𝐢𝐧 ∅ with 𝒚 in above equation.
𝒙′ = 𝒙 𝐜𝐨𝐬 𝜽 − 𝒚 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒙 𝐬𝐢𝐧 𝜽 + 𝒚 𝐜𝐨𝐬 𝜽
• We can write it in the form of column vector matrix equation as;
𝑷′ = 𝑹 ∙ 𝑷

• Rotation about arbitrary point is illustrated in below figure.

(𝒙′, 𝒚′)

(𝒙, 𝒚)
𝜽

∅
(𝒙𝒓, 𝒚𝒓)

Fig. 3.3: - Rotation about pivot point.

• Transformation equation for rotation of a point about pivot point (𝒙𝒓,𝒚𝒓)is:
𝒙′ = 𝒙𝒓 + (𝒙 − 𝒙𝒓) 𝐜𝐨𝐬 𝜽 − (𝒚 − 𝒚𝒓) 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒚𝒓 + (𝒙 − 𝒙𝒓) 𝐬𝐢𝐧 𝜽 + (𝒚 − 𝒚𝒓) 𝐜𝐨𝐬𝜽
• These equations are differing from rotation about origin and its matrix representation is also different.
• Its matrix equation can be obtained by simple method that we will discuss later in this chapter.
• Rotation is also rigid body transformation so we need to rotate each point of object.
• Example: - Locate the new position of the triangle [A (5, 4), B (8, 3), C (8, 8)] after its rotation by 90o
clockwise about the origin.
As rotation is clockwise we will take 𝜃 = −90°.
𝑃′ = 𝑅 ∙ 𝑃

• Final coordinates after rotation are [A’ (4, -5), B’ (3, -8), C’ (8, -8)].

Page | 3
 Scaling

Fig. 3.4: - Scaling.

It is a transformation that used to alter the size of an object.
• This operation is carried out by multiplying coordinate value (𝒙, 𝒚) with scaling factor (𝒔𝒙, 𝒔𝒚)
respectively.
• So equation for scaling is given by:
𝒙′ = 𝒙 ∙ 𝒔𝒙
𝒚′ = 𝒚 ∙ 𝒔𝒚
• These equation can be represented in column vector matrix equationas:
𝑷′ = 𝑺 ∙ 𝑷
𝒙
=

• Any positive value can be assigned to(𝒔𝒙, 𝒔y).

• Values less than 1 reduce the size while values greater than 1 enlarge the size of object, and object
remains unchanged when values of both factor is 1.
• Same values of 𝒔𝒙 and 𝒔𝒚 will produce Uniform Scaling. And different values of 𝒔𝒙 and 𝒔𝒚 willproduce
Differential Scaling.
• Objects transformed with above equation are both scale and repositioned.
• Scaling factor with value less than 1 will move object closer to origin, while scaling factor with value
greater than 1 will move object away from origin.
• We can control the position of object after scaling by keeping one position fixed called Fix point (𝒙𝒇, 𝒚𝒇)
that point will remain unchanged after the scaling transformation.

Fixed Point

Fig. 3.5: - Fixed point scaling.

Page | 4
 • Equation for scaling with fixed point position as (𝒙𝒇, 𝒚𝒇) is:
𝒙′ = 𝒙𝒇 + (𝒙− 𝒙𝒇)𝒔𝒙 𝒚′ = 𝒚𝒇 + (𝒚 −𝒚𝒇)𝒔𝒚
𝒙′ = 𝒙𝒇 + 𝒙𝒔𝒙 − 𝒙𝒇𝒔𝒙 𝒚′ = 𝒚𝒇 + 𝒚𝒔𝒚 − 𝒚𝒇𝒔𝒚
𝒙′ = 𝒙𝒔𝒙 + 𝒙𝒇(𝟏 − 𝒔𝒙) 𝒚′ = 𝒚𝒔𝒚 + 𝒚𝒇(𝟏 −𝒔𝒚)
• Matrix equation for the same will discuss in later section.
• Polygons are scaled by applying scaling at coordinates and redrawing while other body like circle and
ellipse will scale using its defining parameters. For example ellipse will scale using its semi major axis,
semi minor axis and center point scaling and redrawing at that position.
• Example: - Consider square with left-bottom corner at (2, 2) and right-top corner at (6, 6) apply the
transformation which makes its size half.
As we want size half so value of scale factor are 𝑠𝑥 = 0.5, 𝑠𝑦 = 0.5 and Coordinates of square are [A (2,
2), B (6, 2), C (6, 6), D (2,6)].
𝑃′ = 𝑆 ∙ 𝑃

• Final coordinate after scaling are [A’(1, 1), B’ (3, 1), C’ (3, 3), D’ (1,3)].

Matrix Representation and homogeneous coordinates

• Many graphics application involves sequence of geometrictransformations.
• For example in design and picture construction application we perform Translation, Rotation, and scaling
to fit the picture components into their proper positions.
• For efficient processing we will reformulate transformation sequences.
• We have matrix representation of basic transformation and we can express it in the general matrix form
as:
𝑷′ = 𝑴𝟏 ∙ 𝑷 + 𝑴𝟐
Where 𝑷 and 𝑷′ are initial and final point position, 𝑴𝟏 contains rotation and scaling terms and 𝑴𝟐
contains translation al terms associated with pivot point, fixed point and reposition.
• For efficient utilization we must calculate all sequence of transformation in one step and for that reason
we reformulate above equation to eliminate the matrix addition associated with translation terms in
matrix 𝑴𝟐.
• We can combine that thing by expanding 2X2 matrix representation into 3X3 matrices.
• It will allows us to convert all transformation into matrix multiplication but we need to represent vertex
position (𝒙, 𝒚) with homogeneous coordinate triple (𝒙𝒉, 𝒚𝒉, 𝒉) Where 𝒙 = 𝒙𝒉 , 𝒚 = 𝒚𝒉 thus we can also
𝒉 𝒉
write triple as (𝒉 ∙ 𝒙, 𝒉 ∙ 𝒚, 𝒉).
• For two dimensional geometric transformation we can take value of 𝒉 is any positive number so we can
get infinite homogeneous representation for coordinate value (𝒙,𝒚).
• But convenient choice is set 𝒉 = 𝟏 as it is multiplicative identity, than (𝒙, 𝒚) is represented as (𝒙, 𝒚,𝟏).
• Expressing coordinates in homogeneous coordinates form allows us to represent all geometric
transformation equations as matrix multiplication.
• Let’s see each representation with 𝒉 = 𝟏

Page | 5
 Translation

NOTE: - Inverse of translation matrix is obtain by putting −𝒕𝒙 & − 𝒕𝒚 instead of 𝒕𝒙 & 𝒕𝒚.
Rotation

NOTE: - Inverse of rotation matrix is obtained by replacing 𝜽 by −𝜽.

Scaling

NOTE: - Inverse of scaling matrix is obtained by replacing 𝒔𝒙 & 𝒔𝒚 by 𝟏 & 𝟏 respectively.

𝒔𝒙 𝒔𝒚

Composite Transformation
• We can set up a matrix for any sequence of transformations as a composite transformation matrix by
calculating the matrix product of individual transformation.
• For column matrix representation of coordinate positions, we form composite transformations by
multiplying matrices in order from right to left.

Translations
• Two successive translations are performed as:

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively.
• This concept can be extended for any number of successive translations.
Example: Obtain the final coordinates after two translations on point 𝑝(2,3) with translation vector
(4, 3) and (−1, 2) respectively.

Page | 6
Final Coordinates after translations are 𝑝,(5, 8).

Rotations
• Two successive Rotations are performed as:

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively.
• This concept can be extended for any number of successive rotations.
Example: Obtain the final coordinates after two rotations on point 𝑝(6,9) with rotation angles are 30𝑜 and
60𝑜 respectively.

Final Coordinates after rotations are 𝑝,(−9, 6).

Scaling
• Two successive scaling are performed as:

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively.
• This concept can be extended for any number of successive scaling.
Example: Obtain the final coordinates after two scaling on line 𝑝𝑞 [𝑝(2,2), 𝑞(8, 8)] with scaling factors are
(2, 2) and (3, 3) respectively.

Final Coordinates after rotations are 𝑝,(12, 12) and 𝑞,(48, 48).

Page | 7
General Pivot-Point Rotation

(𝒙𝒓, 𝒚𝒓) (𝒙𝒓, 𝒚𝒓)

(a) (b) (c) (d)

Original Position Translation of Object Rotation Translation of Object so
of Object and so that Pivot Point about that Pivot Point is Return
Pivot Point. (𝒙𝒓, 𝒚𝒓) is at Origin. Origin. to Position (𝒙𝒓, 𝒚𝒓) .

Fig. 3.6: - General pivot point rotation.

• For rotating object about arbitrary point called pivot point we need to apply following sequence of
transformation.
1. Translate the object so that the pivot-point coincides with the coordinate origin.
2. Rotate the object about the coordinate origin with specified angle.
3. Translate the object so that the pivot-point is returned to its original position (i.e. Inverse of step-1).
• Let’s find matrix equation for this

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively and (𝒙𝒓, 𝒚𝒓) are the
coordinates of pivot-point.
• Example: - Locate the new position of the triangle [A (5, 4), B (8, 3), C (8, 8)] after its rotation by 90o
clockwise about the centroid.
Pivot point is centroid of the triangle so:

Page | 8
 • Final coordinates after rotation are [A’ (11, 7), B’ (13, 4), C’(18,4)].

General Fixed-Point Scaling

(𝒙𝒇, 𝒚𝒇) (𝒙𝒇, 𝒚𝒇)

(c) (d)
(a) (b)
Scale Object with Translate Object so that
Original Position Translate Object so
Respect to Origin Fixed Point is Return to
of Object and that Fixed Point
Position (𝒙𝒇, 𝒚𝒇) .
Fixed Point (𝒙𝒇, 𝒚𝒇) is at Origin

Fig. 3.7: - General fixed point scaling.

• For scaling object with position of one point called fixed point will remains same, we need to apply
following sequence of transformation.
1. Translate the object so that the fixed-point coincides with the coordinate origin.
2. Scale the object with respect to the coordinate origin with specified scale factors.
3. Translate the object so that the fixed-point is returned to its original position (i.e. Inverse of step-1).
• Let’s find matrix equation for this

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively and (𝒙𝒇, 𝒚𝒇) are the
coordinates of fixed-point.
• Example: - Consider square with left-bottom corner at (2, 2) and right-top corner at (6, 6) apply the
transformation which makes its size half such that its center remains same.
Fixed point is center of square so:

As we want size half so value of scale factor are 𝑠𝑥 = 0.5, 𝑠𝑦 = 0.5 and Coordinates of square are [A (2,
2), B (6, 2), C (6, 6), D (2, 6)].

Page | 9
 • Final coordinate after scaling are [A’(3, 3), B’ (5, 3), C’ (5, 5), D’ (3, 5)]

General Scaling Directions

𝒔𝟐

𝒔𝟏

Fig. 3.8: - General scaling direction.

• Parameter 𝒔𝒙 and 𝒔𝒚 scale the object along 𝒙 and 𝒚 directions. We can scale an object in other directions
by rotating the object to align the desired scaling directions with the coordinate axes before applying the
scaling transformation.
• Suppose we apply scaling factor 𝒔𝟏 and 𝒔𝟐 in direction shown in figure than we will apply following
transformations.
1. Perform a rotation so that the direction for 𝒔𝟏 and 𝒔𝟐 coincide with 𝒙 and 𝒚 axes.
2. Scale the object with specified scale factors.
3. Perform opposite rotation to return points to their original orientations. (i.e. Inverse ofstep-1).
• Let’s find matrix equation for this

Here 𝑷′ and 𝑷 are column vector of final and initial point coordinate respectively and 𝜽 is the angle
between actual scaling direction and our standard coordinate axes.
Other Transformation
• Some package provides few additional transformations which are useful in certain applications. Two
such transformations are reflection and shear.
Page | 10
 Reflection
• A reflection is a transformation that produces a mirror image of anobject.

• The mirror image for a two –dimensional reflection is generated relative to an axis of reflection by
rotating the object 180o about the reflection axis.
• Reflection gives image based on position of axis of reflection. Transformation matrix for few positions
are discussed here.

Transformation matrix for reflection about the line 𝒚 = 𝟎 , 𝒕𝒉𝒆 𝒙 𝒂𝒙𝒊𝒔.

y
1 Original
Position
2 3

x
2’ 3’
Reflected
Position
1’

Fig. 3.9: - Reflection about x - axis.

• This transformation keeps x values are same, but flips (Change the sign) y values of coordinate
positions.

Transformation matrix for reflection about the line 𝒙 = 𝟎 , 𝒕𝒉𝒆 𝒚 𝒂𝒙𝒊𝒔.

y
1’ 1 Original
Reflected
Position Position

3’ 2’ 2 3

Fig. 3.10: - Reflection about y - axis.

• This transformation keeps y values are same, but flips (Change the sign) x values of coordinate
positions.

Transformation matrix for reflection about the 𝑶𝒓𝒊𝒈𝒊𝒏.

Page | 11
 y
Original
3 Position

2
1

x
1’
3’
Reflected
Position 2’

Fig. 3.11: - Reflection about origin.

• This transformation flips (Change the sign) x and y both values of coordinatepositions.

Transformation matrix for reflection about the line 𝒙 = 𝒚 .

y
Original x=y line
Position
3
2 1

1’
3’
Reflected
2’ Position

Fig. 3.12: - Reflection about x=y line.

• This transformation interchange x and y values of coordinate positions.

Page | 12
 Transformation matrix for reflection about the line 𝒙 = −𝒚 .

x=-y line 3 y

1 2

Original
1’ Position
3’
2’
Reflected
Position
x

Fig. 3.12: - Reflection about x=-y line.

• This transformation interchange x and y values of coordinate positions.

• Example: - Find the coordinates after reflection of the triangle [A (10, 10), B (15, 15), C (20, 10)] about x
axis.

• Final coordinate after reflection are [A’ (10, -10), B’ (15, -15), C’ (20,-10)]

Shear

• A transformation that distorts the shape of an object such that the transformed shape appears as if the
object were composed of internal layers that had been caused to slide over each other is called shear.
• Two common shearing transformations are those that shift coordinate x values and those that shift y
values.

Shear in 𝒙 − 𝒅𝒊𝒓𝒆𝒄𝒕𝒊𝒐𝒏 .

Before After
Y Shear Y Shear

X X

Fig. 3.13: - Shear in x-direction.

Page | 13
 • Shear relative to 𝑥 − 𝑎𝑥𝑖𝑠 that is 𝑦 = 0 line can be produced by following equation:
𝒙′ = 𝒙 + 𝒔𝒉𝒙∙𝒚 , 𝒚′ = 𝒚
• Transformation matrix for that is:

Here 𝒔𝒉𝒙 is shear parameter. We can assign any real value to 𝒔𝒉𝒙.
• We can generate 𝑥 − 𝑑𝑖𝑟𝑒𝑐𝑡𝑖𝑜𝑛 shear relative to other reference line 𝑦 = 𝑦𝑟𝑒𝑓 with following equation:
𝒙′ = 𝒙 + 𝒔𝒉𝒙 ∙ (𝒚 − 𝒚𝒓𝒆𝒇) , 𝒚′ = 𝒚
• Transformation matrix for that is:

• Example: - Shear the unit square in x direction with shear parameter ½ relative to line 𝑦 = −1.
Here 𝑦𝑟𝑒𝑓 = −1 and 𝑠ℎ𝑥 = 0.5
Coordinates of unit square are [A (0, 0), B (1, 0), C (1, 1), D (0, 1)].
• Final coordinate after shear are [A’ (0.5, 0), B’ (1.5, 0), C’ (2, 1), D’ (1, 1)]

• Shear in 𝒚 − 𝒅𝒊𝒓𝒆𝒄𝒕𝒊𝒐𝒏 .

Before
Y Shear After
Y
Shear

X X

Fig. 3.14: - Shear in y-direction.

• Shear relative to 𝑦 − 𝑎𝑥𝑖𝑠 that is 𝑥 = 0 line can be produced by following equation:
𝒙′ =𝒙 , 𝒚′ = 𝒚 + 𝒔𝒉𝒚 ∙ 𝒙
• Transformation matrix for that is:

Here 𝒔𝒉𝒚 is shear parameter. We can assign any real value to 𝒔𝒉𝒚.

Page | 14
 • We can generate 𝑦 − 𝑑𝑖𝑟𝑒𝑐𝑡𝑖𝑜𝑛 shear relative to other reference line 𝑥 = 𝑥𝑟𝑒𝑓 with followingequation:
𝒙′ = 𝒙, 𝒚′ = 𝒚 + 𝒔𝒉𝒚 ∙ (𝒙 −𝒙𝒓𝒆𝒇)
• Transformation matrix for that is:

• Example: - Shear the unit square in y direction with shear parameter ½ relative to line 𝑥 = −1.
Here 𝑥𝑟𝑒𝑓 = −1 and 𝑠ℎ𝑦 = 0.5
Coordinates of unit square are [A (0, 0), B (1, 0), C (1, 1), D (0, 1)].

• Final coordinate after shear are [A’(0, 0.5), B’ (1, 1), C’ (1, 2), D’ (0,1.5)]

The Viewing Pipeline

• Window: Area selected in world-coordinate for display is called window. It defines what is to be viewed.
• Viewport: Area on a display device in which window image is display (mapped) is called viewport. It
defines where to display.
• In many case window and viewport are rectangle, also other shape may be used as window and
viewport.
• In general finding device coordinates of viewport from word coordinates of window is called as viewing
transformation.
• Sometimes we consider this viewing transformation as window-to-viewport transformation but in
general it involves more steps.

Fig. 3.1: - A viewing transformation using standard rectangles for the window and viewport.
• Now we see steps involved in viewing pipeline.

Page | 15
 Construct World- Map Viewing
Convert Map
Coordinate Scene Coordinate to
MC WC World- VC NVC Normalized DC
Using Modeling- Normalized Viewing
Coordinate to Viewport to
Coordinate Coordinates using
Viewing Device
Transformations Window-Viewport
Coordinates Coordinates
Specifications

Fig. 3.2: - 2D viewing pipeline.

• As shown in figure above first of all we construct world coordinate scene using modeling coordinate
transformation.
• After this we convert viewing coordinates from world coordinates using window to viewport
transformation.
• Then we map viewing coordinate to normalized viewing coordinate in which we obtain values in
between 0 to 1.
• At last we convert normalized viewing coordinate to device coordinate using device driver software
which provide device specification.
• Finally device coordinate is used to display image on display screen.
• By changing the viewport position on screen we can see image at different place on the screen.
• By changing the size of the window and viewport we can obtain zoom in and zoom out effect as per
requirement.
• Fixed size viewport and small size window gives zoom in effect, and fixed size viewport and larger
window gives zoom out effect.
• View ports are generally defines with the unit square so that graphics package are moredevice
independent which we call as normalized viewing coordinate.
Viewing Coordinate Reference Frame

Fig. 3.3: - A viewing-coordinate frame is moved into coincidence with the world frame in two steps: (a)
translate the viewing origin to the world origin, and then (b) rotate to align the axes of the two systems.
• We can obtain reference frame in any direction and at any position.
• For handling such condition first of all we translate reference frame origin to standard reference frame
origin and then we rotate it to align it to standardaxis.
• In this way we can adjust window in any reference frame.
• this is illustrate by following transformation matrix:

Page | 16
 𝐌𝐰𝐜,𝐯𝐜 = 𝐑𝐓
• Where T is translation matrix and R is rotation matrix.
Window-To-Viewport Coordinate Transformation
• Mapping of window coordinate to viewport is called window to viewporttransformation.
• We do this using transformation that maintains relative position of window coordinate intoviewport.
• That means center coordinates in window must be remains at center position inviewport.
• We find relative position by equation as follow:
𝐱𝐯 − 𝐱𝐯𝐦𝐢𝐧 𝐱𝐰 − 𝐱 𝐰𝐦𝐢𝐧
=
𝐱𝐯𝐦𝐚𝐱 − 𝐱𝐰𝐦𝐚𝐱 − 𝐱𝐰𝐦𝐢𝐧
𝐱𝐯𝐦𝐢𝐧

𝐲𝐯 − 𝐲𝐯𝐦𝐢𝐧 𝐲𝐰 − 𝐲𝐰𝐦𝐢𝐧
=
𝐲𝐯𝐦𝐚𝐱 − 𝐲𝐰𝐦𝐚𝐱 − 𝐲𝐰𝐦𝐢𝐧
𝐲𝐯𝐦𝐢𝐧
• Solving by making viewport position as subject weobtain:
𝐱𝐯 = 𝐱𝐯𝐦𝐢𝐧 + (𝐱𝐰 −𝐱𝐰𝐦𝐢𝐧)𝐬𝐱
𝐲𝐯 = 𝐲𝐯𝐦𝐢𝐧 + (𝐲𝐰 −𝐲𝐰𝐦𝐢𝐧)𝐬𝐲
• Where scaling factor are :
𝐱𝐯𝐦𝐚𝐱 − 𝐱𝐯𝐦𝐢𝐧
𝐬𝐱 = 𝐱𝐰𝐦𝐚𝐱 − 𝐱𝐰𝐦𝐢𝐧
𝐲𝐯𝐦𝐚𝐱 − 𝐲𝐯𝐦𝐢𝐧
𝐬𝐲 = 𝐲𝐰𝐦𝐚𝐱 − 𝐲𝐰𝐦𝐢𝐧
• We can also map window to viewport with the set of transformation, which include following sequence
of transformations:
1. Perform a scaling transformation using a fixed-point position of (xWmin,ywmin) that scales the window
area to the size of the viewport.
2. Translate the scaled window area to the position of the viewport.
• For maintaining relative proportions we take (sx = sy). in case if both are not equal then we get stretched
or contracted in either the x or y direction when displayed on the outputdevice.
• Characters are handle in two different way one way is simply maintain relative position like other
primitive and other is to maintain standard character size even though viewport size is enlarged or
reduce.
• Number of display device can be used in application and for each we can use different window-to-
viewport transformation. This mapping is called the workstationtransformation.

Page | 17
 Fig. 3.4: - workstation transformation.

Page | 18
 • As shown in figure two different displays devices are used and we map different window-to-viewport on
each one.
Clipping Operations
• Generally, any procedure that identifies those portions of a picture that are either inside or outside of a
specified region of space is referred to as a clipping algorithm, or simply clipping. The region against
which an object is to clip is called a clipwindow.
• Clip window can be general polygon or it can be curved boundary.
Application of Clipping
• It can be used for displaying particular part of the picture on display screen.
• Identifying visible surface in 3D views.
• Antialiasing.
• Creating objects using solid-modeling procedures.
• Displaying multiple windows on same screen.
• Drawing and painting.
Point Clipping
• In point clipping we eliminate those points which are outside the clipping window and draw points which
are inside the clipping window.
• Here we consider clipping window is rectangular boundary with edge (xwmin,xwmax,ywmin,ywmax).
• So for finding wether given point is inside or outside the clipping window we use following inequality:
𝒙𝒘𝒎𝒊𝒏 ≤ 𝒙 ≤ 𝒙𝒘𝒂𝒎𝒙
𝒚𝒘𝒎𝒊𝒏 ≤ 𝒚 ≤𝒚𝒘𝒂𝒎𝒙
• If above both inequality is satisfied then the point is inside otherwise the point is outside the clipping
window.
Line Clipping
• Line clipping involves several possible cases.
1. Completely inside the clipping window.
2. Completely outside the clipping window.
3. Partially inside and partially outside the clipping window.

P9

Window P10 Window

P4

P2 P2
P8
P1 P1
P5 P8
P3 P5 P6 P6

P7

P7

Before Clipping After Clipping

(a) (b)
Fig. 3.5: - Line clipping against a rectangular window.

Page | 19
 • Line which is completely inside is display completely. Line which is completely outside is eliminated from
display. And for partially inside line we need to calculate intersection with window boundary and find
which part is inside the clipping boundary and which part iseliminated.
• For line clipping several scientists tried different methods to solve this clipping procedure. Some of them
are discuss below.
Cohen-Sutherland Line Clipping
• This is one of the oldest and most popular line-clippingprocedures.

Region and Region Code

• In this we divide whole space into nine region and assign 4 bit code to each endpoint of line depending
on the position where the line endpoint is located.

1001 1000 1010

0001 0000 0010

0101 0100 0110

Fig. 3.6: - Workstation transformation.

• Figure 3.6 shows code for line end point which is fall within particulararea.
• Code is deriving by setting particular bit according to position of area.
Set bit 1: For left side of clipping window.
Set bit 2: For right side of clipping window.
Set bit 3: For below clipping window.
Set bit 4: For above clipping window.
• All bits as mention above are set means 1 and other are 0.

Algorithm
Step-1:
Assign region code to both endpoint of a line depending on the position where the line endpoint is located.

Step-2:
If both endpoint have code ‘0000’
Then line is completely inside.
Otherwise
Perform logical ending between this two codes.

If result of logical ending is non-zero

Line is completely outside the clipping window.
Otherwise
Calculate the intersection point with the boundary one by one.
Divide the line into two parts from intersection point.
Recursively call algorithm for both line segments.

Page | 20
 Step-3:
Draw line segment which are completely inside and eliminate other line segment which found completely
outside.

Intersection points calculation with clipping window boundary

• For intersection calculation we use line equation “𝑦 = 𝑚𝑥 +𝑏”.
• ‘𝑥′ is constant for left and right boundary which is:
o for left “𝑥 =𝑥𝑤𝑚𝑖𝑛”
o for right “𝑥 =𝑥𝑤𝑚𝑎𝑥”
• So we calculate 𝑦 coordinate of intersection for this boundary by putting values of 𝑥 depending on
boundary is left or right in belowequation.
𝒚 = 𝒚𝟏 + 𝒎(𝒙 − 𝒙𝟏)
• ′𝑦′ coordinate is constant for top and bottom boundary whichis:
o for top “𝑦 =𝑦𝑤𝑚𝑎𝑥”
o for bottom “𝑦 =𝑦𝑤𝑚𝑖𝑛”
• So we calculate 𝑥 coordinate of intersection for this boundary by putting values of 𝑦 depending on
boundary is top or bottom in below equation.
𝒚 − 𝒚𝟏
𝒙 = 𝒙𝟏 +
𝒎
Liang-Barsky Line Clipping
• Line clipping approach is given by the Liang and Barsky is faster than cohen-sutherland line clipping.
Which is based on analysis of the parametric equation of the line which are as below.
𝒙 = 𝒙𝟏 + 𝒖∆𝒙
𝒚 = 𝒚𝟏 + 𝒖∆𝒚
Where 0 ≤ 𝑢 ≤ 1 ,∆𝑥 = 𝑥2 − 𝑥1 and ∆𝑦 = 𝑦2 − 𝑦1.

Algorithm
1. Read two end points of line 𝑃1(𝑥1, 𝑦1) and 𝑃2(𝑥2,𝑦2)
2. Read two corner vertices, left top and right bottom of window: (𝑥𝑤𝑚𝑖𝑛, 𝑦𝑤𝑚𝑎𝑥) and (𝑥𝑤𝑚𝑎𝑥, 𝑦𝑤𝑚𝑖𝑛)
3. Calculate values of parameters 𝑝𝑘 and 𝑞𝑘 for 𝑘 = 1, 2, 3, 4 such that,
𝑝1 = −∆𝑥, 𝑞1 = 𝑥1 − 𝑥𝑤𝑚𝑖𝑛
𝑝2 = ∆𝑥, 𝑞2 = 𝑥𝑤𝑚𝑎𝑥 −𝑥1
𝑝3 = −∆𝑦, 𝑞3 = 𝑦1 − 𝑦𝑤𝑚𝑖𝑛
𝑝4 = ∆𝑦, 𝑞4 = 𝑦𝑤𝑚𝑎𝑥 − 𝑦1
4. If 𝑝𝑘 = 0 for any value of 𝑘 = 1, 2, 3, 4 then,
Line is parallel to 𝑘𝑡ℎ boundary.

If corresponding 𝑞𝑘 < 0 then,

Line is completely outside the boundary. Therefore, discard line segment and Go to Step
10.
Otherwise
Check line is horizontal or vertical and accordingly check line end points with
corresponding boundaries.

If line endpoints lie within the bounded area

Then use them to draw line.
Otherwise

Page | 21
 Use boundary coordinates to draw line. And go to Step 8.
5. For 𝑘 = 1,2,3,4 calculate 𝑟𝑘 for nonzero values of 𝑝𝑘 and 𝑞𝑘 as follows:
𝑞𝑘
𝑟 = , 𝑓𝑜𝑟 𝑘 = 1,2,3,4
𝑘 𝑝𝑘
6. Find 𝑢1 𝑎𝑛𝑑 𝑢2 as given below:
𝑢1 = max{0, 𝑟𝑘|𝑤ℎ𝑒𝑟𝑒 𝑘 𝑡𝑎𝑘𝑒𝑠 𝑎𝑙𝑙 𝑣𝑎𝑙𝑢𝑒𝑠 𝑓𝑜𝑟 𝑤ℎ𝑖𝑐ℎ 𝑝𝑘 <0}
𝑢2 = min{1, 𝑟𝑘|𝑤ℎ𝑒𝑟𝑒 𝑘 𝑡𝑎𝑘𝑒𝑠 𝑎𝑙𝑙 𝑣𝑎𝑙𝑢𝑒𝑠 𝑓𝑜𝑟 𝑤ℎ𝑖𝑐ℎ 𝑝𝑘 >0}
7. If 𝑢1 ≤ 𝑢2 then
Calculate endpoints of clipped line:
𝑥 ′ = 𝑥 + 𝑢 ∆𝑥
1 1 1
𝑦1′ = 𝑦1 + 𝑢1∆𝑦
𝑥 ′ = 𝑥 + 𝑢 ∆𝑥
2 1 2
𝑦2′ = 𝑦 +
1 𝑢 ∆𝑦
2
Draw line (𝑥 ′1, 𝑦 ′,1𝑥 ′, 𝑦
2 );2
′

8. Stop.

Advantages
1. More efficient.
2. Only requires one division to update 𝑢1 and 𝑢2.
3. Window intersections of line are calculated just once.

Nicholl-Lee-Nicholl Line Clipping

• By creating more regions around the clip window the NLN algorithm avoids multiple clipping of an
individual line segment.
• In Cohen-Sutherlan line clipping sometimes multiple calculation of intersection point of a line is done
before actual window boundary intersection or line is completely rejected.
• These multiple intersection calculation is avoided in NLN line clippingprocedure.
• NLN line clipping perform the fewer comparisons and divisions so it is more efficient.
• But NLN line clipping cannot be extended for three dimensions while Cohen-Sutherland and Liang-Barsky
algorithm can be easily extended for threedimensions.
• For given line we find first point falls in which region out of nine region shown in figure below but three
region shown in figure by putting point are only considered and if point falls in other region than we
transfer that point in one of the three region.

P1

P1 P1

P1 in Window P1 in Edge Region P1 in Corner Region

(a) (b) (c)

Fig. 3.7: - Three possible position for a line endpoint p1 in the NLN line-clipping algorithm.
• We can also extend this procedure for all nine regions.
• Now for p1 is inside the window we divide whole area in following region:

Page | 22
 Fig. 3.8: - Clipping region when p1 is inside the window.
• Now for p1 is in edge region we divide whole area in followingregion:

Fig. 3.9: - Clipping region when p1 is in edge region.

• Now for p1 is in corner region we divide whole area in followingregion:

Fig. 3.10: - Two possible sets of clipping region when p1 is in corner region.
• Regions are name in such a way that name in which region p2 falls is gives the window edge which
intersects the line.
• For example region LT says that line need to clip at left and top boundary.
• For finding that in which region line 𝒑𝟏𝒑𝟐 falls we compare the slope of the line to the slope of the
boundaries:
𝒔𝒍𝒐𝒑𝒆 𝒑𝟏𝒑𝑩𝟏 < 𝒔𝒍𝒐𝒑𝒆 𝒑𝟏𝒑𝟐 < 𝑠𝑙𝑜𝑝𝑒 𝒑𝟏𝒑𝑩𝟐
Where 𝒑𝟏𝒑𝑩𝟏 and 𝒑𝟏𝒑𝑩𝟐 are boundary lines.
• For example p1 is in edge region and for checking whether p2 is in region LT we use following equation.

𝒔𝒍𝒐𝒑𝒆 𝒑𝟏𝒑𝑻𝑹 < 𝒔𝒍𝒐𝒑𝒆 𝒑𝟏𝒑𝟐 < 𝑠𝑙𝑜𝑝𝑒 𝒑𝟏𝒑𝑻𝑳

𝒚𝑻 − 𝒚𝟏 < 𝒚𝟐 − 𝒚𝟏 < 𝒚𝑻 − 𝒚𝟏
𝒙𝑹 − 𝒙𝟏 𝒙𝟐 − 𝒙𝟏 𝒙𝑳 − 𝒙𝟏
• After checking slope condition we need to check weather it crossing zero, one or two edges.
• This can be done by comparing coordinates of 𝑝2 with coordinates of window boundary.
• For left and right boundary we compare 𝑥 coordinates and for top and bottom boundary we compare 𝑦
coordinates.
• If line is not fall in any defined region than clip entireline.

Page | 23
 • Otherwise calculate intersection.
• After finding region we calculate intersection point using parametric equation whichare:
• 𝒙 = 𝒙𝟏 + (𝒙𝟐 − 𝒙𝟏)𝒖
• 𝒚 = 𝒚𝟏 + (𝒚𝟐 − 𝒚𝟏)𝒖
• For left or right boundary 𝑥 = 𝑥𝑙 𝑜𝑟 𝑥𝑟 respectively, with 𝑢 = (𝑥𝑙/𝑟 – 𝑥1)/ (𝑥2 – 𝑥1), so that 𝑦 can be
obtain from parametric equation as below:
−𝒚𝟏
𝒚𝟐
• 𝒚 = 𝒚𝟏 + 𝒙 −𝒙 (𝒙 − 𝒙𝟏)
𝟐 𝟏
• Keep the portion which is inside and clip therest.

Polygon Clipping
• For polygon clipping we need to modify the line clipping procedure because in line clipping we need to
consider about only line segment while in polygon clipping we need to consider the area and the new
boundary of the polygon after clipping.
Sutherland-Hodgeman Polygon Clipping
• For correctly clip a polygon we process the polygon boundary as a whole against each window edge.
• This is done by whole polygon vertices against each clip rectangle boundary one by one.
• Beginning with the initial set of polygon vertices we first clip against the left boundary and produce new
sequence of vertices.
• Then that new set of vertices is clipped against the right boundary clipper, a bottom boundary clipper
and a top boundary clipper, as shown in figure below.

Fig. 3.11: - Clipping a polygon against successive window boundaries.

Left Right Bottom Top

in out
Clipper Clipper Clipper Clipper

Fig. 3.12: - Processing the vertices of the polygon through boundary clipper.
• There are four possible cases when processing vertices in sequence around the perimeter of a polygon.

Page | 24
 Fig. 3.13: - Clipping a polygon against successive window boundaries.
• As shown in case 1: if both vertices are inside the window we add only second vertices to outputlist.
• In case 2: if first vertices is inside the boundary and second vertices is outside the boundary only the
edge intersection with the window boundary is added to the output vertexlist.
• In case 3: if both vertices are outside the window boundary nothing is added to window boundary.
• In case 4: first vertex is outside and second vertex is inside the boundary, then adds both intersection
point with window boundary, and second vertex to the output list.
• When polygon clipping is done against one boundary then we clip against next window boundary.
• We illustrate this method by simple example.

Window

3
2’
2 1’

1 3’ 4
6
5’
4’
5

Fig. 3.14: - Clipping a polygon against left window boundaries.

• As shown in figure above we clip against left boundary vertices 1 and 2 are found to be on the outside of
the boundary. Then we move to vertex 3, which is inside, we calculate the intersection and add both
intersection point and vertex 3 to output list.
• Then we move to vertex 4 in which vertex 3 and 4 both are inside so we add vertex 4 to output list,
similarly from 4 to 5 we add 5 to output list, then from 5 to 6 we move inside to outside so we add
intersection pint to output list and finally 6 to 1 both vertex are outside the window so we does not add
anything.
• Convex polygons are correctly clipped by the Sutherland-Hodgeman algorithm but concave polygons
may be displayed with extraneous lines.
• For overcome this problem we have one possible solution is to divide polygon into numbers of small
convex polygon and then process one by one.
• Another approach is to use Weiler-Atherton algorithm.
Weiler-Atherton Polygon Clipping
• In this algorithm vertex processing procedure for window boundary is modified so that concave polygon
also clip correctly.
• This can be applied for arbitrary polygon clipping regions as it is developed for visible surface
identification.
• Main idea of this algorithm is instead of always proceeding around the polygon edges as vertices are
processed we sometimes need to follow the window boundaries.
• Other procedure is similar to Sutherland-Hodgeman algorithm.
• For clockwise processing of polygon vertices we use the following rules:
o For an outside to inside pair of vertices, follow the polygonboundary.
o For an inside to outside pair of vertices, follow the window boundary in a clockwise direction.
• We illustrate it with example:

Page | 25
 V2’ V2
(resume) V1’

V3’ V3
V4’
V1
V4
(stop)
V5’
(resume) V7’
V5
V6 V6’

(a) (b)
Fig. 3.14: - Clipping a concave polygon (a) with the Weiler-Atherton algorithm generates the two se
• As shown in figure we start from v1 and move clockwise towards v2 and add intersection point and next
point to output list by following polygon boundary, then from v2 to v3 we add v3 to outputlist.
• From v3 to v4 we calculate intersection point and add to output list and follow window boundary.
• Similarly from v4 to v5 we add intersection point and next point and follow the polygon boundary, next
we move v5 to v6 and add intersection point and follow the window boundary, and finally v6 to v1 is
outside so no need to add anything.
• This way we get two separate polygon section after clipping.

Page | 26