1. มุมมองใน 2 มิติ (2-D Viewing)
Chapter 6
มุมมองใน 2 มิติ (2-D Viewing)

2. เนื้อหาในบทนี้ 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

3. 6-1 The Two-Dimensional Viewing Pipeline
World coordinate

4. Clipping window
ywmax
ywmin
xwmin
xwmax
World coordinate

5. 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

6. 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.

7. 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.

8. Clipping window
Viewport
ywmax
yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
World coordinate
Viewport coordinate

9. 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.

10. We achieve zooming effects by successively mapping different-sized clipping windows onto a fixed-size viewport.

11. Zoom different-sized Clipping window fixed-size Viewport ywmax yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
different-sized Clipping window
fixed-size Viewport
ywmax
yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax

12. Zoom different-sized Clipping window fixed-size Viewport ywmax yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
different-sized Clipping window
fixed-size Viewport
ywmax
yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax

13. Panning effects are achieved by moving a fixed-size clipping window across the various objects in a scene.

14. Pan different-position Clipping window fixed-size Viewport ywmax yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
different-position Clipping window
fixed-size Viewport
ywmax
yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax

15. Pan different-position Clipping window fixed-size Viewport ywmax yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
different-position Clipping window
fixed-size Viewport
ywmax
yvmax
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax

16. The mapping of a two-dimensional, world-coordinate 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.

17. 2-D viewing-transformation pipeline
Construct world-coordinate scene using modeling-coordinate transformations
Convert world-coordinate to viewing coordinates
Transform viewing coordinates to normalized coordinates
Map normalized coordinates to device coordinates MC WC VC NC DC
MC = Modeling Coordinate
WC = World Coordinate
VC = Viewing Coordinate
NC = Normalized Coordinate
DC = Device Coordinate
1)ขึ้นรูป
4)แสดงบนจอภาพ
3) viewport
2)ทำ clipping

18. 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.

19. 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.

20. Viewing-coordinate Clipping Window
A general approach to the two-dimensional 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.

21. 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.

22. 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.

23. y world
y world
y view
y view
Clipping window
Clipping window y0 y0
x world
x world x0 x0
x view
y world
x view
y view y0
x world x0
x view

24. 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.

25. แบบที่ 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.

26. 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.

27. Clipping window
Normalization Viewport
ywmax
yvmax
(xv,yv)
(xw,yw)
yvmin
ywmin
xwmin
xwmax
xvmin
xvmax
World coordinate
Viewport coordinate
….(1)
….(2)

28. Solving expression (1) for the viewport position xv,

30. โดย
และ

31. In the same way, we have
where the y scaling factor is
and the y translation factor is

32. 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).

33. 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.

35. 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.

36. Clipping window
Normalization Square 1
yvmax
ywmax
(xnorm,ynorm)
(xw,yw) -1 1
yvmin
ywmin
xvmin -1
xvmax
xwmin
xwmax 1) 2)
Screen Viewport
yvmax
(xv,yv) 3)
yvmin
xvmin
xvmax

38. yscreen ys
Viewport
xscreen xs

39. 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.

40. Two Dimensional Images+Y
Images are two dimensional shapes.
We label the two axes as
X (horizontal)
Y (vertical) Y
Axis
(0,0)
X Axis +X

41. 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();

42. OpenGL Clipping-Window Function
glOrtho2D(xwmin,xwmax,ywmin,ywmax);
OpenGL Viewport Function
glViewPort(xvmin,xvmax,vpWidth,vpHeight);
glGetIntegerv(GL_VIEWPORT, vpArray);

43. Creating a GLUT Display Window
glutInit(&argc,argv);
glutInitWindowPosition(xTopLeft,yTopleft);
glutInitWindowSize(dwWidth,dwHeight);
glutCreateWindow(“Title of Display Window”);

44. Setting the GLUT Display-Window Mode and Color
glutInitDisplayMode(mode);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glClearColor(red,green,blue,alpha);
glClearIndex(index);

