Chapter Four

Windows and Viewports

and clipping algorithms
Co-ordinates Representation

• In the last chapter we learned how we can use matrices to our advantage by
transforming all vertices with transformation matrices.

• OpenGL expects all the vertices, that we want to become visible, to be in

normalized device coordinates after each vertex shader run.
• Vertex shaders are fed Vertex Attribute data, as specified from a vertex array
object by a drawing command. A vertex shader receives a single vertex from
the vertex stream and generates a single vertex to the output vertex stream.
There must be a 1:1 mapping from input vertices to output vertices.
• That is, the x, y and z coordinates of each vertex should be between -1.0 and 1.0;

coordinates outside this range will not be visible.

• What we usually do, is specify the coordinates in a range (or space) we determine

ourselves and in the vertex shader transform these coordinates to normalized

device coordinates (NDC).

• These NDC are then given to the rasterizer to transform them to 2D

coordinates/pixels on your screen.

• Transforming coordinates to NDC is usually accomplished in a step-by-step
fashion where we transform an object's vertices to several coordinate systems
before finally transforming them to NDC.

• The advantage of transforming them to several intermediate coordinate systems is

that some operations/calculations are easier in certain coordinate systems.
There are a total of 5 different coordinate systems that are of importance to us:

• Local space (or Object space)

• World space

• View space (or Eye space)

• Clip space

• Screen space

Those are all a different state at which our vertices will be transformed in before
finally ending up as fragments.
• To transform the coordinates from one space to the next coordinate space we'll use
several transformation matrices of which the most important are the model, view
and projection matrix.

• Our vertex coordinates first start in local space as local coordinates and are then
further processed to world coordinates, view coordinates, clip coordinates and
eventually end up as screen coordinates.

• The following image displays the process and shows what each transformation
does:
For example, when modifying your object it makes most sense to do this in local
space, while calculating certain operations on the object with respect to the
position of other objects makes most sense in world coordinates and so on.
1. Local coordinates are the coordinates of your object relative to its local origin;
they're the coordinates your object begins in.

2. The next step is to transform the local coordinates to world-space coordinates

which are coordinates in respect of a larger world. These coordinates are
relative to some global origin of the world, together with many other objects
also placed relative to this world's origin.

3. Next we transform the world coordinates to view-space coordinates in such a

way that each coordinate is as seen from the camera or viewer's point of view.
4. After the coordinates are in view space we want to project them to clip
coordinates. Clip coordinates are processed to the -1.0 and 1.0 range and
determine which vertices will end up on the screen. Projection to clip-
space coordinates can add perspective if using perspective projection.

5. And lastly we transform the clip coordinates to screen coordinates in a

process we call viewport transform that transforms the coordinates from -
1.0 and 1.0 to the coordinate range defined by glViewport. The resulting
coordinates are then sent to the rasterizer to turn them into fragments.
Local space

• Local space is the coordinate space that is local to your object, i.e. where your
object begins in.

• Imagine that you've created your cube in a modeling software package

• The origin of your cube is probably at (0,0,0) even though your cube may end
up at a different location in your final application.

• Probably all the models you've created all have (0,0,0) as their initial position.

• All the vertices of your model are therefore in local space: they are all local to
your object.
World space

• If we would import all our objects directly in the application they would probably
all be somewhere positioned inside each other at the world's origin of (0,0,0)
which is not what we want.

• We want to define a position for each object to position them inside a larger
world.

• The coordinates in world space are exactly what they sound like: the coordinates
of all your vertices relative to a (game) world.
World space

• This is the coordinate space where you want your objects transformed to in such a
way that they're all scattered around the place (preferably in a realistic fashion).

• The coordinates of your object are transformed from local to world space; this is
accomplished with the model matrix.
• The model matrix is a transformation matrix that translates, scales
and/or rotates your object to place it in the world at a
location/orientation they belong to.
• Think of it as transforming a house by scaling it down (it was a bit too large in
local space), translating it to a suburbia town and rotating it a bit to the left on
the y-axis so that it neatly fits with the neighboring houses.
• You could think of the matrix in the previous chapter to position the container
all over the scene as a sort of model matrix as well; we transformed the local
coordinates of the container to some different place in the scene/world.
View space
• The view space is what people usually refer to as the camera of

OpenGL (it is sometimes also known as camera space or eye space).

• The view space is the result of transforming your world-space

coordinates to coordinates that are in front of the user's view.

• The view space is thus the space as seen from the camera's point of

view.
View space
• This is usually accomplished with a combination of translations and
rotations to translate/rotate the scene so that certain items are
transformed to the front of the camera.

• These combined transformations are generally stored inside a view

matrix that transforms world coordinates to view space.
Clip space

• At the end of each vertex shader run, OpenGL expects the coordinates to be

within a specific range and any coordinate that falls outside this range is

clipped.

• Coordinates that are clipped are discarded, so the remaining coordinates will

end up as fragments visible on your screen.

• This is also where clip space gets its name from.

• Because specifying all the visible coordinates to be within the range -1.0 and

1.0 isn't really intuitive, we specify our own coordinate set to work in and

convert those back to NDC as OpenGL expects them.

• To transform vertex coordinates from view to clip-space we define a
so called projection matrix that specifies a range of coordinates e.g. -
1000 and 1000 in each dimension.

• The projection matrix then transforms coordinates within this

