Chapter 6
มุมมองใน 2 มิติ (2-D Viewing)
เนื้อหาในบทนี้











6-1 The Two-Dimensional Viewing Pipeline
6-2 The Clipping Window
6-3 Normalization and Viewport Transformations
6-4 OpenGL Two-Dimensional Viewing Functions
6-5 Clipping Algorithms
6-6 Two-Dimensional Point Clipping
6-7 Two-Dimensional Line Clipping
6-8 Polygon Fill-Area Clipping
6-9 Curve Clipping
6-10 Text Clipping
6-11 Summary
6-1 The Two-Dimensional Viewing
Pipeline

World coordinate
Clipping window
ywmax
ywmin
xwmin

World coordinate
xwmax
Clipping
 A procedure that identifies those portions of a picture that lie inside
a specified region
 The specified region is called Clip Window (usually a rectangle)
 Types of clipping: Point Clipping, Line Clipping, Area Clipping,
Curve Clipping, Text Clipping


A section of a two-dimensional scene
that is selected for display is called a
clipping window, because all part of
the scene outside the selected section
are clipped out.
The only part of the scene that show
up on the screen is what is inside the
clipping window.


Objects inside the clipping window
are mapped to the viewport, and it is
the viewport that is then positioned
within the display window.
The clipping window selects what we
want to see; the viewport indicates
where it is to be viewed on the output
device.
Clipping window
Viewport
ywmax
yvmax
ywmin
yvmin
xwmin

World coordinate
xvmin
xwmax

xvmax
Viewport coordinate


By changing the position of a viewport,
we can view objects at different
positions on the display area of an
output device.
By varying the size of viewport, we can
change the size and proportions of
displayed objects.

We achieve zooming effects by
successively mapping different-sized
clipping windows onto a fixed-size
viewport.
Zoom
different-sized Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xvmin
xwmax
different-sized Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xwmax
xvmax
xvmin
xvmax
Zoom
different-sized Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xvmin
xwmax
different-sized Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xwmax
xvmax
xvmin
xvmax

Panning effects are achieved by
moving a fixed-size clipping window
across the various objects in a scene.
Pan
different-position Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xvmin
xwmax
different-position Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xwmax
xvmax
xvmin
xvmax
Pan
different-position Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xvmin
xwmax
different-position Clipping
window
fixed-size Viewport
ywmax
yvmax
ywmin
yvmin
xwmin
xwmax
xvmax
xvmin
xvmax



The mapping of a two-dimensional, worldcoordinate scene description to device
coordinates is called a two-dimensional
viewing transformation.
Clipping is usually performed in normalized
coordinate systems.
This allows us to reduce computations by
concatenating the various transformation
matrices.
2-D viewing-transformation pipeline
MC
Construct worldcoordinate scene
using modelingcoordinate
transformations
WC
Convert
worldcoordinate to
viewing
coordinates
VC
Transform
viewing
coordinates to
normalized
coordinates
NC
Map normalized
coordinates to
device
coordinates
DC
MC = Modeling Coordinate
WC = World Coordinate
1)
ขึ้นรู ป
VC = Viewing Coordinate
NC = Normalized Coordinate
DC = Device Coordinate
2)
ทา clipping
4)
แสดงบนจอภาพ
3) viewport
6-2 The Clipping Window


To achieve a particular viewing effect in an
application program, we could design our
own clipping window with any shape, size,
and orientation we choose.
But clipping a scene using a concave
polygon or a clipping window with nonlinear
boundaries requires more processing than
clipping against a rectangular.


If we want some other shape for a
clipping window, then we must
implement our own clipping and
coordinate-transformation algorithms.
Rectangular clipping windows in
standard position are easily defined by
giving the coordinates of two opposite
corners of each rectangle.
Viewing-coordinate Clipping
Window


A general approach to the twodimensional viewing transformation is
to set up a viewing-coordinate system
within the world-coordinate frame.
This viewing frame provides a
reference for specifying a rectangular
clipping window with any selected
orientation and position.

To obtain a view of the world –coordinate
scene as determined by the clipping
window, we just need to transfer the scene
description to viewing coordinates.

1) We choose an origin for a two-dimensional
viewing-coordinate frame at some world position
P0 = (x0,y0), and we can establish the orientation
using a world vector V that defines the yview
direction.