45. GLUT Display-Window Identifier
windowID = glutCreateWindow(“A Display Window”);
Deleting a GLUT Display Window
glutDestroyWindow(windowID);
Current GLUT Display Window
glutSetWindow(windowID);
currentWindowID = glutGetWindow();

46. Relocating and Resizing a GLUT Display Window
glutPositionWindow(xnewTopleft,yNewTopLeft);
glutReshapeWindow(dwNewWidth,dwNewHeight);
glutFullScreen();
glutReshapeFunc(winReshapeFcn);

47. 2D Viewing (0,0) +X +Y (0,0) +X +Y -X (0,0) +X +Y (0,0) +X +Y
World Coordinates
X Axis Y
Axis
(0,0) +X +Y
(0,0) +X +Y -X
(0,0) +X +Y
(0,0) +X +Y
Vital Information for determining viewport:
X and Y resolution
X and Y offset
(0,0) +X +Y -Y

48. Managing Multiple GLUT Display Windows
glutIconifyWindow();
glutSetIconTitle(“Icon Name”);
glutSetWindowTitle(“new Window Name”);
glutSetWindow(windowID);
glutPopWindow();
glutPushWindow();
glutHideWindow();
glutShowWindow();

49. Viewing Graphics Objects in a GLUT Display Window
GLUT Subwindows
glutCreateSubWindow(windowID,xBottomLeft,yBottomLeft,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.

50. 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

51. 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:
If any one of these four inequalities is not satisfied, the point is clipped (not saved for display)

52. ywmax
If P(x,y) is inside the window?
P(x,y)
ywmin
xwmin
xwmax

53. 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.

54. What is clipping?
(0,0) +X +Y -X -Y

56. 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.

57. 2.1) We use parametric representation with (x0,y0) and (xend,yend) to determine where a line segment crosses each clipping-window edge by assigning the coordinate values for that edge to either x or y and solving for parameter u.

58. 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.

59. 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.

60.  = y < ymax y > ymin x > xmin x < xmax interior xmin xmax

61. 1) Assign a four-bit pattern (Region Code) to each endpoint of the given segment.
1001
1000
1010
ymax
0001
0000
0010
ymin
0101
0100
0110
xmin
xmax
bit 4 : bit 3 : bit 2 : bit 1
Top : Bottom : Right : Left

62. 1001
1000
1010
ymax
0001
0000
0010
ymin
0101
0100
0110
xmin
xmax

63. 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  the line segment is not visible (outside)
3.2) completely  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.

64. 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 แล้วแต่กรณี โดย

65. Example 01 J(-2,10) D(3,8) B(-1,7) I(-4,7) Ymax = 6 C(-1,5) E(-2,3)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2
G(1,-2)

66. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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 : : :

67. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
B(-1,7)
sign(7-6) : sign(1-7) : sign(-1-2) : sign(-3+1)
>0 : < : <0 : <0
1 : : :

68. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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 : : :

69. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
D(3,8)
sign(8-6) : sign(1-8) : sign(3-2) : sign(-3-3)
>=0 : < : >=0 : <0
1 : : :

70. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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 : : :

71. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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 : : :

72. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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
0 : : :

73. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
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 : : :

74. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
I(-4,7)
sign(7-6) : sign(1-7) : sign(-4-2) : sign(-3+4)
>=0 : < : <0 : >=0
: : :

75. หา endpoint codes ของจุดปลาย
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)
H(3,3)
F(1,2)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2
หา endpoint codes ของจุดปลาย
G(1,-2)
J(-2,10)
sign(10-6) : sign(1-10) : sign(-2-2) : sign(-3+2)
>=0 : < : <0 : <0
1 : : :

76. สรุป endpoint codes ของจุดปลาย
J:1000
D:1010
B1000
I:1001
C:0000
E:0000
H:0010
F:0000
A:0001
G:0100

77. J:1000
D:1010
B1000
I:1001
C:0000
E:0000
H:0010
F:0000
A:0001
G:0100
A AND B = (0001) & (1000) =  Maybe
C AND D = (0000) & (1010) =  Maybe
E or F = (0000) | (0000) =  Inside

