6.1Si23_03

SI23Introduction to Computer

Graphics

SI23Introduction to Computer

Graphics

Lecture 6 – Filling An Area

6.2Si23_03

Area FillingArea 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?

6.3Si23_03

Definining InteriorsDefinining Interiors

Even-odd rule Non-zero winding rule

6.4Si23_03

An ExampleAn Example

This polygonhas vertices:(0,1)(2,8)(4,6)(7,8)(9,4)(6,1)

and 6 edgese1, .. e60 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

e6

6.5Si23_03

Scan line approachScan line approach

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9 To fill the area,we can work in scan lines.

Take a y-value;find intersectionswith edges.

Join successive pairsfilling in a span ofpixels

e1

e2 e3

e4

e5

e6

6.6Si23_03

Different Cases - the normal case

Different Cases - the normal case

Scan line 5:intersection e1 = 1.14intersection e4 = 8.5

Pixels 2-8 on scanline are filled in

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

e6

6.7Si23_03

Different Cases - Passing through a vertex

Different Cases - Passing through a vertex

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

e6

Scan line 6 intersectse1,e2,e3,e4 at 1.4, 4, 4, 8 respectively- two spans drawn

Scan line 4 intersectse1,e4,e5 at0.9, 9, 9 respectively- when edges areeither side of scanline, just count upperie e4

6.8Si23_03

Different cases - horizontal edgesDifferent cases - horizontal edges

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

e6

A horizontaledge such ase6 can be ignored;it will get drawnautomatically

6.9Si23_03

Pre-Processing the Polygon

Pre-Processing the Polygon

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

We have removede6, and shortenede5 by one scan line

6.10Si23_03

OptimizationOptimization

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

To speed up theintersection calculationsit helps to know where theedges lie:eg e1 goes from scan line 1to scan line 8;e2 from line 8 to line 6

Thus we knowwhich edges totest for each scan line

6.11Si23_03

Bucket Sort the EdgesBucket Sort the Edges

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

In fact it is useful tosort the edges by theirlowest point; we dothis by bucket sort -one bucket per scan line

0:1: e1,e5

2:3:4: e4

5: 6: e2,e3

7:8:9:

6.12Si23_03

Next Optimization - Using Coherence

Next Optimization - Using Coherence

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

The next optimizationis to use scan linecoherence

Eg look at e1 -assume intersectionwith line 1 known (x=0)- then intersectionwith scan line 2 is:x* = x + 1/m (m=slope)ie: x* = x + Dx / Dyie: x* = 0 + 2 / 7 = 2/7

Dy

Dx

6.13Si23_03

Creating An Edge TableCreating An Edge Table

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

It is useful to storeinformation aboutedges in a table:

e

1

1st xmaxy

Dx Dy

0 8 2 7

2

3

4 8 -2 2

4

5

6.14Si23_03

An Efficient Polygon Fill Algorithm

An Efficient Polygon Fill Algorithm

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

(1) Set y = 0

(2) Check y-bucket

(3) Add any edges inbucket to active edge table (aet)

(4) If aet empty,then set y = y + 1,and go to (2)

6.15Si23_03

Active Edge TableActive Edge Table

(5) Put x-values in orderand fill in between successive pairs

e

1

5

x

0

6

maxy

Dx Dy

8

3

2 7

2 2

y = 1

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

6.16Si23_03

Active Edge TableActive Edge Table

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

(6) Set y = y+1;remove any edge fromactive table with ymax < y

(7) Increment x by Dx / Dy

e

1

5

x

2/7

7

maxy

Dx Dy

8

3

2 7

2 2

y = 2

(8) Return to (2)

6.17Si23_03

Next Scan LineNext Scan Line

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

At each stage ofthe algorithm, aspan (or spans) of pixels are drawn

6.18Si23_03

Working in IntegersWorking 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

6.19Si23_03

Working in IntegersWorking in Integers

First intersection is at x=0, and the slope of the edgeis 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

6.20Si23_03

Integer Active Edge TableInteger Active Edge Table

e

1

5

x

0

6

max y

Dx Dy

8

3

2 7

2 2

y = 1

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

becomes

0 0 8

e xint

xfrac

max y

Dx Dy

1

5

2 7

6 0 3 2 2

6.21Si23_03

Integer Active Edge TableInteger Active Edge Table

0 1 4 5 6 7 8 92 3 10

2

3

0

1

4

5

6

7

8

9

e1

e2 e3

e4

e5

At step (7), rather thanincrement 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

0 2 8

e xint

xfrac

max y

Dx Dy

1

5

2 7

7 0 3 2 2

y = 2

6.22Si23_03

Getting Started with SVGGetting 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>