2) Translate the viewing origin to the world
origin.
3) Rotate the viewing system to align it with the
world frame.
4) calculate the components of unit vectors,
These unit vectors are used to form the 1st and
2nd rows of the rotation matrix R that aligns the
viewing xview yview axes with the world xw yw axes.
y world
y world
Clipping window
y0
Clipping window
y0
x world
x0
x0
x world
y world
y view
M wc,vc  R  T
y0
x0
x view
x world
6-3 Normalization and Viewport
Transformations
แบบที่ 1)



The normalization and window-to-viewport
transformations are combined into one operation.
In this case the viewport coordinates are often
given in the range from 0 to 1 so that the viewport is
positioned within a unit square.
After clipping the unit square containing the
viewport is mapped to the output display device.
แบบที่ 2)


The normalization and clipping routines are
applied before the viewport transformation.
For these systems the viewport boundaries
are specified in scene coordinates relative
to the display-window position.
Mapping the Clipping Window into a
Normalized Viewport

Object descriptions are transformed to
the normalized space using a
transformation that maintains the same
relative placement of a point in the
viewport as it had in the clipping
window.
Normalization Viewport
Clipping window
ywmax
yvmax
(xv,yv)
(xw,yw)
yvmin
ywmin
xwmin

xvmin
xwmax
World coordinate

xvmax
Viewport coordinate
xv  xvmin
xw  xwmin

xvmax  xvmin xwmax  xwmin
….(1)
yv  yvmin
yw  ywmin

yvmax  yvmin ywmax  ywmin
….(2)

Solving expression (1) for the viewport position xv,
xv  xvmin
xw  xwmin

xvmax  xvmin xwmax  xwmin
xv  xvmin
xw  xwmin

( xvmax  xvmin )
xwmax  xwmin
xv  xvmin
xw( xvmax  xvmin )  xwmin ( xvmax  xvmin )

xwmax  xwmin
xv  xvmin
xw( xvmax  xvmin ) xwmin ( xvmax  xvmin )


xwmax  xwmin
xwmax  xwmin
xw( xvmax  xvmin ) xwmin ( xvmax  xvmin )
xv 

 xvmin
xwmax  xwmin
xwmax  xwmin
xv 
xw( xvmax  xvmin ) xwmin ( xvmax  xvmin )

 xvmin
xwmax  xwmin
xwmax  xwmin
  xwmin xvmax  xwmin xvmin xwmax xvmin  xwmin xvmin 
xvmax  xvmin

xv 
xw  

xwmax  xwmin
xwmax  xwmin
xwmax  xwmin


  xwmin xvmax  xwmin xvmin  xwmax xvmin  xwmin xvmin 
xvmax  xvmin

xv 
xw  
xwmax  xwmin
xwmax  xwmin


 xwmax xvmin  xwmin xvmax 
xvmax  xvmin

xv 
xw  
xwmax  xwmin
xwmax  xwmin


xv  sx xw  t x
โดย
xvmax  xvmin
sx 
xwmax  xwmin
และ
xwmax xvmin  xwmin xvmax
tx 
xwmax  xwmin

In the same way, we have
yv  s y yw  t y

where the y scaling factor is
yvmax  yvmin
sy 
ywmax  ywmin

and the y translation factor is
ywmax yvmin  ywmin yvmax
ty 
ywmax  ywmin




An object inside the clipping window is
mapped to a corresponding position inside
the viewport.
Similarly, an object outside the clipping
window is outside the viewport.
Relative proportions of object are
maintained only if the aspect ratio of the
viewport is the same as the aspect ratio of
the clipping window.
Scale the clipping window to the size of
the viewport using a fixed-point position of
(xwmin,ywmin).
 s x 0 xwmin (1  s x ) 


S  0 s y ywmin (1  s x )
0 0

1





After clipping, the normalized coordinates are
transformed into device coordinate.
Translate (xwmin,ywmin) to (xvmin,yvmin).
The unit square can be mapped onto the output
device using the same procedures as in the
window-to-viewport transformation with the area
inside the unit square transformed to the total
display area of the output device.
1 0 xvmin  xwmin ) 
T  0 1 yvmin  ywmin ) 
0 0

1
M window, normviewp
sx 0

 T  S  0 s y
0 0

tx 

ty 
1 
Mapping the Clipping Window into a
Normalized Square

Another approach to two-dimensional
viewing is to transform the clipping
window into a normalized square,


