March 2010 1

Shape Drawing Algorithms

Shmuel Wimer

Bar Ilan Univ., Engineering Faculty

March 2010 2

Display Window

maxy

minyminx

maxx

World –coordinate limits

y

x0

1

2

3

4

5

0 1 2 3 4 5

Screen –coordinates

(4,2) pixel coordinate

March 2010 3

We’d like to display straight line on the screen.

On raster systems, lines are plotted with pixels which have vertical

and horizontal finite resolution.

The outcome is a jaggy line.

In analog displays, such as vector-scan, a smooth line can be

displayed, as line equation is translated into deflection voltages.

Line Drawing Algorithms

March 2010 4

straight line equation: y mx b

0x

0y

endx

endy

end 00 0

end 0

; y y

m b y mxx x

Straight line drawing uses increments or and finds the

counterpart. If | | 1 , and if | | 1 .

x y

m y m x m x y m

In raster systems lines are plotted with pixels and step sizes in the

horizontal and vertical directions must be sampled at nearest pixel

positions.

March 2010 5

1If 1, sampling at 1 obtains: and pixel

coordinate is obtained by rounding to nearest interger.

k km x y y m

samples the line in unit

steps in one coordinate and the nearest integer value is

calculated in the other coordinate.

Digital differntial analyzer (DDA)

1Similarly, if 1, 1 and 1 .k km y x x m

DDA avoids mutltiplication, but involves floating point

addition. A round-off error is accumulated, drifting pixels

position from the original line.

March 2010 6

is accurate and efficient, using only

incremental integer calculations. Assume 1. We step to

successive columns ( 1).

m

x

Bresenham's algorithm

0 0

1

We start at pixel ( ,y ). Assume that pixel ( ,y ) is decided

to be displayed. Next pixel is either ( +1,y ) or ( +1,y ).

k k

k k k k

x x

x x

1Decision on or is

made according to which

one is closer to the real

of the line.

k ky y

y

ky

y1ky

1kx

March 2010 7

is sampled at next pixel. In real line: 1 .kx y m x b

lowerDistance from lower pixel: 1 .k k kd y y m x b y

From upper pixel: 1 1 1 .upper k k kd y y y m x b

lower upper

Compare distances. Set pixel

according to smaller distance.

2 1 2 2 1.k k

d d

m x y b

ky

y1ky

1kx

lowerd

upperd

March 2010 8

. Multiplying by 0 doesn't cahnge the sign

of difference. The decision parameter is defined by:k

m y x x

p

lower upper

constant

2 2 2 2 1 .k k kp x d d x y y x y x b

If 0 we plot the lower pixel; otherwise upper is drawn.kp

March 2010 9

1 1 1

1

2 2

0 if 02 2 2 .

2 if 0

k k k k k k

kk k

k

p p y x x x y y

py x y y y

x p

1 1 1

constant

The decision can be computed recursively as follows:

2 2 2 2 1 .

k

k k k

p

p y x x y y x b

March 2010 10

Circle Drawing Algorithms

,x y

cx

cy

r 2 2 2

c cx x y y r

We could use above equation to

step along the x axis from xc- r

to xc+ r and calculate y positions

of pixels.

22c cy y r x x

March 2010 11

This requires considerable amount of computation (square root)

The drawing appearance is poor since the vertical spacing

between drawn pixels is uneven.

Appearance can be improved by changing the role of x and y

whenever the absolute value of the slope of circle is crossing 1.

But this requires more computation.

Polar coordinates can be used with

uniform stepping of θ. This spaces

pixels evenly along circumference.

cos

sin

c

c

x x r

y y r

Time consuming due to trigonometric computations.

March 2010 12

We can use large angular steps and

connect the points by straight lines.

For smoother boundary we can use

angular steps of 1/r which plots

pixels approximately one pixel

apart of each other (r∙1/r =1).

O45 ,x y

,x y

,x y

,x y

,y x ,y x

,y x ,y x

Any of the methods can use

symmetry for efficiency.

All methods involve

expensive computations.

March 2010 13

determines the mid point between

two pixels. If it falls inside the circle, the lower pixel is plotted,

otherwise the upper does. Assume w.l.o.g that circle is centered

at 0,0 .

Midpoint Circle Algorithm

, can be added later.c cx y

2 2 2circ ,f x y x y r

circ

0 inside

, 0 boundary

0 outside

f x y

ky

1ky