specified range to normalized device coordinates (-1.0, 1.0).

• All coordinates outside this range will not be mapped between -1.0
and 1.0 and therefore be clipped.
• With this range we specified in the projection matrix, a
coordinate of (1250, 500, 750) would not be visible, since the
x coordinate is out of range and thus gets converted to a
coordinate higher than 1.0 in NDC and is therefore clipped.
• Note that if only a part of a primitive e.g. a triangle is outside
the clipping volume OpenGL will reconstruct the triangle as one
or more triangles to fit inside the clipping range.
• The projection matrix to transform view coordinates to clip
coordinates usually takes two different forms, where each form defines
its own unique frustum.

• We can either create an orthographic projection matrix or a perspective

projection matrix.
Orthographic projection
• An orthographic projection matrix defines a cube-like frustum box
that defines the clipping space where each vertex outside this box is
clipped.

• When creating an orthographic projection matrix we specify the width,

height and length of the visible frustum.

• All the coordinates inside this frustum will end up within the NDC
range after transformed by its matrix and thus won't be clipped.

• The frustum looks a bit like a container:

• The frustum defines the visible coordinates and is specified by a
width, a height and a near and far plane.
• Any coordinate in front of the near plane is clipped and the same
applies to coordinates behind the far plane.
• The orthographic frustum directly maps all coordinates inside the
frustum to normalized device coordinates without any special side
effects since it won't touch the w component of the transformed
vector; if the w component remains equal to 1.0 perspective division
won't change the coordinates.
 Perspective projection
• If you ever were to enjoy the graphics the real life has to offer you'll
notice that objects that are farther away appear much smaller.

• This weird effect is something we call perspective.

• Perspective is especially noticeable when looking down the end of an

infinite motorway or railway as seen in the following image:
• As you can see, due to perspective the lines seem to coincide at a far enough
distance.

• This is exactly the effect perspective projection tries to mimic and it does so using
a perspective projection matrix.

• The projection matrix maps a given frustum range to clip space, but also
manipulates the w value of each vertex coordinate in such a way that the further
away a vertex coordinate is from the viewer, the higher this w component
becomes.
• Once the coordinates are transformed to clip space they are in the range -w to w
(anything outside this range is clipped).

• OpenGL requires that the visible coordinates fall between the range -1.0 and 1.0
as the final vertex shader output, thus once the coordinates are in clip space,

perspective division is applied to the clip space coordinates:

Viewing Pipeline
• A world-coordinate area selected for display is called a window.
• An area on a display device to which a window is mapped is called a
viewport.
• The window defines what is to be viewed; the viewport defines where it is to
be displayed.
• Often, windows and viewports are rectangles in standard position, with the
rectangle edges parallel to the coordinate axes.
• The mapping of a part of a world-coordinate scene to device coordinates is
referred to as a viewing transformation. Sometimes the two-dimensional
viewing transformation is simply referred to as the window-to-viewport
transformation or the windowing transformation
Clipping Area
• Clipping Area: Clipping area refers to the area that can be seen (i.e.,
captured by the camera), measured in OpenGL coordinates. The
function gluOrtho2D can be used to set the clipping area of 2D
orthographic view. Objects outside the clipping area will be clipped
away and cannot be seen.
• To set the clipping area, we need to issue a series of commands as
follows: we first select the so-called projection matrix for operation,
and reset the projection matrix to identity. We then choose the 2D
orthographic view with the desired clipping area, via gluOrtho2D().
Viewport

• Viewport: Viewport refers to the display area on the window (screen), which is
measured in pixels in screen coordinates (excluding the title bar).

• The clipping area is mapped to the viewport. We can use glViewport function to
configure the viewport.

• X and y is the positon of the bottom left corner

• void glViewport(GLint x, GLint y, GLsizei width, GLsizei height);

• The x and y parameters specify the lower-left corner of the viewport within the
window, and the width and height parameters specify these dimensions in pixels.
 Example: the following code will divide the screen into