clip in normalized coordinates, and
then transfer the scene description to a
viewport specified in sceen coordinates.
Normalization Square
1
yvmax
Clipping window
ywmax
(xnorm,ynorm)
(xw,yw)
-1
yvmin
ywmin
xwmin
xwmax
1)
xvmin
1
-1 xv
max
2)
Screen Viewport
yvmax
(xv,yv)
3) yvmin
xvmin
xvmax
M window, normsquare
M normsquare, viewport
xwmax  xwmin 
2

0
 xw  xw
xwmax  xwmin 
max
min


ywmax  ywmin 
2


0
ywmax  ywmin
ywmax  ywmin 




0
0
1




 xvmax  xvmin
0

2

yvmax  yvmin


0

2

0
0


xvmax  xvmin 

2

yvmax  yvmin 

2

1


yscreen
ys
Viewport
xscreen
xs
6-4 OpenGL Two-Dimensional Viewing
Functions



Actually, the basic OpenGL library has no functions
specifically for two-dimensional viewing, since it is
designed primarily for three-dimensional
applications.
But we can adapt the three-dimensional viewing
routines to a two-dimensional scene, and the core
library contains a viewport function.
In addition, the OpenGL Utility (GLU) does provide
a two-dimensional function for specifying the
clipping window, and we have GLUT functions for
handling display windows.
Two Dimensional Images


Images are
two
dimensional
shapes.
We label the
two axes as


X (horizontal)
Y (vertical)
+Y
Y
Axis
(0,0)
X Axis
+X

OpenGL Projection Mode



Before we select a clipping window and a
viewport in OpenGL, we need to
establish the appropriate mode for
constructing the matrix to transform from
world coordinates to screen coordinates.
glMatrixMode(GL_PROJECTION);
glLoadIdentity();

OpenGL Clipping-Window Function


glOrtho2D(xwmin,xwmax,ywmin,ywmax);
OpenGL Viewport Function


glViewPort(xvmin,xvmax,vpWidth,vpHeight);
glGetIntegerv(GL_VIEWPORT, vpArray);

Creating a GLUT Display Window




glutInit(&argc,argv);
glutInitWindowPosition(xTopLeft,yTopleft);
glutInitWindowSize(dwWidth,dwHeight);
glutCreateWindow(“Title of Display Window”);

Setting the GLUT Display-Window Mode
and Color




glutInitDisplayMode(mode);
glutInitDisplayMode(GLUT_SINGLE |
GLUT_RGB);
glClearColor(red,green,blue,alpha);
glClearIndex(index);

GLUT Display-Window Identifier


Deleting a GLUT Display Window


windowID = glutCreateWindow(“A Display Window”);
glutDestroyWindow(windowID);
Current GLUT Display Window


glutSetWindow(windowID);
currentWindowID = glutGetWindow();

Relocating and Resizing a GLUT Display
Window




glutPositionWindow(xnewTopleft,yNewTopLef
t);
glutReshapeWindow(dwNewWidth,dwNewHe
ight);
glutFullScreen();
glutReshapeFunc(winReshapeFcn);
2D Viewing
World Coordinates
+Y
+Y
Y
Axis
+Y
+Y
-X
(0,0)
(0,0)
+Y
(0,0)
+X
(0,0)
+X
X Axis
Vital Information for
determining viewport:
+X
X and Y resolution
(0,0)
-Y
+X
+X
X and Y offset

Managing Multiple GLUT Display Windows









glutIconifyWindow();
glutSetIconTitle(“Icon Name”);
glutSetWindowTitle(“new Window Name”);
glutSetWindow(windowID);
glutPopWindow();
glutSetWindow(windowID);
glutPushWindow();
glutHideWindow();
glutShowWindow();

GLUT Subwindows


glutCreateSubWindow(windowID,xBottomLeft,yBotto
mLeft,width,height);
Viewing Graphics Objects in a GLUT Display
Window


glutDisplayFunc(pictureDescript);
The argument is a routine that describes what is to
be displayed in the current window – callback
function.
6-5 Clipping Algorithms




Generally, any procedure that eliminates those portions of a
picture that are either inside or outside of a specified region of
space is refered to as a clipping algorithm or simply clipping.
Clipping algorithms are applied in 2-D viewing procedures to
identify those parts of a picture that are within the clipping
window.
Everything outside the clipping window is then eliminated from
the scene description that is transferred to the output device
for display.
2-D clipping algorithms





Point Clipping
Line Clipping (Straigth-line Segments)
Fill-Area Clipping (Polygons)
Curve Clipping
Text Clipping
6-6 Two-Dimensional Point Clipping