78. J:1000
D:1010
B1000
I:1001
C:0000
E:0000
H:0010
F:0000
A:0001
G:0100
G AND H = (0100) & (0010) =  Maybe
I AND J = (1001) & (1000) =  Outside

79. (ymin <= 11/3 <= ymax) จุดตัดขอบซ้าย คือ (-3,11/3)
A(-4,2):0001 บิตที่ 1 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านซ้ายที่ x = xmin=-3 หาค่า y จากสมการ y = y0+m(x-x0) โดย x0 = -4, y0 = 2 จะได้
y = 2+5*(-3-(-4))/3=2+5/3=11/3
(ymin <= 11/3 <= ymax)
จุดตัดขอบซ้าย คือ (-3,11/3)
B(-1,7):1000
A(-4,2):0001

80. B(-1,7):1000 บิตที่ 4 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านบนที่ y = ymax=6 หาค่า x จากสมการ x = x0+1/m(y-y0) โดย x0 = -1, y0 = 7 จะได้
x = -1+3/5(6-7)=-1-3/5=-8/5
(xmin <= -8/5 <= xmax)
จุดตัดขอบบน คือ (-8/5,6)
B(-1,7):1000
A(-4,2):0001

81. C(-1,5):0000 เป็นจุดอยู่ภายใน
D(3,8):1010 บิตที่ 4 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านบนที่ y = ymax=6 หาค่า x จากสมการ x = x0+1/m(y-y0) โดย x0 = 3, y0 = 8 จะได้ x = 3+4/3(6-8)=3-8/3=1/3
(xmin <= 1/3 <= xmax) จุดตัดขอบบน คือ (1/3,6)
บิตที่ 2 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านขวาที่ x = xmax=2 หาค่า y จากสมการ y = y0+m(x-x0) โดย x0 = 3, y0 = 8 จะได้ y = 8+3/4(2-3)=8-3/4=27/4
(27/4 > ymax)
พ้นขอบขวาของรูป
D(3,8):1010
C(-1,5):0000

82. (11/5 > xmax) พ้นขอบขวาของรูป
G(1,-2):0100 บิตที่ 3 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านล่างที่ y = ymim=1 หาค่า x จากสมการ x = x0+1/m(y-y0) โดย x0 = 1, y0 = -2 จะได้ x = 1+2/5(1+2)=1+6/5=11/5
(11/5 > xmax) พ้นขอบขวาของรูป
H(3,3):0010 บิตที่ 2 เป็น true แสดงว่าเส้นตรงนี้ตัดขอบด้านขวาที่ x = xmax=2 หาค่า y จากสมการ y = y0+m(x-x0) โดย x0 = 3, y0 = 3 จะได้ y = 3+5/2(2-3) = 3-5/2 = 1/2
(1/2 < ymin)
พ้นขอบล่างของรูป
H(3,3):0010
G(1,-2):0100

83. (1/3,6)
(-8/5,6)
Ymax = 6
C(-1,5)
(-3,11/3)
E(-2,3)
F(1,2)
Ymin = 1
Xmin=-3
Xmax=2

84. HomeWork

85. 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)

86. 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

87. Parametric Intersection
tright
ttop
tleft
tbottom

88. P2(x2,y2)
P1(x1,y1)
Left
Right
Buttom
Top

93. 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)

94. Example Ymax Ymin Xmin Xmax 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; u1 = q1 / P1 = 1/ Left
P2 = dx = 3; q2 = Xmax - x1 = 1 - (-1) = 2; u2 = q2 / P2 = 2/ Right
P3 = -dy = -6; q3 = y1 - Ymin = -2-0 = -2; u3 = q3 / P3 = 1/ 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

95. Ex (Liang-Barsky) (15,23) R2 (25,20) (10,20) (5,18) (15,17) R1 (5,12)
(10,10)
(25,10)

