CSCE 441 Computer Graphics:
Clipping Lines
Jinxiang Chai
1
OpenGL Geometric Primitives

All geometric primitives are specified by
vertices
GL_POINTS
GL_LINES
GL_LINE_STRIP
GL_LINE_LOOP
GL_POLYGON
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_QUADS GL_QUAD_STRIP
2/135
Why Clip?

We do not want to waste time drawing
objects that are outside of viewing window
(or clipping window)
6/135
Clipping Points

Given a point (x, y) and clipping window
(xmin, ymin), (xmax, ymax), determine if the point
should be drawn
(xmax,ymax)
(x,y)
(xmin,ymin)
7/135
Clipping Points

Given a point (x, y) and clipping window
(xmin, ymin), (xmax, ymax), determine if the point
should be drawn
(xmax,ymax)
(x,y)
(xmin,ymin)
xmin=<x<=xmax?
ymin=<y<=ymax?
8/135
Clipping Points

Given a point (x, y) and clipping window
(xmin, ymin), (xmax, ymax), determine if the point
should be drawn
(xmax,ymax)
(x1,y1)
(xmin,ymin)
(x2,y2)
xmin=<x<=xmax?
ymin=<y<=ymax?
9/135
Clipping Points

Given a point (x, y) and clipping window
(xmin, ymin), (xmax, ymax), determine if the point
should be drawn
(xmax,ymax)
(x1,y1)
(xmin,ymin)
(x2,y2)
xmin=<x1<=xmax Yes
ymin=<y1<=ymax Yes
10/135
Clipping Points

Given a point (x, y) and clipping window
(xmin, ymin), (xmax, ymax), determine if the point
should be drawn
(xmax,ymax)
(x1,y1)
(xmin,ymin)
(x2,y2)
xmin=<x2<=xmax No
ymin=<y2<=ymax Yes
11/135
Clipping Lines
P6
P3
P4
P10
P8
P9
P5
P7
P2
P1
12/135
Clipping Lines
P̂6
P̂10
P̂9
P8
P5
P7
13/135
Clipping Lines

Given a line with end-points (x0, y0), (x1, y1)
and clipping window (xmin, ymin), (xmax, ymax),
determine if line should be drawn and clipped
end-points of line to draw.
(xmax,ymax)
(x1, y1)
(x0, y0)
(xmin,ymin)
14/135
Clipping Lines
P6
P3
P4
P10
P8
P9
P5
P7
P2
P1
15/135
Outline
Simple line clipping algorithm
 Cohen-Sutherland
 Liang-Barsky
 Required readings: HB 8-5, 8-6, 8-7 and 8-9

16/135
Clipping Lines
P6
P3
P4
P10
P8
P9
P5
P7
P2
P1
17/135
Clipping Lines – Simple Algorithm
If both end-points inside rectangle, draw line
 If one end-point outside,
intersect line with all edges of rectangle
clip that point and repeat test

18/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
19/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
20/135
Intersecting Two Lines
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
( x2 , y2 )
21/135
Intersecting Two Lines
x(t )  x0  ( x1  x0 )t
y(t )  y0  ( y1  y0 )t
0  t 1
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
( x2 , y2 )
22/135
Intersecting Two Lines
x(t )  x0  ( x1  x0 )t
y(t )  y0  ( y1  y0 )t
x(0)  x0
y (0)  y0
x(1)  x1
y(1)  y1
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
( x2 , y2 )
23/135
Intersecting Two Lines
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
x0  ( x1  x0 )t  x2  ( x3  x2 ) s
y0  ( y1  y0 )t  y2  ( y3  y2 )s
( x2 , y2 )
24/135
Intersecting Two Lines
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
 x1  x0

 y1  y0
x2  x3  t   x2  x0 
   

y2  y3  s   y2  y0 
( x2 , y2 )
25/135
Intersecting Two Lines
( x3 , y3 )
( x1 , y1 )
( x0 , y0 )
 x1  x0

 y1  y0
x2  x3  t   x2  x0 
   