three viewports each with its own clipping area.
#include<iostream.h> glColor3f( 0, 0, 1 );
#include <GL/glut.h> glPushMatrix(); // Sets up the PROJECTION matrix
float angle =-20; glRotatef(-30, 0.0f, 0.0f, 1.0f); glMatrixMode(GL_PROJECTION);
void timer(int value) glRectf(0.0,0.0,10.0,30.0); glLoadIdentity();
{ glPopMatrix(); gluOrtho2D(0.0,50.0,-10.0,40.0); // also sets up world window
angle-=10; glColor3f(0,0,0); // Draw RED rectangle
if(angle>180) glColor3f(0,0,0);
glLineWidth(10);
angle-=20; glLineWidth(10);
glutPostRedisplay(); glBegin(GL_LINES);
glVertex2f(0,40); glBegin(GL_LINES);
glutTimerFunc(1000,timer,0); glVertex2f(0,40);
} glVertex2f(50,40);
void draw(){ glVertex2f(50,40); glVertex2f(50,40);
// Make background colour yellow glVertex2f(50,-10); glVertex2f(50,40);
glClearColor( 100, 100, 0, 0 ); glVertex2f(50,-10); glVertex2f(50,-10);
glClear (GL_COLOR_BUFFER_BIT ); glVertex2f(0,-10); glVertex2f(50,-10);
// Sets up FIRST viewport spanning the left-bottom quarter of the interface window glVertex2f(0,-10);
glVertex2f(0,-10);
glViewport(0,0,250,250); glVertex2f(0,-10);
glVertex2f(0,40);
// Sets up the PROJECTION matrix glVertex2f(0,40);
glMatrixMode(GL_PROJECTION);
glEnd();
glEnd();
glLoadIdentity(); glViewport(250,250,250,250);
glColor3f( 1, 0, 0 );
gluOrtho2D(0.0,50.0,-10.0,40.0); // also sets up world window glRectf(0.0,0.0,10.0,30.0);
// Draw BLUE rectangle
// display rectangles
glViewport(500,500,250,250);
glMatrixMode(GL_PROJECTION);
int main(int argc, char ** argv)
glLoadIdentity(); {
gluOrtho2D(0.0,50.0,-10.0,40.0); glutInit(&argc, argv);
glColor3f(0,0,0);
glPushMatrix(); // Set window size
glRotatef(angle, 0.0f, 0.0f, 1.0f); glutInitWindowSize( 750,750 );
glRectf(0.0,0.0,10.0,30.0);
glPopMatrix();
glutCreateWindow("Three viewports ");
glLineWidth(10); glutDisplayFunc(draw);
glBegin(GL_LINES); glutTimerFunc(1000,timer,0);
glVertex2f(0,40);
glVertex2f(50,40); glutMainLoop();
glVertex2f(50,40); return 0;
glVertex2f(50,-10); }
glVertex2f(50,-10);
glVertex2f(0,-10);
glVertex2f(0,-10);
glVertex2f(0,40);
glEnd();
glFlush();
}
Zooming and panning effects with
windows
#include<iostream>
and viewports
#include<GL/glut.h>
float zoomFactor = 1.1;
float l,w,x,y; if( button == GLUT_RIGHT_BUTTON )
void mouse( int button, int state, int mx, int my ) {
{ zoomFactor-=0.02;
if( button == GLUT_LEFT_BUTTON) }
{ glutPostRedisplay();
zoomFactor+=0.02;} }
//if(state == GLUT_DOWN && button ==
GLUT_LEFT_BUTTON)
 void display()
{
void keyPress(int key,int x,int y) glClear( GL_COLOR_BUFFER_BIT );
{ void myinit() glMatrixMode(GL_MODELVIEW );
{ glPushMatrix();
if(key==27) glClearColor(0.0,0.0,0.0,0.0); glScalef(zoomFactor, zoomFactor, 0.0f);
exit(0); glColor3f(1.0,0.0,0.0); glColor3f( 1, 0, 0 );
if (key == GLUT_KEY_UP) } glBegin( GL_TRIANGLES );
zoomFactor += .05; glVertex2f( 0.5, 0 );
if (key == GLUT_KEY_DOWN) glVertex2f( 0.0, 0.5 );
zoomFactor -= .05; glVertex2f( 0.0, 0 );
glVertex2f( 0, 0 );
glutPostRedisplay(); glVertex2f( -0.5, 0.0);
glVertex2f( 0.0, -0.5 );
} glEnd();
glPopMatrix();
glFlush();
}
int main( int argc, char **argv )
{
glutInit( &argc, argv );
glutInitWindowSize( 600, 600 );
glutCreateWindow( "GLUT" );
glutDisplayFunc( display );
myinit();
glutMouseFunc( mouse );
glutSpecialFunc(keyPress);

glutMainLoop();
return 0;
}
 2D Clipping
1. Introduction:
A scene is made up of a collection of objects specified in world coordinates

World Coordinates

May 28, 2025 Computer Graphics 37

 2D Clipping
When we display a scene only those objects within a particular window are displayed

Window

wymax

wymin

wxmin World Coordinates wxmax

May 28, 2025 Computer Graphics 38

 2D Clipping
Because drawing things to a display takes time we clip everything outside the window

Window

wymax

wymin

wxmin wxmax

May 28, 2025 World Graphics

Computer Coordinates 39
 2D Clipping
1.1 Definition:
• Clipping is the process of determining which elements of the picture lie inside the
window and are visible.

• By default, the “clip window” is the entire canvas

• not necessary to draw outside the canvas
• for some devices, it is damaging (plotters)
• \
• Sometimes it is convenient to restrict the “clip window” to a smaller portion of the
canvas
• partial canvas redraw for menus, dialog boxes, other obscuration

May 28, 2025 Computer Graphics 40

Clipping algorithm

• Many graphics application programs give the users the impression of

looking through a window at a very large picture.
• To display an enlarged portion of a picture, we must not only apply the
appropriate scaling and translation but also should identify the visible
parts of the picture.
• This is not straightforward. Certain lines may lie partly inside the
visible portion of the picture and partly outside.
• We cannot display each of these lines in its entirety.
 2D Clipping
1.2 Shielding:
• Shielding or exterior clipping is the reverse operation of clipping where window
act as the block used to abstract the view.

• Examples
• A multi view window system
• The design of page layouts in advertising or publishing applications or for adding labels or
design patterns to picture.
• Combining graphs, maps o schematics

May 28, 2025 Computer Graphics 42

2D Clipping

Window

wymax

wymin

wxmin World Coordinates wxmax

May 28, 2025 Computer Graphics 43

 2D Clipping
1.3 Example:
For the image below consider which lines and points should be kept and which ones should
be clipped against the clipping window
P4