2kx 1kx kx

midpoint

2 2 2 0x y r

March 2010 14

Successive decision parameters are obtained by incremental

calculations.

2 2 2circ 1, 1 2 1 1 2k k k k kp f x y x y r

Assuming that last plotted pixel was , , we need decide

whether next plotted is 1, or 1, 1 .

k k

k k k k

x y

x y x y

If 0 midpoint is inside the circle and pixel 1, is

closer to circle and plotted. Otherwise 1, 1 does.

k k k

k k

p x y

x y

2 2 21 circ 1 1 1

2 21 1

1, 1 2 2 1 2

2 1 1

k k k k k

k k k k k k

p f x y x y r

p x y y y y

March 2010 15

1 1

11

1 1

The value of used in the calculation of is if 0, or

1 if 0. So the increments of is the following:

2 1 if 0

2 1 2 if 0

k k k k

k k

k kk k

k k k

y p y p

y p p

x pp p p

x y p

1 1 1

1

Evaluations of 2 and 2 are also incremental 2 2 2,

2 2 2. At start position 0, these values are 0 and 2 ,

respectively.

k k k k

k k

x y x x

y y r r

0 0 0 0 circ

2 2

0

is obtained from , 0, , 1, 1 2

1 1 2 5 4 . updates are made by integral

increments and decrements, so if is integer, we set 1 .

p x y r p f r

r r r p

r p r

March 2010 16

y

x1 2 3 4 5 6 7 8 90 10

123

8

9

0

10

567

4

k pk (xk+1,yk+1) 2xk+1 2yk+1

0 - 9 (1,10) 2 20

1 - 6 (2,10) 4 20

2 - 1 (3,10) 6 20

3 6 (4,9) 8 18

4 - 3 (5,9) 10 18

5 8 (6,8) 12 16

6 5 (7,7) 14 14

0 0 0

Example: Draw a circle with 10.

Initialization: 1 10 9 ; 2 0 , 2 20

r

p x y

March 2010 17cx

cyyr

xr

Ellipse Drawing Algorithms

1F

2F

1d

2d

,P x y

1 2 1 2

2 2

1 1

2 2

2 2

2 2

and are foci,

0

F F d d const

x x y y

x x y y const

Ax By Cxy Dx Ey F

2 22 2

Simplified if ellipse axes are parallel

to coordinate axes.

1

cos ; sin

c x c y

c x c y

x x r y y r

x x r y y r

March 2010 18

Unlike circles, symmetry exists only in quadrants.

Midpoint Ellipse Algorithm is working similar to circle with a few

adaptations.

2 2 2 2 2 2ellipse , y x x yf x y r x r y r r

ellipse

0 inside

, 0 boundary

0 outside

f x y

slope 1

yr

xr

region 1

region 2

2 2

2 2

2 2

Move from region 1 to region 2 when 2 2

y x

y x

dy dx r x r y

r x r y

March 2010 19

ky

1ky

2kx 1kx kx

midpoint

2 2 2 2 2 2 0y x x yr x r y r r

ellipse

2 22 2 2 2

1 1, 1 2

1 1 2

k k k

y k x k x y

p f x y

r x r y r r

1 ellipse 1 1

2 22 2 2 21

1 1, 1 2

2 1 2

k k k

y k x k x y

p f x y

r x r y r r

2 21

1 2 2 21 1

2 2 2

2 if 1 01 1

2 2 if 1 0

These terms can be calculated by addition only.

At 0, 2 0 and 2 2

y k y kk k

y k y x k k

y y x x y

r x r pp p p

r x r r y p

r r x r y r r

March 2010 20

0 0 0

2 2 20 ellipse

1 is obtained from , 0, ,

1 1, 1 2 4.

y

y y x y x

p x y r

p f r r r r r

0 0

2 is handled similarly. We could start at the end point

of region1 and proceed clockwise, but it is better to walk

counterclockwise, starting at , ,0 .

k

x

p

x y r

March 2010 21

Polygon Fill Areas

Convex polygons are easy to fill

Concave polygons are more difficult to fill

Some graphics packages support convex polygon filling only.

How should polygon split into convex components?

We’d like to avoid any trigonometric or division operations.

We’ll use vector product a x b for convex / concave test.

March 2010 22

1 2 0z

E E

2 3 0z

E E

3 4 0z

E E

4 5 0z

E E

5 6 0z

E E

6 1 0z

E E

1E1V 2V