For a clipping rectangle in standard
position, we save a 2-D point P(x,y) for
display if the following inequalities are
satisfied:
xwmin  x  xwmax
ywmin  y  ywmax

If any one of these four inequalities is not
satisfied, the point is clipped (not saved
for display)
ywmax
If P(x,y) is inside the window?
P(x,y)
xwmin  x  xwmax
ywmin  y  ywmax
ywmin
xwmin
xwmax
6-7 Two-Dimensional Line Clipping



A line-clipping algorithm processes each line
in a scene through a series of tests and
intersection calculations to determine
whether the entire line or any part of it is to
be saved.
The expensive part of a line-clipping
procedure is in calculating the intersection
positions of a line with the window edges.
Therefore, a major goal for any line-clipping
algorithm is to minimize the intersection
calculations.
What is clipping?
+Y
+X
-X
(0,0)
-Y
6-7-1) ทัว่ ไป


1) We can perform tests to determine
whether a line segment is completely inside
the clipping window or completely outside.
2) If we are unable to identify a line as
completely inside or completely outside a
clipping rectangle, we must then perform
intersection calculations to determine
whether any part of the line crosses the
window interior.

2.1) We use parametric
representation with (x0,y0)
and (xend,yend) to determine
where a line segment
crosses each clippingwindow edge by assigning
the coordinate values for
that edge to either x or y
and solving for parameter
u.
x  x0  u ( xend  x0 )
y  y0  u ( yend  y0 )
if
0  u 1


If this value of u is outside
the range from 0 to 1, the
line segment does not
intersect that window
border line.
If the value of u is within
the range from 0 to 1, part
of the line is inside that
border.
x  x0  u( xend  x0 )
y  y0  u( yend  y0 )
6-7-2 Cohen-Sutherland Line
Clipping

Processing time is reduced in the
Cohen-Sutherland method by performing
more tests before processing to the
intersection calculations.

=
ymax
interior
ymin
xmin
xmax
y < ymax
x > xmin
y > ymin
x < xmax
1) Assign a four-bit pattern (Region Code) to
each endpoint of the given segment.
1001
1000
1010
ymax
0001
0000
0010
ymin
0101
xmin
0100
0110
xmax
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
1001
1000
1010
ymax
0001
0000
0010
ymin
0101
xmin
0100
0110
xmax



2) if both endpoint codes are 0000 
the line segment is visible (inside).
3) the logical AND of the two endpoint
codes
 3.1) not completely 0000  the line
segment is not visible (outside)
 3.2) completely 0000  the line
segment maybe inside (and outside)
4) Lines that cannot be identified as
being completely inside or completely
outside a clipping window are then
checked for intersection with the
window border lines.



4.1) Consider code of an end point

if bit 4 is 1, intersect with line y = Ymax หา x

if bit 3 is 1, intersect with line y = Ymin หา x

if bit 2 is 1, intersect with line x = Xmax หา y