Window P2
wymax
P6
P3

P1
P7 P5

P9
P8

wymin

P10

May 28, 2025 wxmin Computer Graphics wxmax 44

 2D Clipping
1.4 Applications:
• Extract part of a defined scene for viewing.
• Drawing operations such as erase, copy, move etc.
• Displaying multi view windows.
• Creating objects using solid modeling techniques.
• Anti-aliasing line segments or object boundaries.
• Identify visible surfaces in 3D views.

May 28, 2025 Computer Graphics 45

2D Clipping
1.5 Types of clipping:
• Three types of clipping techniques are used depending upon when the clipping
operation is performed

a. Analytical clipping
• Clip it before you scan convert it
• used mostly for lines, rectangles, and polygons, where clipping algorithms are
simple and efficient

May 28, 2025 Computer Graphics 46

2D Clipping

b. Scissoring
• Clip it during scan conversion
• a brute force technique
• scan convert the primitive, only write pixels if inside the clipping region
• easy for thick and filled primitives as part of scan line fill
• if primitive is not much larger than clip region, most pixels will fall inside
• can be more efficient than analytical clipping.

May 28, 2025 Computer Graphics 47

2D Clipping

c. Raster Clipping
• Clip it after scan conversion
• render everything onto a temporary canvas and copy the clipping region
• wasteful, but simple and easy,
• often used for text

May 28, 2025 Computer Graphics 48

2D Clipping
Foley and van Dam suggest the following:
• for floating point graphics libraries, try to use analytical clipping
• for integer graphics libraries
• analytical clipping for lines and polygons
• others, do during scan conversion
• sometimes both analytical and raster clipping performed

May 28, 2025 Computer Graphics 49

 2D Clipping
1.6 Levels of clipping:
• Point Clipping
• Line Clipping
• Polygon Clipping
• Area Clipping
• Text Clipping
• Curve Clipping

May 28, 2025 Computer Graphics 50

2D Clipping
1. Introduction
2. Point Clipping
3. Line Clipping
4. Polygon/Area Clipping
5. Text Clipping
6. Curve Clipping
 Point Clipping
• Simple and Easy Clipped
P4

• a point (x,y) is not clipped if: Clipped

Window P2
wxmin ≤ x ≤ wxmax wymax
Clipped
P5
& P7
P1
Points Within the Window are Not Clipped

wymin ≤ y ≤ wymax P9
P8
wymin

• otherwise it is clipped Clipped P10

wxmin wxmax

May 28, 2025 Computer Graphics 52

 2D Clipping
1. Introduction
2. Point Clipping
3. Line Clipping
4. Polygon/Area Clipping
5. Text Clipping
6. Curve Clipping
 Line Clipping
• It is Harder than point clipping
• We first examine the end-points of
each line to see if they are in the ymax

window or not
• Both endpoints inside, line trivially
accepted
• One in and one out, line is partially
inside ymin

• Both outside, might be partially inside

• What about trivial cases?

xmin xmax

May 28, 2025 Computer Graphics 54

Line Clipping
Situation Solution Example

Both end-points inside the

Don’t clip
window

One end-point inside the window,

Must clip
one outside

Both end-points outside the

Don’t know!
window

May 28, 2025 Computer Graphics 55

2D Line Clipping Algorithms
1. Analytical Line Clipping
2. Cohen Sutherland Line Clipping
3. Liang Barsky Line Clipping
Cohen-Sutherland Line Clipping
• An efficient line clipping algorithm
• The key advantage of the algorithm is that it vastly
reduces the number of line intersections that must be
calculated.

Dr. Ivan E. Sutherland co-developed the Cohen-Sutherland

clipping algorithm. Sutherland is a graphics giant and includes

amongst his achievements the invention of the head mounted

display.

Cohen is something of a mystery – can anybody find out who he was?

May 28, 2025 Computer Graphics 57

Cohen-Sutherland Line Clipping
• Two phases Algorithm

Phase I: Identification Phase

All line segments fall into one of the following categories
1. Visible: Both endpoints lies inside
2. Invisible: Line completely lies outside
3. Clipping Candidate: A line neither in category 1 or 2

Phase II: Perform Clipping

Compute intersection for all lines that are candidate for clipping.
May 28, 2025 Computer Graphics 58
 Cohen-Sutherland Line Clipping
Phase I: Identification Phase: World space is divided into regions based on the window
boundaries
• Each region has a unique four bit region code
• Region codes indicate the position of the regions with respect to the window

1001 1000 1010

0000
3 2 1 0
0001 0010
above below right left Window

Region Code Legend 0101 0100 0110

May 28, 2025 Computer Graphics 59
 Cohen-Sutherland Line Clipping
Every end-point is labelled with the appropriate region code

P11 [1010]
P4 [1000]

Window
wymax
P6 [0000]
P3 [0001]

P5 [0000] P12 [0010]

P7 [0001]

P9 [0000]
P8 [0010]
wymin

P10 [0100]
P13 [0101] P14 [0110]

wxmin wxmax

May 28, 2025 Computer Graphics 60

 Cohen-Sutherland Line Clipping
Visible Lines: Lines completely contained within the window boundaries have region
code [0000] for both end-points so are not clipped

P11 [1010]
P4 [1000]

Window
wymax
P6 [0000]
P3 [0001]

P5 [0000] P12 [0010]

