Download presentation

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

Similar presentations

© 2021 SlidePlayer.com Inc.

All rights reserved.

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.

Ads by Google