![Page 1: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/1.jpg)
9.1Si23_03
SI23Introduction to Computer
Graphics
SI23Introduction to Computer
Graphics
Lecture 9 – Clipping
![Page 2: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/2.jpg)
9.2Si23_03
ClippingClipping
Fundamental operation in computer graphics
Extracts a portion of graphical data we wish to see
Needs to be fast, so often implemented in hardware
![Page 3: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/3.jpg)
9.3Si23_03
Clipping Points to a Window
Clipping Points to a Window
PQ
.
.
xmin xmax
ymin
ymax
(x,y) VISIBLE IF xmin < x < xmax; ymin < y < ymax
Here a simple test can be applied:
![Page 4: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/4.jpg)
9.4Si23_03
Clipping Lines to a Window
Clipping Lines to a Window
A
B
C
D
E
F G
H
I
J
Can we quickly recognise lines which need clipping?
![Page 5: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/5.jpg)
9.5Si23_03
Clipping to a WindowClipping 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)
![Page 6: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/6.jpg)
9.6Si23_03
Cohen-Sutherland Line Clipping Algorithm
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
Bit 2 Set if x > xmax
Bit 3 Set if y < ymin
Bit 4 Set if y > ymax
Both end-point codes 0000 => VISIBLE
Logical AND = NOT 0000 => INVISIBLE
Logical AND = 0000 => INVISIBLE or PART VISIBLE
1001 1000 1010
0001 0000 0010
0101 0100 0110
![Page 7: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/7.jpg)
9.7Si23_03
Cohen-Sutherland Line Clipping Algorithm
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.
![Page 8: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/8.jpg)
9.8Si23_03
ExampleExample
Clip againstleft, right,bottom, topboundaries in turn.
P1: 1001P2: 0100
P1
P2
x=xmin
P1’
First clip to leftedge, givingP1’P2
![Page 9: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/9.jpg)
9.9Si23_03
ExampleExample
P2
x=xmin
P1’ P1’: 1000P2 : 0100
No need to clipagainst right edge
Clip againstbottom gives P1’P2’
Clip against topgives P1’’P2’
P2’
P1’’
![Page 10: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/10.jpg)
9.10Si23_03
Calculating the Intersection
Calculating the Intersection
To calculate intersection of P1P2 with, say left edge:
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)
P1
P2
![Page 11: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/11.jpg)
9.11Si23_03
Other Line ClippersOther 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
![Page 12: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/12.jpg)
9.12Si23_03
Ivan SutherlandIvan Sutherland
Founder figure of computer graphics
Sketchpad developed in 1963
See:
http://www.sun.com/960710/feature3/ivan-profile.html
![Page 13: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/13.jpg)
9.13Si23_03
Clipping in SVGClipping in SVG
There is very powerful clipping support in SVG– Elements are clipped against a path
The clip path can be more general than just a rectangle
<clipPath id=“clipper”><rect x=“50” y=“50” width=“100” height=“100”/>
</clipPath>
![Page 14: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/14.jpg)
9.14Si23_03
Clipping in SVGClipping 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>
![Page 15: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/15.jpg)
9.15Si23_03
Polygon ClippingPolygon Clipping
Basic idea: clip each polygon side - but care needed to ensure clipped polygon is closed.
A
B
C
D
E
F
![Page 16: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/16.jpg)
9.16Si23_03
Sutherland-Hodgman Algorithm
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
![Page 17: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/17.jpg)
9.17Si23_03
Sutherland-Hodgman Algorithm
Sutherland-Hodgman Algorithm
Consider a polygon side:
starting vertex S; end vertex P
and window edge x = xmin.
What vertices are output?
xmin xmin xmin xmin
S
P
S
P
S
P
S
P
I I
OUTPUT: - I, P I P
![Page 18: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/18.jpg)
9.18Si23_03
Example - Sutherland-Hodgman Algorithm
Example - Sutherland-Hodgman Algorithm
Take each edge in turn -start with left edge
Take each point in turn:
(i) Input point and call it P- thus P = A
(ii) If P is first point:- store as P1
- output if visible (not inthis particular example)- let S = P
A
B
C
D
E
F
Input: A B C D E F
![Page 19: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/19.jpg)
9.19Si23_03
Example - Sutherland-Hodgman Algorithm
Example - Sutherland-Hodgman Algorithm
A
B
C
D
E
F
Input: A B C D E F
(iii) If P not first point,then if SP crosses windowedge:- compute intersection I- output Ioutput P if visible(iv) let S = P
Output: A’ B C D E F
A’
![Page 20: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/20.jpg)
9.20Si23_03
Example - Sutherland-Hodgman Algorithm
Example - Sutherland-Hodgman Algorithm
Finally, if some pointshave been output, thenif SP1 crosses windowedge:- compute intersection I- output I
A
B
C
D
E
F
Input: A B C D E F
A’
G
Output: A’ B C D E F G
![Page 21: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/21.jpg)
9.21Si23_03
Example - after clipping to left edge
Example - after clipping to left edge
B
C
D
E
F
A’
G
The result of clippingagainst the left edge
![Page 22: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/22.jpg)
9.22Si23_03
Example - clip against right edge
Example - clip against right edge
B
C
D
E
F
A’
G
E’
E’’
B
C
D
F
A’
G E’
E’’
INPUT: A’ B C D E F G OUTPUT: A’ B C D E’ E’’ F G
![Page 23: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/23.jpg)
9.23Si23_03
Example - clip against bottom edge
Example - clip against bottom edge
B
C
D
F
A’
G E’
E’’E’’’
F’
B
C
D
A’
G E’
E’’’F’
INPUT: A’ B C D E E’ E’’ F G OUTPUT: A’ B C D E’ E’’’ F’ G
![Page 24: 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping](https://reader033.vdocuments.net/reader033/viewer/2022051613/5515f4a0550346d46f8b558f/html5/thumbnails/24.jpg)
9.24Si23_03
Example - clip against top edge
Example - clip against top edge
B
C
D
A’
G E’
E’’’F’
C
D
A’
G E’
E’’’F’
A’’ B’ A’’ B’
INPUT: A’ B C D E E’ E’’’ F’ G OUTPUT: A’ A’’ B’ C D E’ E’’’ F’ G