P7 [0001]

P9 [0000]
P8 [0010]
wymin

P10 [0100]
P13 [0101] P14 [0110]

May 28, 2025 wxmin Computer Graphics wxmax 61

 Cohen-Sutherland Line Clipping
Invisible Lines: Any line with a common set bit in the region codes of both end-points
can be clipped completely
– The AND operation can efficiently check this
– Non Zero means Invisible
P11 [1010]
P4 [1000]

Window
wymax
P6 [0000]
P3 [0001]

P5 [0000] P12 [0010]

P7 [0001]

P9 [0000]
P8 [0010]
wymin

P10 [0100]
P13 [0101] P14 [0110]

May 28, 2025 wxmin Computer Graphics wxmax 62

 Cohen-Sutherland Line Clipping
Clipping Candidates: Lines that cannot be identified as completely inside or outside
the window may or may not cross the window interior. These lines are processed in
Phase II.
• If AND operation result in 0 the line is candidate for clipping

P11 [1010]
P4 [1000]

Window
wymax
P6 [0000]
P3 [0001]

P5 [0000] P12 [0010]

P7 [0001]

P9 [0000]
P8 [0010]
wymin

P10 [0100]
P13 [0101] P14 [0110]

May 28, 2025 wxmin Computer Graphics wxmax 63

 Cohen-Sutherland Line Clipping
Assigning Codes
• Let point (x,y) is be given code b3b2b1b0: P11 [1010]
P4 [1000]

bit 3 = 1 if wymax - y ≤0 Window

wymax

bit 2 = 1 if y - wymin ≤ 0 P3 [0001]

P6 [0000]

P5 [0000] P12 [0010]

bit 1 = 1 if wxmax - x ≤0 P7 [0001]

P9 [0000] P8 [0010]
wymin
bit 0 = 1 if x - wxmin ≤ 0 P10 [0100]
P13 [0101] P14 [0110]

wxmin wxmax

May 28, 2025 Computer Graphics 64

Cohen-Sutherland Clipping Algorithm
Phase II: Clipping Phase: Lines that are in category 3 are now processed as
follows:
• Compare an end-point outside the window to a boundary (choose any order in
which to consider boundaries e.g. left, right, bottom, top) and determine how
much can be discarded
• If the remainder of the line is entirely inside or outside the window, retain it or
clip it respectively
• Otherwise, compare the remainder of the line against the other window
boundaries
• Continue until the line is either discarded or a segment inside the window is
found

May 28, 2025 Computer Graphics 65

Cohen-Sutherland Line Clipping
• Intersection points with the window boundaries are calculated using the line-
equation parameters
• Consider a line with the end-points (x1, y1) and (x2, y2)
• The y-coordinate of an intersection with a vertical window boundary can be
calculated using:
y = y1 + m (xboundary - x1)
where xboundary can be set to either wxmin or wxmax
• The x-coordinate of an intersection with a horizontal window boundary can be
calculated using:
x = x1 + (yboundary - y1) / m
where yboundary can be set to either wymin or wymax
May 28, 2025 Computer Graphics 66
Cohen-Sutherland Line Clipping
• We can use the region codes to determine which window boundaries should be
considered for intersection
• To check if a line crosses a particular boundary we compare the appropriate
bits in the region codes of its end-points
• If one of these is a 1 and the other is a 0 then the line crosses the boundary.

May 28, 2025 Computer Graphics 67

 Cohen-Sutherland Line Clipping
Example1: Consider the line P9 to P10 below
• Start at P10 Window

• From the region codes wymax

of the two end-points we

know the line doesn’t
cross the left or right P9 [0000]

boundary wymin
P10’ [0000]

• Calculate the intersection P10 [0100]

of the line with the bottom boundary
to generate point P10’ wxmin wxmax

• The line P9 to P10’ is completely inside the window so is retained

May 28, 2025 Computer Graphics 68

 Cohen-Sutherland Line Clipping
Example 2: Consider the line P3 to P4 below
• Start at P4 P4’ [1001]
P4 [1000]

• From the region codes wymax

Window

of the two end-points P3 [0001]

we know the line

crosses the left
boundary so calculate
wymin
the intersection point to
generate P4’
wxmin wxmax
• The line P3 to P4’ is completely outside the window so is clipped

May 28, 2025 Computer Graphics 69

Cohen-Sutherland Line Clipping
Example 3: Consider the line P7 to P8 below
• Start at P7
Window
• From the two region wymax

codes of the two

end-points we know P7’ [0000]

the line crosses the P7 [0001]

P8’ [0000]
P8 [0010]

left boundary so wymin

calculate the
intersection point to
generate P7’ wxmin wxmax

May 28, 2025 Computer Graphics 70

Cohen-Sutherland Line Clipping
Example 4: Consider the line P7’ to P8
• Start at P8
Window
• Calculate the wymax

intersection with the

right boundary to P7’ [0000]

generate P8’ P7 [0001] P8 [0010]

P8’ [0000]

• P7’ to P8’ is inside wymin

the window so is
retained
wxmin wxmax

May 28, 2025 Computer Graphics 71