y2  y3  s   y2  y0 
( x2 , y2 )
Substitute t or s back into equation to find intersection
26/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
27/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
28/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
29/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( x0 , y0 )
( xmin , ymin )
30/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( xˆ0 , yˆ 0 )
( xmin , ymin )
31/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( xˆ0 , yˆ 0 )
( xmin , ymin )
32/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( xˆ0 , yˆ 0 )
( xmin , ymin )
33/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x1 , y1 )
( xˆ0 , yˆ 0 )
( xmin , ymin )
34/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x0 , y0 )
( xmin , ymin )
( x1 , y1 )
35/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( x0 , y0 )
( xmin , ymin )
( x1 , y1 )
36/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( xˆ0 , yˆ 0 )
( xmin , ymin )
( x1 , y1 )
37/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( xˆ0 , yˆ 0 )
( xmin , ymin )
( x1 , y1 )
38/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( xˆ0 , yˆ 0 )
( xmin , ymin )
( x1 , y1 )
39/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( xˆ0 , yˆ 0 )
( xmin , ymin )
( xˆ1 , yˆ1 )
40/135
Clipping Lines – Simple Algorithm
( xmax , ymax )
( xˆ0 , yˆ 0 )
( xmin , ymin )
( xˆ1 , yˆ1 )
41/135
Clipping Lines – Simple Algorithm
Lots of intersection tests makes algorithm
expensive
 Complicated tests to determine if intersecting
rectangle


Is there a better way?
42/135
Trivial Accepts
Big Optimization: trivial accepts/rejects
 How can we quickly decide whether line
segment is entirely inside window
 Answer: test both endpoints

43/135
Trivial Accepts
Big Optimization: trivial accepts/rejects
 How can we quickly decide whether line
segment is entirely inside window
 Answer: test both endpoints

44/135
Trivial Rejects
How can we know a line is outside of the
window
 Answer:

45/135
Trivial Rejects
How can we know a line is outside of the
window
 Answer:

Wrong side
46/135
Trivial Rejects
How can we know a line is outside of the
window
 Answer: both endpoints on wrong side of
same edge, can trivially reject the line

47/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

48/135
Cohen-Sutherland Algorithm
Every end point is assigned to a four-digit
binary value, i.e. Region code
 Each bit position indicates whether the point
is inside or outside of a specific window
edges

bit 4 bit 3 bit 2 bit 1
top
bottom right left
49/135
Cohen-Sutherland Algorithm
bit 4 bit 3 bit 2 bit 1
top
bottom right left
top
right
left
Region code?
bottom
50/135
Cohen-Sutherland Algorithm
bit 4 bit 3 bit 2 bit 1
top
bottom right left
top
right
left
bottom
0010
?
51/135
Cohen-Sutherland Algorithm
bit 4 bit 3 bit 2 bit 1
top
bottom right left
top
right
left
bottom
0010
0100
52/135
Cohen-Sutherland Algorithm
1001
1000
1010
0001
0000
0010
0101
0100
0110
53/135
Cohen-Sutherland Algorithm
1001
1000
1010
( x1 , y1 )
0001
0000
0010
0100
0110
( x0 , y0 )
0101
54/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject because both
points located the wrong side of one edge.
 If c0  c1  0 , trivially accept because both
points are not in the wrong side of any edge.
 Otherwise reduce to trivial cases by splitting
into two segments

55/135
Cohen-Sutherland Algorithm

Bitwise and
0010 1011  ?
56/135
Cohen-Sutherland Algorithm

Bitwise and
0010 1011  0010

Bitwise or
0010  1011  ?
57/135
Cohen-Sutherland Algorithm

Bitwise and
0010 1011  0010

Bitwise or
0010 1011  1011
58/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

59/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

1001
1000
1010
0001
0000
0010
0101
0100
0110
Line is outside the
window! reject
60/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

1001
1000
1010
0001
0000
0010
0101
0100
0110
Line is outside the
window! reject
61/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

1001
1000
1010
0001
0000
0010
0101
0100
0110
Line is inside the
window! draw
62/135
Cohen-Sutherland Algorithm
Classify p0, p1 using region codes c0, c1
 If c0  c1  0 , trivially reject
 If c0  c1  0 , trivially accept
 Otherwise reduce to trivial cases by splitting
into two segments

1001
1000
1010
0001
0000
0010
0101
0100
0110
63/135
Window Intersection
(x1, y1), (x2, y2) intersect with vertical edge at xright
 yintersect = y1 + m(xright – x1)