96. 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; u1 = q1 / p1 = 1/2 Left
p2 = dx = = 10; q2 = xmax - x1 = = 20; u2 = q2 / p2 = Right
p3 = -dy = -( ) = -5; q3 = y1 - ymin= = 2; u3 = q3 / p3 = -2/5Buttom
p4 = dy = = 5; q4 = ymax - y1 = = 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 + ( / 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

97. 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; u1 = q1 / p1 = 1/2
p2 = dx = = 10; q2 = xmax - x1 = = 20; u2 = q2 / p2 = 2
p3 = -dy = -( ) = -5; q3 = y1 - ymin= = 8; u3 = q3 / p3 = -8/5
p4 = dy = = 5; q4 = ymax - y1 = = 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.

98. Result
(10,20)
(25,20)
(15,17)
(10,14.5)
(10,10)
(25,10)

99. Liang-Barsky Pros/Cons
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

100. Home Work (L-B Method)

101. 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.

102. 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.

104. We compute the line-intersection position with the corresponding window boundary.

107. P2

108. 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.

109. Example
B(-1,7)
Ymax = 6
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2

110. Example B(-1,7) TL(-3,6) TR(2,6) Ymax = 6 A(-4,2) Ymin = 1 BL(-3,1)
BR(2,1)
Xmin=-3
Xmax=2

111. B(-1,7)
Ymax = 6
(-3,11/3)
A(-4,2)
0001
Ymin = 1
Xmin=-3
Xmax=2

112. B(-1,7) 1000
(-8/5,6)
Ymax = 6
(-3,11/3)
A(-4,2)
Ymin = 1
Xmin=-3
Xmax=2

113. Home Work (NLN)

114. 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.

116. 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?)

117. s p s p s p s p Edge from s to p takes one of four cases:
(Purple line can be a line or a plane)
inside
outside s p
p output
inside
outside s p
i output
inside
outside s p
no output
inside
outside s p
i output p output

118. Point-to-Plane test P n p q q q n n p p P P
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 P n p q q q n n p p P P

119. D(20,50) 42
E(10,40)
C(30,40)
A(10,10)
B(30,10) 18 50

120. พิจารณาด้าน AB
ด้าน AB เป็นลักษณะ ไปจากข้างนอกเข้าข้างใน clipping window ดังนั้น เก็บค่า coordinate ของจุดตัด (I1) และจุดปลาย B
หาจุดตัด
จากภาพจะได้ x = 18 และ y = 10
ดังนั้น I1(18,10)
Clipped vertices = {I1(18,10), B(30,10)}
D(20,50) 42
E(10,40)
C(30,40)
A(10,10)
B(30,10) 18 50 I1

121. พิจารณาด้าน 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

122. พิจารณาด้าน 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 50

123. พิจารณาด้าน 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

124. 42 18 50

125. 6.8.2 Weiler-Atherton Polygon Clipping13 14 4 2 3 5 1 6 12
Clipping
Window 9 7 8 10
Subject 11

126. Atherton-Weiler Clipping
Works for nonconvex polygons as well
clipping polygons (clipper)
polygons to be clipped (clippee)

127. 13 14 4 2 3 5 1 6 12
Clipping
Window 9 7 8 10
Subject 11

128. Ex Given
Clipper polygon
Clippee polygon

129. Start
From vertex of clippee outside clipper

130. Move counterclockwise
along clippee until first intersection

131. Label this point
as the first vertex of the result

132. Follow clippee counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

133. Turn left onto clipper

134. Follow clipper counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

135. Turn left onto clippee

136. Follow clippee counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

137. Turn left onto clipper

138. Follow clipper counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

139. Turn left onto clippee

140. Follow clippee counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

141. Turn left onto clipper

142. Follow clipper counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

143. Turn left onto clippee

144. Follow clippee counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

145. Turn left onto clipper

146. Follow clipper counterclockwise until next intersection
Label each vertex
along the way as a
vertex of the result

147. Until reach first vertex of result

148. 6-9 Curve Clipping

149. 6-10 Text Clipping