Cohen-Sutherland Line Clipping
Mid-Point Subdivision Method
• Algorithm
1. Initialise the list of lines to all lines
2. Classify lines as in Phase I
i. Assign 4 point bit codes to both end points a 3a2a1a0 and b3b2b1b0
ii. If (a3a2a1a0 = b3b2b1b0 = 0 )Line in category 1
iii. If (a3a2a1a0)AND (b3b2b1b0 ) # 0 ) Line in category 2
iv. If (a3a2a1a0)AND (b3b2b1b0 ) = 0 ) Line in category 3
3. Display all lines from the list in category 1 and remove;
4. Delete all lines from the list in category 2 as they are invisible;
5. Divide all lines of category 3 are into two smaller segments at mid-point (xm,ym) where xm = (x1
+x2)/2 and ym = (y1 +y2)/2
6. Remove the original line from list and enter its two newly created segments.
7. Repeat step 2-5 until list is null.

May 28, 2025 Computer Graphics 72

Cohen-Sutherland Line Clipping

Window
wymax

wymin

wxmin wxmax
May 28, 2025 Computer Graphics 73
Cohen-Sutherland Line Clipping
Mid-Point Subdivision Method

• Integer Version
• Fast as Division by 2 can be performed by simple shift right operation
• For NxN max dimension of line number of subdivisions required log2 N.
• Thus a 1024x1024 raster display require just 10 subdivisions………

May 28, 2025 Computer Graphics 75

2D Clipping
1. Introduction
2. Point Clipping
3. Line Clipping
4. Polygon / Area Clipping
5. Text Clipping
6. Curve Clipping
Polygon Clipping
• Note the difference between clipping lines and polygons:

NOTE!

May 28, 2025 Computer Graphics 78

Polygon Clipping
• Some difficulties:
• Maintaining correct inside/outside
• Variable number of vertices
• Handle screen corners
correctly

May 28, 2025 Computer Graphics 79

 Sutherland-Hodgman Area Clipping
• A technique for clipping areas
developed by Sutherland & Sutherland

Hodgman
turns up

again. This

• Put simply the polygon is clipped time with

by comparing it against each Gary Hodgman with whom he worked at the first

boundary in turn ever graphics company Evans & Sutherland

Original Area Clip Left Clip Right Clip Top Clip Bottom

May 28, 2025 Computer Graphics 80

Sutherland-Hodgeman Polygon Clipping

1. Basic Concept:
• Simplify via separation
• Clip whole polygon against one edge
• Repeat with output for other 3 edges
• Similar for 3D
• You can create intermediate vertices that get thrown out

May 28, 2025 Computer Graphics 81

Sutherland-Hodgeman Polygon Clipping

• Example

Start Left Right Bottom Top

Note that the point one of the points added when clipping

on the right gets removed when we clip with bottom

May 28, 2025 Computer Graphics 82

Sutherland-Hodgeman Polygon Clipping

2. Algorithm:
Let (P1, P2,…. PN) be the vertex list of the Polygon to be clipped and E be the edge
of +vely oriented, convex clipping window.

We clip each edge of the polygon in turn against each window edge E, forming a
new polygon whose vertices are determined as follows:

May 28, 2025 Computer Graphics 83

Sutherland-Hodgeman Polygon Clipping

Four cases
1. Inside: If both Pi-1 and Pi are to the left of window edge vertex then Pi is placed on the
output vertex list.
2. Entering: If Pi-1 is to the right of window edge and Pi is to the left of window edge
vertex then intersection (I) of Pi-1 Pi with edge E and Pi are placed on the output vertex
list.
3. Leaving: If Pi-1 is to the left of window edge and Pi is to the right of window edge
vertex then only intersection (I) of Pi-1 Pi with edge E is placed on the output vertex list.
4. Outside: If both Pi-1 and Pi are to the right of window edge nothing is placed on the
output vertex list.

May 28, 2025 Computer Graphics 84

Sutherland-Hodgeman Polygon Clipping
Creating New Vertex List

Pi-1
Pi
Pi
Pi-1

Pi Pi-1

Pi
Pi-1
in  in
out  in in  out out  out
save ending vert save new clip vert save new clip vert save nothing

Inside and ending vert Leaving Outside

(1 output) Entering (1 output) (0 output)

(2 outputs)
May 28, 2025 Computer Graphics 85
Sutherland-Hodgman Polygon Clipping

• Each example shows the point being S

processed (P) and the previous point

(S) P
I
S

Save Point P Save Point I

• Saved points define area clipped to

the boundary in question P S

I P

No Points Saved Save Points I & P

May 28, 2025 Computer Graphics 86
 START

Flow Chart INPUT VERTEX LIST

(P1, P2........, PN)

FOR i =1 TO (N-1) DO

YES IF PiPi+1 NO
INTERSECT E ?

COMPUTE I

OUTPUT I IN VERTEX LIST

YES IF Pi TO LEFT OF NO

E?

OUTPUT Pi IN VERTEX LIST

Special case for first Vertex
i = i+1

May 28, 2025 Computer Graphics 87

Flow Chart
Special case for first Vertex YES IF PNP0 NO
INTERSECT E ?

COMPUTE I

OUTPUT I IN VERTEX LIST

END

YOU CAN ALSO APPEND AN ADDITIONAL VERTEX PN+1 = P1 AND AVOID SPECIAL CASE FOR FIRST VERTEX

May 28, 2025 Computer Graphics 88

Sutherland-Hodgeman Polygon Clipping
Inside/Outside Test:
Let P(x,y) be the polygon vertex which is to be tested against edge E defined form
A(x1, y1) to B(x2, y2). Point P is to be said to the left (inside) of E or AB iff