• where m=(y2-y1)/(x2-x1)
(x1, y1), (x2, y2) intersect with horizontal edge at
ybottom
 xintersect = x1 + (ybottom – y1)/m
• where m=(y2-y1)/(x2-x1)
64/135
Example 1
1001
1000
1010
0001
0000
0010
0101
0100
0110
65/135
Example 1
1001
1000
1010
0001
0000
0010
0101
0100
0110
66/135
Example 1
1001
1000
1010
0001
0000
0010
0101
0100
0110
67/135
Example 1
1001
1000
1010
0001
0000
0010
0101
0100
0110
68/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
69/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
70/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
71/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
72/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
73/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
74/135
Example 2
1001
1000
1010
0001
0000
0010
0101
0100
0110
75/135
Example 3
1001
1000
1010
0001
0000
0010
0101
0100
0110
76/135
Example 3
1001
1000
1010
0001
0000
0010
0101
0100
0110
77/135
Example 3
1001
1000
1010
0001
0000
0010
0101
0100
0110
78/135
Example 3
1001
1000
1010
0001
0000
0010
0101
0100
0110
79/135
Cohen-Sutherland Algorithm

Extends easily to 3D line clipping
 27 regions
 6 bits
80/135
Cohen-Sutherland Algorithm

Use region codes to quickly eliminate/include
lines


Must compute viewing window clipping of
remaining lines


Best algorithm when trivial accepts/rejects are
common
Non-trivial clipping cost
More efficient algorithms exist
81/135
Liang-Barsky Algorithm



Parametric definition of a line:
 x = x1 + uΔx
 y = y1 + uΔy
 Δx = (x2-x1), Δy = (y2-y1), 0<=u<=1
Lines are oriented: classify lines as moving inside to
out or outside to in
Goal: find range of u for which x and y both inside
the viewing window
82/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
(-.5,-.5)
83/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
(-.5,-.5)
84/135
Liang-Barsky Algorithm



For lines starting outside of boundary, update its starting
point (u1)
For lines starting inside of boundary, update end point (u2)
For lines paralleling the boundaries and outside window,
reject it.
85/135
Liang-Barsky Algorithm



For lines starting outside of boundary, update its starting
point (u1)
For lines starting inside of boundary, update end point (u2)
For lines paralleling the boundaries and outside window,
reject it.
86/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin)
 2:
u*(Δx) <= (xmax – x1)
 3:
u*(-Δy) <= (y1 – ymin)
 4:
u*(Δy) <= (ymax – y1)
 gen:
u*(pk) <= (qk), k=1,2,3,4
87/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin) // left edge
 2:
u*(Δx) <= (xmax – x1)
 3:
u*(-Δy) <= (y1 – ymin)
 4:
u*(Δy) <= (ymax – y1)
 gen:
u*(pk) <= (qk), k=1,2,3,4
88/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin)
 2:
u*(Δx) <= (xmax – x1) // right edge
 3:
u*(-Δy) <= (y1 – ymin)
 4:
u*(Δy) <= (ymax – y1)
 gen:
u*(pk) <= (qk), k=1,2,3,4
89/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin)
 2:
u*(Δx) <= (xmax – x1)
 3:
u*(-Δy) <= (y1 – ymin) // bottom edge
 4:
u*(Δy) <= (ymax – y1)
 gen:
u*(pk) <= (qk), k=1,2,3,4
90/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin)
 2:
u*(Δx) <= (xmax – x1)
 3:
u*(-Δy) <= (y1 – ymin)
 4:
u*(Δy) <= (ymax – y1) // top edge
 gen:
u*(pk) <= (qk), k=1,2,3,4
91/135
Liang-Barsky Algorithm


Mathematically:
 xmin <= x1 + uΔx <= xmax
 ymin <= y1 + uΔy <= ymax
Rearranged
 1:
u*(-Δx) <= (x1 – xmin)
 2:
u*(Δx) <= (xmax – x1)
 3:
u*(-Δy) <= (y1 – ymin)
 4:
u*(Δy) <= (ymax – y1)
 Gen:
u*(pk) <= (qk), k=1,2,3,4
92/135
Liang-Barsky Algorithm