3V

5V6V

4V

2E

3E

4E

5E

6E

x y z

i j ix iy iz

jx jy jz

E E E

E E E

u u u

E E

Polygon vertices are counterclockwise

oriented.

The cross product of successive edges

is a perpendicular vector.

Z component is positive for convex

angle and negative for concave.

Only multiplications are involved.

March 2010 23

1Define oriented edge by:

Apply cross product:

, ,

k k k

i j iy jz iz jy iz jx ix jz ix jy iy jxE E E E E E E E E E E E

E V V

E E

A convex corner following concave one can be eliminated by

splitting a triangle and reducing vertex degree, until all concave

corners are eliminated.

The remaining convex polygon can be further split into triangles

by a successive traversal of its vertices.

March 2010 24

The problem turns to filling of triangles

Found concave followed by convex

Tear off triangle

Tear off triangle

March 2010 25

Inside-Outside Tests

?

Odd-even rule: Draw “infinite” ray and count the number of crossings. Odd is inside, even outside.

Avoid passing through vertices.

?

Nonzero winding-number rule: Draw “infinite” directed ray. Traverse edges and check for crossing direction (e.g. by cross product). Add ±1 accordingly. If it sums to zero point is outside, otherwise it is inside.

March 2010 26

Polygon Tables

Objects are described by sets of polygon surface facets.

1E

1V

2V3V

5V

4V

2E

3E

4E5E

6E1 1 1 1

2 2 2 2

3 3 3 3

4 4 4 4

5 5 5 5

VERTEXTABLE

: , ,: , ,: , ,: , ,: , ,

V x y zV x y zV x y zV x y zV x y z

1 1 2

2 2 3

3 3 1

4 3 4

5 4 5

6 5 1

EDGETABLE

: ,: ,: ,: ,: ,: ,

E V VE V VE V VE V VE V VE V V

1 1 2 3

2 3 4 5 6

SURFACE-FACETTABLE

: , ,: , , ,

S E E ES E E E E

March 2010 27

• In hardware implementation these tables translate into

physical RW memories.

• For hardware implementations triangles are preferred,

since it makes SURFACE-FACET MEMORY

homogeneous.

• Data in memories needs to be organized to maximize

pipeline processing of facets:– Vertices are stored such that vertex progression in VERTEX

MEMORY completes new triangle for every vertex.

– Vertex indices are their memory addresses.

• It is the SW application responsibility to triangulate

objects and load HW memories in the right order.

March 2010 28

Plane Equations

• Graphics system processes input data through several

steps:

– Transformation of modeling through viewing pipeline.

– Identification of visible surfaces.

– Rendering of surface facets.

• Information about the spatial orientation of surfaces is

needed

– Plane equations are in order.

– How to calculate those efficiently w/o divisions?

March 2010 29

General plane equation: 0

, , is any point on the plane. , , , are constansts

describing spatial propertis of the plane.

Ax By Cz D

x y z A B C D

1 1 1 2 2 2 3 3 3, , , , , and , , non co-linear ordered

counterclockwise, 1, 1, 2,3.k k k

x y z x y z x y z

A D x B D y C D z k

1 2 3 2 3 1 3 1 2

1 2 3 2 3 1 3 1 2

1 2 3 2 3 1 3 1 2

1 2 3 3 2 2 3 1 1 3 3 1 2 2 1

A y z z y z z y z z

B z x x z x x z x x

C x y y x y y x y y

D x y z y z x y z y z x y z y z

March 2010 30

Front and Back Polygon Faces

• Polygon surfaces enclose objects.– Need to know the outward an inward sides of polygon.

• Need to find the side of a polygon visible by an observer.

A point , , not on the plane satisfies: 0.

If 0 the point , , is behind the plane.

If 0 the point , , is in front of the plane.

x y z Ax By Cz D

Ax By Cz D x y z

Ax By Cz D x y z

2 1 3 1The normal is , , , yielding

plane coeficient. Normal is used for coloring and highlighting.

A B C V V V V N

March 2010 31

Scan-Line Polygon-Fill Algorithms

• This is most time consuming operation in computer graphics.– Use only integer arithmetic with minimum operations

• Polygons are filled with scan-line– The sweep is vertical– A scan-line is the pixels of same y coordinates

Pixels between odd-even

intersections with border

are inside.

y

x1 2 3 4

March 2010 32

11 12 Scan-line y

21 1Scan-line y’