y  y1 x  x1
 0
y 2  y1 x2  x1
or C = (x2 – x1) (y – y1) – (y2 – y1)(x – x1) > 0

otherwise it is said to be the right/Outside of edge E

May 28, 2025 Computer Graphics 89

Weiler-Atherton Polygon Clipping
• Problem with Sutherland-Hodgeman:
• Concavities can end up linked Remember

me?

• Weiler-Atherton creates separate polygons in such cases

May 28, 2025 Computer Graphics 90

Weiler-Atherton Polygon Clipping
• Example

add clip pt. add end pt. add clip pt. follow clip edge until

and end pt. cache old dir. a) new crossing

found

b) reach pt. already

added
May 28, 2025 Computer Graphics 91
Weiler-Atherton Polygon Clipping
• Example (cont)

continue from add clip pt. add clip pt. follow clip edge until

cached location and end pt. cache dir. a) new crossing

found

b) reach pt. already

added
May 28, 2025 Computer Graphics 92
Weiler-Atherton Polygon Clipping
• Example (concluded)

continue from nothing added Final result:

cached location finished Two unconnected

polygons

May 28, 2025 Computer Graphics 93

 Weiler-Atherton Polygon Clipping
• Difficulties:
• What if the polygon re-crosses edge?

• How many “cached” crosses?

• Your geometry step must be able to create new polygons

• Instead of 1-in-1-out

May 28, 2025 Computer Graphics 94

Other Area Clipping Concerns
• Clipping concave areas can be a little more tricky as often superfluous lines must be
removed

Window Window Window Window

• Clipping curves requires more work

• For circles we must find the two intersection points on the window boundary
May 28, 2025 Computer Graphics 95
2D Clipping
1. Introduction
2. Point Clipping
3. Line Clipping
4. Polygon/Area Clipping
5. Text Clipping
6. Curve Clipping
 Text Clipping
Text clipping relies on the concept of bounding rectangle

TYPES
1. All or None String Clipping
2. All or None Character Clipping
3. Component Character Clipping

May 28, 2025 Computer Graphics 97

 Text Clipping
1. All or None String Clipping
• In this scheme, if all of the string is inside window, we clip it, otherwise the string is
discarded. This is the fastest method.
• The procedure is implemented by consider a bounding rectangle around the text pattern.
The boundary positions are compared to the window boundaries. In case of overlapping
the string is rejected.

STRING 5

STRI NG 1
G 2
RI N
ST

STRING 3

STRING 4 STRING 4

May 28, 2025 Computer Graphics 98

 Text Clipping
2. All or None Character Clipping
• In this scheme, we discard only those characters that are not completely inside window.
• Boundary limits of individual characters are compared against window. In case of
overlapping the character is rejected.

STRING 5

STRI NG 1 NG 1
G2
RI N RI
ST ST

STRING 3 TRING 3

STRING 4 STRING 4

May 28, 2025 Computer Graphics 99

 Text Clipping
3. Component Character Clipping
• Characters are treated like graphic objects.
• Bit Mapped Fonts : Point Clipping
• Outlined Fonts : Line/Curve Clipping
• In case of overlapping the part of the character inside is displayed and the outside portion
of the character is rejected.

STRING 5

STRI NG 1 NG 1
G2
RI N
ST RI N
ST
STRING 3 STRING 3

STRING 4 STRING 4

May 28, 2025 Computer Graphics 100

2D Clipping
1. Introduction
2. Point Clipping
3. Line Clipping
4. Polygon/Area Clipping
5. Text Clipping
6. Curve Clipping
Curve Clipping
• Areas with curved boundaries can be clipped with methods similar to line and
polygon clipping.
• Curve clipping requires more processing as it involve non linear equations.
• Bounding Rectangles are used to test for overlap with rectangular clip window.

May 28, 2025 Computer Graphics 102

Curve Clipping
• If bounding rectangle is completely inside the object/curve is saved.

• If bounding rectangle is completely outside the object/curve is discarded.

May 28, 2025 Computer Graphics 103

Curve Clipping
• If both the above tests fails we use other computation saving approaches depending
upon type of object
• Circle: Use coordinate extent of individual quadrant, then octant if required.
• Ellipse: Use coordinate extent of individual quadrant.
• Point: Use point clipping

May 28, 2025 Computer Graphics 104

Any Question !
• The correct way to select visible information for display is to use
clipping, a process which divides each element of the picture in to its
visible and invisible portions, allowing the invisible portion to be
discarded.
• Clipping can be applied to a variety of different types of picture
elements such as pointer, lines, curves, text character and polygons.
POINT CLlPPING

• Assuming that the clip window is a rectangle in standard position, we

save a point P = (x, y) for display if the following inequalities are
satisfied:
• Where the edges of the clip window (XWmin, XWmax, YWmin ,
YWmax) can be either the world-coordinate window boundaries or
viewport boundaries.
• If any one of these four inequalities is not satisfied, the point is clipped
(not saved for display).
• Although point clipping is applied less often than line or polygon
clipping, some applications may require a point clipping procedure.
LINE CLIPPING

• Lines intersecting a rectangular clip region are always clipped to a

