Download presentation

Presentation is loading. Please wait.

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>

Similar presentations

Presentation is loading. Please wait....

OK

SI23 Introduction to Computer Graphics

SI23 Introduction to Computer Graphics

© 2017 SlidePlayer.com Inc.

All rights reserved.

Ads by Google