Presentation is loading. Please wait.

Presentation is loading. Please wait.

SI23 Introduction to Computer Graphics

Similar presentations


Presentation on theme: "SI23 Introduction to Computer Graphics"— Presentation transcript:

1 SI23 Introduction to Computer Graphics
Lecture 6 – Filling An Area

2 Area Filling As with line drawing, we need a highly efficient way of determining which pixels to illuminate to fill the interior of an area This will usually be implemented in the hardware of a workstation But what is the interior of an area?

3 Definining Interiors Even-odd rule Non-zero winding rule

4 An Example This polygon has vertices: (0,1) (2,8) (4,6) (7,8) (9,4)
1 4 5 6 7 8 9 2 3 10 This polygon has vertices: (0,1) (2,8) (4,6) (7,8) (9,4) (6,1) e1 e2 e3 e4 e5 e6 and 6 edges e1, .. e6

5 Scan line approach To fill the area, we can work in scan lines.
1 4 5 6 7 8 9 2 3 10 To fill the area, we can work in scan lines. Take a y-value; find intersections with edges. Join successive pairs filling in a span of pixels e1 e2 e3 e4 e5 e6

6 Different Cases - the normal case
1 4 5 6 7 8 9 2 3 10 Scan line 5: intersection e1 = 1.14 intersection e4 = 8.5 e1 e2 e3 e4 e5 e6 Pixels 2-8 on scan line are filled in

7 Different Cases - Passing through a vertex
1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 e6 Scan line 6 intersects e1,e2,e3,e4 at 1.4, 4, 4, 8 respectively - two spans drawn Scan line 4 intersects e1,e4,e5 at 0.9, 9, 9 respectively - when edges are either side of scan line, just count upper ie e4

8 Different cases - horizontal edges
1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 e6 A horizontal edge such as e6 can be ignored; it will get drawn automatically

9 Pre-Processing the Polygon
1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 We have removed e6, and shortened e5 by one scan line

10 Optimization To speed up the intersection calculations
it helps to know where the edges lie: eg e1 goes from scan line 1 to scan line 8; e2 from line 8 to line 6 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 Thus we know which edges to test for each scan line

11 Bucket Sort the Edges In fact it is useful to sort the edges by their
lowest point; we do this by bucket sort - one bucket per scan line 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 0: 1: e1,e5 2: 3: 4: e4 5: 6: e2,e3 7: 8: 9:

12 Next Optimization - Using Coherence
The next optimization is to use scan line coherence 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 Eg look at e1 - assume intersection with line 1 known (x=0) - then intersection with scan line 2 is: x* = x + 1/m (m=slope) ie: x* = x + Dx / Dy ie: x* = / 7 = 2/7 Dy Dx

13 Creating An Edge Table It is useful to store information about
edges in a table: 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 max y e 1st x Dx Dy 1 8 2 7 4 8 -2 2 2 3 4 5

14 An Efficient Polygon Fill Algorithm
(1) Set y = 0 (2) Check y-bucket (3) Add any edges in bucket to active edge table (aet) (4) If aet empty, then set y = y + 1, and go to (2) 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5

15 Active Edge Table (5) Put x-values in order and fill in between
y = 1 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 e 1 5 x 6 max y Dx Dy 8 3 2 7 (5) Put x-values in order and fill in between successive pairs

16 Active Edge Table (6) Set y = y+1; remove any edge from
active table with ymax < y (7) Increment x by Dx / Dy 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 y = 2 e 1 5 x 2/7 7 max y Dx Dy 8 3 2 (8) Return to (2)

17 Next Scan Line At each stage of the algorithm, a span (or spans) of
1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 At each stage of the algorithm, a span (or spans) of pixels are drawn

18 Working in Integers The final efficiency step is to work in integer arithmetic only - this needs an extra column in the aet as we accumulate separately the whole part of x and its fractional part

19 Working in Integers First intersection is at x=0, and the slope of the edge is 7/2 - ie DY=7, DX=2 The successive intersection points are: 0 2/7 4/7 6/7 8/7 etc The corresponding starting pixels for scan line filling are: We can deduce this just by adding DX at each stage, until DY reached at which point DX is reduced by DY: (8-7) etc

20 Integer Active Edge Table
y = 1 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 e 1 5 x 6 max y Dx Dy 8 3 2 7 becomes x int x frac max y Dx Dy e 1 8 2 7 5 6 3 2 2

21 Integer Active Edge Table
At step (7), rather than increment x by Dx/Dy, we increment x-frac by Dx; whenever x-frac exceeds Dy, we add 1 to x-int & reduce x-frac by Dy 1 4 5 6 7 8 9 2 3 10 e1 e2 e3 e4 e5 y = 2 x int x frac max y Dx Dy e 1 2 8 2 7 5 7 3 2 2

22 Getting Started with SVG
<?xml version="1.0" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" "http://www.w3.org/TR/2001/REC-SVG /DTD/svg10.dtd"> <svg width = "300" height = "300"> <!-- canvas size 300 by > <!-- draw red rectangle in middle of canvas --> <rect x = "100" y = "100" width = "100" height = "100" style = "fill:red" /> </svg>


Download ppt "SI23 Introduction to Computer Graphics"

Similar presentations


Ads by Google