Rules:
1) pk = 0: the line is parallel to boundaries
 If for that same k, qk < 0, it’s outside
 Otherwise it’s inside
2) pk < 0: the line starts outside this boundary
 rk = qk/pk
 u1 = max(0, rk, u1) /**update starting point**/
 pk > 0: the line starts inside the boundary
 rk = qk/pk
 u2 = min(1, rk, u2) /** update end point**/
 If u1 > u2, the line is completely outside
93/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
(-.5,-.5)
94/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p1 = -Δx =-2.5<0
q1 = (x1-xmin)=-.5
r1 = q1/p1=0.2
95/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
line starts outside this boundary
p1 = -Δx =-2.5<0
q1 = (x1-xmin)=-.5
r1 = q1/p1=0.2
96/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p1 = -Δx =-2.5<0
q1 = (x1-xmin)=-.5
r1 = q1/p1=0.2
97/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p1 = -Δx =-2.5<0
q1 = (x1-xmin)=-.5
r1 = q1/p1=0.2
98/135
Liang-Barsky Algorithm

Current clipped line (u1=0,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
u1 = max(0, r1, u1)
p1 = -Δx =-2.5<0
q1 = (x1-xmin)=-.5
r1 = q1/p1=0.2
99/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=1)
(2,1)
(-.5,-.5)
u1<u2?
- yes: continue
- no: the line is completely outside window
100/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=1)
(2,1)
(-.5,-.5)
101/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p2 = Δx =2.5>0
q2 = (xmax-x1)=1.5
r2 = q2/p2=0.6
102/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=1)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
u2 = min(1, r2, u2)
p2 = Δx =2.5>0
q2 = (xmax-x1)=1.5
r2 = q2/p2=0.6
103/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p2 = Δx =2.5>0
q2 = (xmax-x1)=1.5
r2 = q2/p2=0.6
104/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=0.6)
(2,1)
(-.5,-.5)
u1<u2?
- yes: continue
- no: the line is completely outside window
105/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p3 = -Δy =-1.5<0
q3 = (y1-ymin)=0.5
r3 = q3/p3=0.333
106/135
Liang-Barsky Algorithm

Current clipped line (u1=0.2,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
u1 = max(0, r3, u1)
p3 = -Δy =-1.5<0
q3 = (y1-ymin)=0.5
r3 = q3/p3=0.333
107/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p3 = -Δy =-1.5<0
q3 = (y1-ymin)=0.5
r3 = q3/p3=0.333
108/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
(-.5,-.5)
109/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p3 = -Δy =-1.5<0
q3 = (y1-ymin)=0.5
r3 = q3/p3=0.333
110/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
p4 = Δy =1.5>0
q4 = (ymax-y1)=1.5
r4 = q4/p4=1
111/135
Liang-Barsky Algorithm

Current clipped line (u1=0.333,u2=0.6)
(2,1)
Δx = (x2-x1)=2.5
Δy = (y2-y1)=1.5
(-.5,-.5)
u2 = min(1, r4, u2)
p4 = Δy =1.5>0
q4 = (ymax-y1)=1.5
r4 = q4/p4=1
112/135
Liang-Barsky Algorithm

Check the left edge (u1=0.333,u2=0.6)
(2,1)
u1<u2
(-.5,-.5)
xnew1=x1+Δx*u1
ynew1=y1+Δy*u1
xnew2=x2+Δx*u2
ynew2=y2+Δy*u2
113/135
Liang-Barsky Algorithm

Faster than Cohen-Sutherland
Extension to 3D is easy
- Parametric representation for 3D lines
- Compute u1,u2 based on the intersection
between line and plane

114/135
Comparison

Cohen-Sutherland
Repeated clipping is expensive
 Best used when trivial acceptance and rejection is
possible for most lines


Liang-Barsky
Computation of t-intersections is cheap (only one
division)
 Computation of (x,y) clip points is only done
once
 Algorithm doesn’t consider trivial accepts/rejects
 Best when many lines must be clipped

115/135
Curve Clipping
116/135
Curve Clipping
117/135
Curve Clipping

Approximate a curve using a set of straightline segments

Apply line clipping for curve clipping
118/135
Next Lecture

Polygon fill-area clipping
119/135
Next Lecture

Polygon fill-area clipping
120/135