A problem may occur at vertices. Scan-line y’ is okay, but y is not.

The remedy is to traverse edges prior to filling and detect the values

of three consecutive of two successive edges. If they are monotonic

then one of the edges is shortened by one pixel at corner

March 2010 33

Polygon filling takes advantage of y increments by one unit.

,k kx y

1 1,k kx y Scan-line 1ky

Scan-line ky

How to calculate efficiently the intersection of an edge with scan line?

11 1

1

1, 1 k k

k k k kk k

y ym y y x x

x x m

How to avoid division?

March 2010 34

1Calculate interceps by: , k k

y xx m x x

x y

Initialize a counter to 0. Then increment the counter by each time

is incremented by 1 (moving to new scal-line). Once counter meets

or exceeds , is increased by 1 and counter is decreased b

x

y

y x

y .y

This is equivalent to maintaining integer and fractional parts of

intercepts and incrementing the fractional parts until it reaches

the next integer value.

March 2010 35

Instead of truncation we can round to nearest pixel intersection

by comparing the counter to 2. This can be done with integer

arithmetics by adding 2 , comparing to , and then decreasing

counter

x

y

x y

by 2 .y

0 0 0 0

0 0 0 0 0 0 0

0 0 0

Example: 7 3. , : ,0 : , 1,3 : ,

2,6 : , 3,9 3,2 : 1, 4,5 : 1,

5,8 5,1 : 2,...

y x y count x y x y x

y x y y x y x

y y x

0 0 0 0

0 0 0 0 0 0

0 0

Example: 7 3. , : ,0 : , 1,6 : ,

2,12 2, 2 : 1, 3,4 : 1, 4,10

4, 4 : 2,...

y x y count x y x y x

y y x y x y

y x

March 2010 36

Antialiasing

• Graphics primitives generated by raster algorithms have

jagged (stair-step) appearance, called aliasing.– This is due to under sampling.

– Antialiasing compensates for this.

• Sampling rate could increase by higher raster resolution.– Expensive, increase of frame buffer (memory).

– More processing (time, hardware).

– Jagging phenomena is not canceled, but only improved.

• Raster systems capable of gradual intensity of pixels can

support antialiasing by modifying pixel intensity near

boundary of primitives.

March 2010 37

Antialiasing by Supersampling• Treat the screen as if it has finer grid than actual.

• Modify real pixel intensity according to the number of covered sub-pixels

There are 4 possible intensities,

depending on the count of covered

pixels at every 3x3 superpixel

(1,1) is covered by 3 subpixels

(2,2) and ((3,2) are covered by 2 subpixels

(2,1) and ((3,3) are covered by 1 subpixels

March 2010 38

• Line was treated as zero width.

• In case of finite width we count the number of subpixels inside the polygon representing the line.

Useful also for mixing foreground

and background colors in a pixel.

For instance, if foreground is red

and background is blue:

color

5 red 4 bluePixel

9

March 2010 39

1

1

1

1

2

2

2 24

Central pixel is most important and has

a weight of 1/4. Others has a weight of

1/8 and 1/16.

Antialiasing by subpixel Weighting Masks

Antialiasing compensates for line-intensity differences

Diagonal lines are less instance than horizontal

and vertical ones.

Supersampling with higher weights for subpixels

close to diagonal will intensify diagonal lines

March 2010 40

Antialiasing Area Boundaries

Pixel intensities are adjusted along

the boundary of area.

Subdivide area of pixels and double scan-

line. Count how many subpixels are inside.

Scan-line 1

Scan-line 2

75% pixel intensity

March 2010 41

Percentage of pixel area within fill area by midpoint method (Pitteway & Watkinson).

ky0.5ky

1ky

kx 1kx

y mx b

1

Assume that , has been

plotted. The next nearest

line at is either at or at

1.

k k

k k

k

x y

x y

y

mid

if 0 select 11 0.5 ,

if 0 select

or by adding the term 1

kk k

k

yy y m x b y

y

m

if 1 select 1

1 0.5 1if 1 select

kk k

k

m yp m x b y m

m y

March 2010 42

0.5kx 0.5kx kx

0.5ky

0.5ky

ky

0.5ky m x b 0.5ky m x b

boundary line

overlap area

The overlap area of a pixel rectangle at , with the interior

of polygon is: area 0.5 .

We can intensify the pixel for antialiasing accordingly.

k k

k k

x y

mx b y p