single line segment. Figure shows examples of clipped lines.
• Before clipping After clipping
COHEN – SUTHERLAND LINE
CLIPPING ALGORITHM
• From the above figure, those lines that are partly invisible are divided
by the screen boundary in to one or more invisible portions but in to
only one visible segment.
• Visible segment of a straight line can be determined by computing its
2 endpoints.
• The Cohen- Sutherland algorithm is designed to find these end points
very rapidly but also to reject even more rapidly any line that is clearly
invisible.
• This makes it a very good algorithm for clipping pictures that are
much larger than the screen.
 Left Right

Above

Each code follows: ABRL pattern

Viewing Window

Below
• The algorithm has 2 parts.
• The first part determines whether the line lies entirely on the screen, then it
will be accepted and if not whether the line can be rejected if lying entirely
off the screen.
• If it satisfies none of these 2 tests, then the line is divided in to 2 parts and
these 2 tests are applied to each part.
• The algorithm depends on the fact that every line is entirely on the screen.
Or can be divided so that one part can be rejected.
• We are extending the edges of the screen so that they divide the space
occupied by the unclipped picture in to 9 regions.
• Each of these regions has a 4 bit code.
Consider line AB, the 4 bit out code for A is 0001
B is 0000
CD C is 0000
D is 0000
EF E is 0101
F is 0010
GH G is 0101
H is 0100
• If the logical AND of the 2 codes is not zero, then the line will be
entirely off the screen.
• For example, for line GH, the logical AND of the 2 end points is 0100. it is not
equal to zero, so the line is completely out of the screen.
• If the 4 bit codes for both endpoints are zero, the line lies entirely on
the screen.
• For example, for line CD, the 4 bit codes for both endpoints C, D are 0000. So
the line lies entirely inside the screen.
• If both these tests are not successful, it means that a part of a line is
inside and a part is outside the screen.
• For example line AB. Then such lines are subdivided. A simple method
of sub division is to find the point of intersection of the line with one
edge of the screen and to discard that part of the line that lies off the
screen.
• The line AB could be subdivided at C and the portion AC is discarded.
We now have the line BC.
• For line BC, we apply the same tests. The line cannot be rejected, so
we again subdivide it at point D. the resulting line BD is entirely on the
screen.
• The algorithm works as follows.
• We compute the out codes of both endpoints and check for trivial acceptance
and rejection.
• If both tests are not successful, we find an end point that lies outside and test
the out code to find the edge that is crossed and to determine the a
corresponding intersection point.
• We can clip off the line segment from the outside end point to the
intersection point by replacing the outside end point with the intersection
point and compute the outside of this new end point to prepare for the next
iteration.
• For example consider the line segment AD
• Point A has out code 0000 and point D has out code 1001.
• The line AD cannot be accepted and cannot be rejected.
• Therefore the algorithm chooses D as the outside point, whose out
code shows that the line crosses the top edge and left edge.
• In our algorithm we choose the top edge of the screen to clip and we
clip AD to AB.
• We compute B‘s out code as 0000.
• In our next iteration, we apply the trivial acceptance/ rejection tests
to AB, and the line is accepted and displayed
• Consider another line EI in the following figure.
• EI requires more iteration.
• The first end point E has out code 0100.
• The algorithm chooses E as the outside point and tests the out code
to find the first edge against which the line is cut is the bottom edge,
where EI is clipped top FI.
• In the second iteration, FI cannot be completely accepted or rejected.
The out code of the first end point, F is 0000, so the algorithm
chooses the outside point I that has out code 1010.
• The first edge clipped against is the top edge, yielding FH.
• H has the out code 0010.
• Then the next iteration results in a clip against the right edge to
FG.
• This is accepted in the final iteration and is displayed.
POLYGON CLIPPING
SUTHERLAND AND HODGMAN POLYGON CLIPPING ALGORITHM

• It uses a divide and conquers strategy.

• It solves a series of simple and identical problems that, when
combined, solve the entire problem.
• The simple problem is to clip a polygon against a single infinite clip
edge.
• Four clip edges, each defining one boundary of the clip rectangle
successively clip a polygon against a clip rectangle.
• There are four possible cases when processing vertices in sequence
around the perimeter of a polygon.
• As each pair of adjacent polygon vertices is passed to a window
boundary clipper, we make the following tests:
(1) If the first vertex is outside the window boundary and the second vertex is
inside, both the intersection point of the polygon edge with the window
boundary and the second vertex are added to the output vertex list.
(2) If both input vertices are inside the window boundary, only the second
vertex is added to the output vertex list.
(3) If the first vertex is inside the window boundary and the second vertex is
outside, only the edge intersection with the window boundary is added to the
output vertex list.
(4) If both input vertices are outside the window boundary, nothing is added to
the output list.
• These four cases are illustrated in Figure above for successive pairs of
polygon vertices.
• Once all vertices have been processed for one clip window boundary,
the output list of vertices is clipped against the next window
boundary.
 Right
We will clip each side of the triangle from the left ,right , bottom
top And top clipping window
1) For left side clipping window the output is :
• v1v2v2
v2 • v2v3v2’
v2’ • v3v1 v3’v1
2) For right side clipping window the output is :
• no change in the output
v2’’
v3 3) For bottom side clipping window the output is :
v1’ Bottom • v1v2v1’v2
v3’
• v2v2’ v2’
left • v2’v3’ v2’’
v1 • V3’v1 no return value
4) 3) For top side clipping window the output is :
• no change in the output