if bit 1 is 1, intersect with line x = Xmin
หา y
4.2) หา y จากสูตร y = y0 + m(x-x0) โดยแทนค่า x ด้วย Xmax
หรื อ Xmin แล้วแต่กรณี
4.3) หา x จากสูตร x = x0 + 1/m(y-y0) โดยแทนค่า y ด้วย
Ymax หรื อ Ymin แล้วแต่กรณี โดย
yend  y0
m
xend  x0
Example 01
J(-2,10)
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
Ymin = 1
A(-4,2)
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
G(1,-2)
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-ymax) : sign(ymin-y) : sign(x-xmax) : sign(xmin-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
A(-4,2)
sign(2-6) : sign(1-2) : sign(-4-2) : sign(-3+4)
<0
0
:
:
<0
0
:
:
<0 :
0
:
>0
1
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
B(-1,7)
sign(7-6) : sign(1-7) : sign(-1-2) : sign(-3+1)
>0
1
:
:
<0
0
:
:
<0 :
0
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
C(-1,5)
sign(5-6) : sign(1-5) : sign(-1-2) : sign(-3+1)
<0
0
:
:
<0
0
:
:
<0 :
0
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
G(1,-2)
หา endpoint codes ของจุดปลาย
D(3,8)
sign(8-6) : sign(1-8) : sign(3-2) : sign(-3-3)
>=0
1
:
:
<0
0
:
:
>=0
1
:
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
E(-2,3)
sign(3-6) : sign(1-3) : sign(-2-2) : sign(-3+2)
<0
0
:
:
<0
0
:
:
<0 :
0
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
F(1,2)
sign(2-6) : sign(1-2) : sign(1-2) : sign(-3-1)
<0
0
:
:
<0
0
:
:
<0 :
0
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0 (+ or 0)
Bit = false if sign(…) < 0 (-)
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
G(1,-2)
sign(-2-6) : sign(1+2) : sign(1-2) : sign(-3-1)
<0
0
:
:
>=0
1
:
:
<0 :
0
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
H(3,3)
sign(3-6) : sign(1-3) : sign(3-2) : sign(-3-3)
<0
0
:
:
<0
0
:
:
>=0 :
1
:
<0
0
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
G(1,-2)
หา endpoint codes ของจุดปลาย
I(-4,7)
sign(7-6) : sign(1-7) : sign(-4-2) : sign(-3+4)
>=0
1
:
:
<0
0
:
:
<0 :
0
:
>=0
1
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left
sign(y-6) : sign(1-y) : sign(x-2) : sign(-3-x)
J(-2,10)
Bit = true if sign(…) >= 0
Bit = false if sign(…) < 0
D(3,8)
B(-1,7)
I(-4,7)
Ymax = 6
C(-1,5)
E(-2,3)
A(-4,2)
Ymin = 1
Xmin=-3
H(3,3)
F(1,2)
Xmax=2
G(1,-2)
หา endpoint codes ของจุดปลาย
J(-2,10)
sign(10-6) : sign(1-10) : sign(-2-2) : sign(-3+2)
>=0
1
:
:
<0
0
:
:
<0 :
0
:
<0
0
สรุ ป endpoint codes ของจุดปลาย
J:1000
D:1010
B1000
I:1001
C:0000
E:0000
A:0001
H:0010
F:0000
G:0100
J:1000
D:1010
B1000
I:1001
C:0000
E:0000
A:0001
H:0010
F:0000
G:0100
A AND B = (0001) & (1000) = 0000  Maybe
C AND D = (0000) & (1010) = 0000  Maybe
E or F = (0000) | (0000) = 0000  Inside
J:1000
D:1010
B1000
I:1001
C:0000
E:0000
A:0001
H:0010
F:0000
G:0100
G AND H = (0100) & (0010) = 0000  Maybe
I AND J = (1001) & (1000) = 1000  Outside
B(-1,7):1000
A(-4,2):0001
A(-4,2):0001 บิตที่ 1 เป็ น true แสดงว่า
เส้นตรงนี้ตดั ขอบด้านซ้ายที่ x = xmin=-3 หา
ค่า y จากสมการ y = y0+m(x-x0) โดย x0 = 4, y0 = 2 จะได้
5
5 11
y y=22+5*(-3-(-4))/3=2+5/3=11/3
 (3  (4))  2  
3
3 3
(ymin <= 11/3 <= ymax)
จุดตัดขอบซ้าย คือ (-3,11/3)
m
yend  y0
72
5


xend  x0  1  (4) 3
B(-1,7):1000
A(-4,2):0001
B(-1,7):1000 บิตที่ 4 เป็ น true แสดงว่า
เส้นตรงนี้ตดั ขอบด้านบนที่ y = ymax=6
หาค่า x จากสมการ x = x0+1/m(y-y0)
โดย x0 = -1, y0 = 7 จะได้
3
3
8
xx= -1+3/5(6-7)=-1-3/5=-8/5
1  (6  7)  1   
5
5
5
(xmin <= -8/5 <= xmax)
จุดตัดขอบบน คือ (-8/5,6)
yend  y0
72
5
m


xend  x0  1  (4) 3
C(-1,5):0000 เป็ นจุดอยูภ่ ายใน
D(3,8):1010
D(3,8):1010 บิตที่ 4 เป็ น true แสดงว่าเส้นตรง
นี้ตดั ขอบด้านบนที่ y = ymax=6 หาค่า x จาก
สมการ x = x0+1/m(y-y0) โดย x0 = 3, y0 = 8
4
8 1
จะได้ xx = 33+4/3(6-8)=3-8/3=1/3
 (6  8)  3  
3
C(-1,5):0000
yend  y0
85
3
m


xend  x0 3  (1) 4
3
3
(xmin <= 1/3 <= xmax) จุดตัดขอบบน คือ
(1/3,6)
บิตที่ 2 เป็ น true แสดงว่าเส้นตรงนี้ตดั ขอบ
ด้านขวาที่ x = xmax=2 หาค่า y จากสมการ
y = y0+m(x-x0) โดย x0 = 3, y0 = 8 จะได้
3
3 27
yy = 8+3/4(2-3)=8-3/4=27/4
8  (2  3)  8  
4
4 4
(27/4 > ymax)
พ้นขอบขวาของรู ป
G(1,-2):0100 บิตที่ 3 เป็ น true แสดงว่า
เส้นตรงนี้ตดั ขอบด้านล่างที่ y = ymim=1 หาค่า
x จากสมการ x = x0+1/m(y-y0) โดย x0 = 1,
2
6 11
y0 = -2 จะได้ xx=11+2/5(1+2)=1+6/5=11/5
 (1  2)  1  
5
H(3,3):0010
G(1,-2):0100
m
yend  y0 3  (2) 5


xend  x0
3 1
2
5
5
(11/5 > xmax) พ้นขอบขวาของรู ป
H(3,3):0010 บิตที่ 2 เป็ น true แสดงว่า
เส้นตรงนี้ตดั ขอบด้านขวาที่ x = xmax=2 หาค่า
y จากสมการ y = y0+m(x-x0) โดย x0 = 3,
y0 = 3 จะได้
5
5 1
yy = 3+5/2(2-3)
3  (2  3)=3-5/2
3  =1/2
2
(1/2 < ymin)
พ้นขอบล่างของรู ป
2
2
(-8/5,6)
(-3,11/3)
(1/3,6)
Ymax = 6
C(-1,5)
E(-2,3)
F(1,2)
Ymin = 1
Xmin=-3
Xmax=2
HomeWork
6-7-3 Liang-Barsky Line Clipping

Faster line-clipping algorithms have
been developed that do more line
testing before processing to the
intersection calculations.
x = x1 + u(x2 - x1)
y = y1 + u(y2 - y1)
L-B Overview





Using parametric equations, compute line
segment intersections (actually, just values
of u) with clipping region edges
Determine if the four values of u actually
correspond to real intersections
Then calculate x and y values of the
intersections
Faster than Cohen-Sutherland, does not
need to iterate
L-B examines values of u for earlier reject
Parametric Intersection
ttop
tbottom
tleft
tright
P2(x2,y2)
P1(x1,y1)
Left
Right
Buttom
Top
Liang-Barsky - Algorithm






Compute entering u values, which are qk/pk for each pk<0
 There will always be two for 2D rectangular clip region, three
in 3D
Compute leaving u values, which are qk/pk for each pk>0
Parameter value for small u end of line is: usmall= max(0,
entering t’s)
Parameter value for large u end of line is: ularge=min(1, leaving
t’s)
If usmall<ularge, there is a line segment - compute endpoints by
substituting u values
Improvement (and actual Liang-Barsky):
 compute t’s for each edge in turn (some rejects occur earlier
like this)
Example
Let P1 (-1, -2), P2 (2, 4)
Xmin = 0, Xmax = 1, Ymin = 0, Ymax = 1

dx = 2 - (-1) = 3; dy = 4 - (-2) = 6

P1 = -dx = -3;
q1 = x1 - Xmin = -1 - 0 = -1; u1 = q1 / P1 = 1/3
Left

P2 = dx = 3;
q2 = Xmax - x1 = 1 - (-1) = 2; u2 = q2 / P2 = 2/3
Right

P3 = -dy = -6;
q3 = y1 - Ymin = -2-0 = -2;
u3 = q3 / P3 = 1/3
Buttom

P4 = dy = 6;
q4 = Ymax - y1 = 1-(-2) = 3; u4 = q4 / P4 = ½
Top

for (Pk < 0) u’1 = MAX(1/3, 1/3, 0) = 1/3

for (Pk> 0) u’2 = MIN(2/3, 1/2, 1) = 1/2 Since u’1 < u’2 there is a visible section
compute new endpoints

U’1 = 1/3;

x1' = x1 + dx.u’1 = -1 + (3 . 1 / 3) = 0

y1' = y1 + dy.u’1 = -2 + (6 . 1 / 3) = 0

U’2 = ½;

x2' = x1 + dx.u’2 = -1 + (3 . 1 / 2) = 1 / 2

y2' = y1 + dy.u’2 = -2 + (6 . 1 / 2) = 1
Ymax
Ymin
Xmin
Xmax
Ex (Liang-Barsky)
(15,23)
R2
(25,20)
(10,20)
(15,17)
(5,18)
R1
(5,12)
(10,10)
(25,10)
R1
Let P1 (5, 12), P2 (15, 17)
Xmin = 10, Xmax = 25, Ymin = 10, Ymax = 20

p1 = -dx = -(15 - 5) = -10; q1 = x1 - xmin= 5 - 10 = -5; u1 = q1 / p1 = 1/2 Left

p2 = dx = 15 - 5 = 10;
q2 = xmax - x1 = 25 - 5 = 20; u2 = q2 / p2 = 2
Right

p3 = -dy = -(17 - 12) = -5; q3 = y1 - ymin= 12 - 10 = 2; u3 = q3 / p3 = -2/5Buttom

p4 = dy = 17 - 12 = 5;
q4 = ymax - y1 = 20 - 12 = 8; u4 = q4 / p4 = 8/5 Top

for (Pk < 0) u’1 = MAX(1/2, -2/5, 0) = 1/2

for (Pk > 0) u’2 = MIN(2, 8/5, 1) = 1 Since u1 < u2 there is a visible section
compute new endpoints

U’1 = 1/2;

x1' = x1 + dx.u’1 = 5 + (10 . 1 / 2) = 10

y1' = y1 + dy.u’1 = 12 + (5 . 1 / 2) = 14.5

U’2 = 1

x2' = x1 + dx.u’2 = 5 + (10 . 1) = 15

y2' = y1 + dy.u’2 = 12 + (5 . 1) = 17
R2
Let P1 (5, 18), P2 (15, 23)
Xmin = 10, Xmax = 25, Ymin = 10, Ymax = 20

p1 = -dx = -(15 - 5) = -10; q1 = x1 - xmin= 5 - 10 = -5; u1 = q1 / p1 = 1/2

p2 = dx = 15 - 5 = 10;
q2 = xmax - x1 = 25 - 5 = 20; u2 = q2 / p2 = 2

p3 = -dy = -(23 - 18) = -5; q3 = y1 - ymin= 18 - 10 = 8; u3 = q3 / p3 = -8/5

p4 = dy = 23 - 18 = 5;
q4 = ymax - y1 = 20 - 18 = 2; u4 = q4 / p4 = 2/5

for (Pk < 0) u’1 = MAX(1/2, -8/5, 0) = 1/2

for (Pk > 0) u’2 = MIN(2, 2/5, 1) = 2/5 Since u1 > u2, entire segment is clipped
out.
Result
(25,20)
(10,20)
(15,17)
(10,14.5)
(10,10)
(25,10)
Liang-Barsky Pros/Cons



PROS
Faster
If you clip a lot, you
don’t do too many
extra calculations
calculating
intersection points is
done at end



CONS
Harder to implement
Not many easy
reject cases
More costly if there
are more trivial
reject or accept
Home Work (L-B Method)
6-7-4. Nicholl-Lee-Nicholl Line
Clipping


By creating more regions around the
clipping window, the NLN algorithm
avoids multiple line-intersection
calculation.
These extra intersection calculations
are eliminated in the NLN algorithm by
carrying out more region testing before
intersection positions are calculated.


Initial testing to determine whether a
line segment is completely inside or
outside the clipping window can be
accomplished with region-code test.
These extra intersection calculations
are eliminated in the NLN algorithm by
carrying out more region testing before
intersection positions are calculated.
We compute the line-intersection position with the corresponding window
boundary.
P2

To determine the region in which P2 is
located, we compare the slope of the
line segment to the slopes of the
boundaries of the NLN regions.
Example
B(-1,7)
Ymax = 6
A(-4,2)
Xmin=-3
Ymin = 1
Xmax=2
Example
mA,TL 
mA,TR 
m A, B 
yend  y0
62
4


xend  x0  3  (4) 1
yend  y0
72
5


xend  x0  1  (4) 3
mA,TR  mA,B  mA,TL
yend  y0
62
4 2

 
xend  x0 2  (4) 6 3
B(-1,7)
TL(-3,6)
A(-4,2)
BL(-3,1)
Xmin=-3
TR(2,6)
Ymax = 6
Ymin = 1
BR(2,1)
Xmax=2
x  xL  3
5
11
y  y0  m( xL  x0 )  2  (3  (4)) 
3
3
B(-1,7)
Ymax = 6
5
m
3
(-3,11/3)
A(-4,2)
Ymin = 1
0001
Xmin=-3
Xmax=2
y  yT  6
1
3
8
x  x0  ( yT  y0 )  1  (6  7)  
m
5
5
(-8/5,6)
B(-1,7) 1000
Ymax = 6
5
m
3
(-3,11/3)
A(-4,2)
Xmin=-3
Ymin = 1
Xmax=2
Home Work (NLN)
6-8 Polygon Fill-Area Clipping

To clip a polygon fill
area, we cannot
directly apply a
line-clipping
methods to the
individual polygon
edges because this
approach would not
produce a closed
polyline.
6.8.1Sutherland-Hodgman Clip

Clip the polygon against each edge of the clip region
in turn
 Clip polygon each time to line containing edge
 Only works for convex clip regions (Why?)

inside
Edge from s to p takes one of four cases:
(Purple line can be a line or a plane)
outside
inside
outside
inside
outside
p
s
p
p output
s
i output
p
inside
p
s
no output
i output
p output
outside
s
Point-to-Plane test

A very general test to determine if a point p is “inside” a plane
P, defined by q and n:
(p - q) • n < 0:
p inside P
(p - q) • n = 0:
p on P
(p - q) • n > 0:
p outside P
q
q
q
n
p
n
n
p
p
P
P
P
D(20,50)
42
E(10,40)
C(30,40)
A(10,10)
B(30,10)
18
50
พิจารณาด้าน AB
ด้าน AB เป็ นลักษณะ ไปจากข้างนอกเข้าข้าง
ใน clipping window ดังนั้น เก็บค่า
coordinate ของจุดตัด (I1) และจุดปลาย B
42
E(10,40)
C(30,40)
หาจุดตัด
A(10,10)
B(30,10)
D(20,50)
18
จากภาพจะได้ x = 18 และ y = 10
ดังนั้น I (18,10)
1
Clipped vertices = {I1(18,10), B(30,10)}
I1
50
พิจารณาด้าน BC
ด้าน BC เป็ นลักษณะ ไปจากข้างในและยังอยู่
ข้างใน clipping window ดังนั้นเก็บค่า
coordinate ของจุดปลาย C เท่านั้น
Clipped vertices = {I1(18,10), B(30,10),C(30,40)}
D(20,50)
42
E(10,40)
C(30,40)
A(10,10)
B(30,10)
18
50
พิจารณาด้าน CD
ด้าน CD เป็ นลักษณะ ไปจากข้างในออกสู่
ข้างนอก clipping window ดังนั้นเก็บค่า
coordinate ของจุดตัด (I2) เท่านั้น
หาจุดตัด
จากภาพจะได้ y = 42
หาค่า x จากสมการ x = x0+1/m(y-y0) โดย
x0 = 30, y0 = 40 จะได้
x = 30-1(42-40) = 30-2=28
Clipped vertices = {I1(18,10),
B(30,10),C(30,40),I2(28,42)}
D(20,50)
42
E(10,40)
C(30,40)
A(10,10)
B(30,10)
18
mCD
50
yend  y0 50  40
10


   1
xend  x0 20  30
10
พิจารณาด้าน DE และ EA
ด้าน DE และ EA เป็ นลักษณะไปจากข้าง
นอกสู่ขา้ งนอก clipping window ดังนั้นไม่
เก็บค่า coordinate ของจุดทั้งสอง
Clipped vertices = {I1(18,10),
B(30,10),C(30,40),I2(28,42)}
D(20,50)
42
E(10,40)
C(30,40)
A(10,10)
B(30,10)
18
50
42
18
50
6.8.2 Weiler-Atherton Polygon
Clipping
13
14
4
2
1
5
3
6
12
9
8
Subject
11
Clipping
Window
7
10
Atherton-Weiler Clipping

Works for nonconvex polygons as well
clipping polygons (clipper)
 polygons to be clipped (clippee)

13
14
4
2
1
5
3
6
12
9
8
Subject
11
Clipping
Window
7
10
Ex. 2
Given


Clipper polygon
Clippee polygon
Start
From vertex of clippee outside clipper
Move counterclockwise
along clippee until first intersection
Label this point
as the first vertex of the result
Follow clippee
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clipper
Follow clipper
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clippee
Follow clippee
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clipper
Follow clipper
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clippee
Follow clippee
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clipper
Follow clipper
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clippee
Follow clippee
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Turn left onto clipper
Follow clipper
counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result
Until reach first vertex of result
6-9 Curve Clipping
6-10 Text Clipping