SI23 Introduction to Computer Graphics Lecture 6 – Filling An Area

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?

Definining Interiors Even-odd rule Non-zero winding rule

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

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

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

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

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

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

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

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:

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* = 0 + 2 / 7 = 2/7 Dy Dx

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

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

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

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)

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

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

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: 0 1 1 1 2 We can deduce this just by adding DX at each stage, until DY reached at which point DX is reduced by DY: 0 2 4 6 1 (8-7) etc

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

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

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