SI23
Introduction to Computer
Graphics
Lecture 9 – Clipping
Si23_03
9.1
Clipping



Si23_03
Fundamental operation in computer
graphics
Extracts a portion of graphical data we
wish to see
Needs to be fast, so often
implemented in hardware
9.2
Clipping Points to a Window
Here a simple test can be applied:
ymax
Q.
P.
ymin
xmin
xmax
(x,y) VISIBLE IF xmin < x < xmax; ymin < y < ymax
Si23_03
9.3
Clipping Lines to a Window
Can we quickly recognise lines which need clipping?
E
B
D
A
H
C
J
F
G
I
Si23_03
9.4
Clipping to a Window
 Looking at end-points gives us a quick
classification:
– Both ends visible => line visible (AB)
– One end visible, other invisible => line
partly visible (CD)
– Both ends invisible:
If both end-points lie to same side of
window edge, line is invisible (EF)
Otherwise, line may be invisible (IJ) or
partially visible (GH)
Si23_03
9.5
Cohen-Sutherland Line
Clipping Algorithm
 Each end-point is coded according to its
position relative to the window
– Four-bit code assigned as follows:
Bit 1
Set if x < xmin
1001
Bit 2
Set if x > xmax
0001
Bit 3
Set if y < ymin
0101
Bit 4
Set if y > ymax
Si23_03
1000
1010
0000
0010
0100
0110
Both end-point codes 0000 => VISIBLE
Logical AND = NOT 0000 => INVISIBLE
Logical AND = 0000 => INVISIBLE or PART VISIBLE
9.6
Cohen-Sutherland Line
Clipping Algorithm
 To clip P1P2:
– Check if P1P2 totally visible or invisible
– If not, for each edge in turn (left/right/
bottom/top):
(i) Is edge crossed ? (if so, the
corresponding bit is set for ONE of the
points, say P1)
(ii) If so, replace P1 with intersection with
edge.
Si23_03
9.7
Example
P1
Clip against
left, right,
bottom, top
boundaries in turn.
P1’
P1: 1001
P2: 0100
P2
Si23_03
x=xmin
First clip to left
edge, giving
P1’P2
9.8
Example
P1’: 1000
P2 : 0100
P1’
P1’’
No need to clip
against right edge
Clip against
bottom gives P1’P2’
P2’
P2
Si23_03
x=xmin
Clip against top
gives P1’’P2’
9.9
Calculating the Intersection
 To calculate intersection of P1P2 with,
say left edge:
P2
Left edge: x = xmin
Line : y - y2 = m (x-x2)
where m = (y2 - y1) / (x2 -x1)
Thus intersection is (xmin, y*)
where y* = y2 + m (xmin - x2)
Si23_03
P1
9.10
Other Line Clippers
 Cohen-Sutherland is efficient for quick
acceptance or rejection of lines.
 Less so when many lines need
clipping.
 Other algorithms are:
– Liang-Barsky
– Nicholl-Lee-Nicholl
see:Hearn and Baker for details
Si23_03
9.11
Ivan Sutherland
Founder figure of
computer graphics
 Sketchpad
developed in 1963
 See:
http://www.sun.com/
960710/feature3/iva
n-profile.html

Si23_03
9.12
Clipping in SVG

There is very powerful clipping support in
SVG
– Elements are clipped against a path
<clipPath id=“clipper”>
<rect x=“50” y=“50” width=“100” height=“100”/>
</clipPath>

Si23_03
The clip path can be more general than
just a rectangle
9.13
Clipping in SVG

This clip path is then associated with
the drawing elements to be clipped,
as part of the style attribute
<g style=“stroke:black;clip-path:url(#clipper)”>
{… drawing elements…}
</g>
Si23_03
9.14
Polygon Clipping
 Basic idea: clip each polygon side but care needed to ensure clipped
polygon is closed.
B
C
A
D
E
Si23_03
F
9.15
Sutherland-Hodgman
Algorithm
 This algorithm clips a polygon against
each edge of window in turn, ALWAYS
keeping the polygon CLOSED
 Points pass through as in a pipeline
INPUT: List of polygon vertices
OUTPUT: List of polygon vertices on visible
side of window edge
Si23_03
9.16
Sutherland-Hodgman
Algorithm
Consider a polygon side:
starting vertex S; end vertex P
and window edge x = xmin.
What vertices are output?
P
xmin
xmin
P
P
xmin
I
S
OUTPUT: Si23_03
xmin
P
I
S
S
I, P
I
S
P
9.17
Example - SutherlandHodgman Algorithm
Take each edge in turn start with left edge
B
Take each point in turn:
C
A
D
E
F
Input: A B C D E F
Si23_03
(i) Input point and call it P
- thus P = A
(ii) If P is first point:
- store as P1
- output if visible (not in
this particular example)
- let S = P
9.18
Example - SutherlandHodgman Algorithm
B
A’
C
A
D
E
(iii) If P not first point,
then if SP crosses window
edge:
- compute intersection I
- output I
output P if visible
(iv) let S = P
F
Input: A B C D E F
Si23_03
Output: A’ B C D E F
9.19
Example - SutherlandHodgman Algorithm
B
A’
C
A
D
G
E
Finally, if some points
have been output, then
if SP1 crosses window
edge:
- compute intersection I
- output I
F
Input: A B C D E F
Si23_03
Output: A’ B C D E F G
9.20
Example - after clipping to left
edge
B
A’
The result of clipping
against the left edge
C
D
G
E
F
Si23_03
9.21
Example - clip against right
edge
B
B
A’
A’
C
D
C
E’
G
D
E
G
E’
E’’
F
INPUT: A’ B C D E F G
Si23_03
E’’
F
OUTPUT: A’ B C D E’ E’’ F G
9.22
Example - clip against bottom
edge
B
B
A’
A’
C
D
G
E’
E’’’
E’’
F’
F
INPUT: A’ B C D E E’ E’’ F G
Si23_03
C
D
G
F’
E’
E’’’
OUTPUT: A’ B C D E’ E’’’ F’ G
9.23
Example - clip against top
edge
A’’
B
B’
A’
A’’
A’
C
D
G
F’
E’
C
D
G
E’’’
INPUT: A’ B C D E E’ E’’’ F’ G
Si23_03
B’
F’
E’
E’’’
OUTPUT: A’ A’’ B’ C D E’ E’’’ F’ G
9.24