Basic Raster Graphics Algorithms for Drawing 2D Primitives Chapter 3

Basic Raster Graphics Algorithms for Drawing

2D PrimitivesChapter 3Chapter 3

Chapter 3 -- Basic Raster Graphics Algorithms for Drawing 2D Primitives

2

1. Overview

The purpose of this chapter is to look at a The purpose of this chapter is to look at a graphics package from the implementor’s point graphics package from the implementor’s point of view -- of view -- that is, in terms of the fundamental algorithms that is, in terms of the fundamental algorithms

for for scan converting primitives to pixels, subject to their scan converting primitives to pixels, subject to their

attributes, and attributes, and for clipping them against an upright clip rectangle for clipping them against an upright clip rectangle


3

The algorithms in this chapter are discussed in The algorithms in this chapter are discussed in terms of the 2D integer Cartesian grid, terms of the 2D integer Cartesian grid, but most of the scan-conversion algorithms can but most of the scan-conversion algorithms can

be extended to floating point, be extended to floating point, and the clipping algorithms can be extended to and the clipping algorithms can be extended to

both floating point and 3D.both floating point and 3D.

The final section introduces the concept of The final section introduces the concept of antialiasingantialiasing the minimizing of jaggies by making use of a the minimizing of jaggies by making use of a

systems ability to vary a pixels intensity. systems ability to vary a pixels intensity.


4

2. Scan Converting Lines

A scan conversion algorithm for lines A scan conversion algorithm for lines computes the coordinates of the pixel that lie computes the coordinates of the pixel that lie on or near the ideal line.on or near the ideal line.

For now, consider only a 1-pixel-thick line, we For now, consider only a 1-pixel-thick line, we will consider thick primitives, and deal with will consider thick primitives, and deal with style later in the chapter.style later in the chapter.


5

Basic properties of good scan conversion:Basic properties of good scan conversion: Straight lines should appear as straight linesStraight lines should appear as straight lines Lines should pass through the endpoints Lines should pass through the endpoints

(if possible)(if possible)

All lines should be drawn with constant All lines should be drawn with constant brightness brightness (regardless of length and orientation)(regardless of length and orientation)

As rapid as possibleAs rapid as possible


6

To visualize the geometry, most people To visualize the geometry, most people represent a pixel as a circular dot centered at represent a pixel as a circular dot centered at the pixel’s the pixel’s (x,y)(x,y) location on the integer grid. location on the integer grid.

This is a convenient approximation to the cross-This is a convenient approximation to the cross-section of the CRT’s electron beam.section of the CRT’s electron beam. The exact spacing between spots on an actual The exact spacing between spots on an actual

display can vary greatly among systems. display can vary greatly among systems. Some overlap while others leave spaces, but almost Some overlap while others leave spaces, but almost

all have a tighter spacing in the horizontal than in all have a tighter spacing in the horizontal than in the vertical direction.the vertical direction.


7

This figure shows a highly magnified view of a This figure shows a highly magnified view of a 1-pixel-thick line and the ideal line that it 1-pixel-thick line and the ideal line that it approximates.approximates.

The intensified pixels are shown as filled The intensified pixels are shown as filled circles, and the nonintensified pixels are shown circles, and the nonintensified pixels are shown as unfilled circles.as unfilled circles.


8

2.1 The Basic Incremental Algorithm The simplest strategy for scan converting lines The simplest strategy for scan converting lines

is to use the slope-intercept formulais to use the slope-intercept formula y = mx+By = mx+B Given two points on a lineGiven two points on a line (x (x00,y,y00)) and and (x(x11,y,y11))

compute the slope, compute the slope, mm, of the line, of the line remember, remember, m = m = y/y/x = (yx = (y11-y-y00)/(x)/(x11-x-x00) )

B = yB = y00-mx-mx00


9

The basic idea is to The basic idea is to increment increment xx by 1 from the starting point by 1 from the starting point (x(x00,y,y00))

to the ending point to the ending point (x(x11,y,y11) )

calculate y at each point, calculate y at each point, yyii=mx=mxii+B+B

turn on pixel turn on pixel (x(xii,Round(y,Round(yii)))) where where Round(yRound(yii)=Floor(0.5+y)=Floor(0.5+yii))

This brute force strategy is inefficient because This brute force strategy is inefficient because each iteration requires:each iteration requires: floating point multiplicationfloating point multiplication floating point additionfloating point addition Call to function Call to function Floor( )Floor( )


10

We can eliminate the multiplication if we note:We can eliminate the multiplication if we note: yyi+1i+1 = mx = mxi+1i+1 + B + B

= m(x= m(xii + + x) + Bx) + B

=y=yii + m + mxx

and if and if x == 1x == 1 yyi+1i+1 = y = yii+m+m


11

Other Cases:Other Cases: If the slope is greater than 1, If the slope is greater than 1,

you can swap the values of x and yyou can swap the values of x and y

If the slope is negative, If the slope is negative, you start from the right endpoint and go to the left.you start from the right endpoint and go to the left.

Drawbacks:Drawbacks: Floating point additionFloating point addition Round ( )Round ( ) Accumulation of floating point errorsAccumulation of floating point errors


12

2.2 Midpoint Line Algorithm

In 1965 Bresenham developed what is now the In 1965 Bresenham developed what is now the classic line drawing algorithm that removed classic line drawing algorithm that removed the rounding and used only integer arithmetic.the rounding and used only integer arithmetic.

He showed that his algorithm provided the He showed that his algorithm provided the best-fit approximation to the true-line by best-fit approximation to the true-line by minimizing the error.minimizing the error.

We are going to look at a generalization called We are going to look at a generalization called the midpoint technique.the midpoint technique.


13

Main Idea:Main Idea: Assumption:Assumption:

0 <= m <= 10 <= m <= 1

We have selected P, We have selected P, We must chooseWe must choose

E or NEE or NE

Define Q as Define Q as the intersection of the line with the intersection of the line with x=xx=xpp+1+1

If Q is above M, select NE, else select EIf Q is above M, select NE, else select E

Goal: Calculate which side of M the line is on.Goal: Calculate which side of M the line is on.


14

Line Representation ReviewLine Representation Review Implicit representation:Implicit representation:

F(x,y) = ax + by + c = 0F(x,y) = ax + by + c = 0

Slope-intercept representation:Slope-intercept representation: y = mx + B y = mx + B = (y= (y11-y-y00)/(x)/(x11-x-x00) x + B) x + B = dy/dx x + B= dy/dx x + B

How are they related?How are they related? xdy - ydx + Bdx = 0 (a=dy, b=-dx, C=Bdx)xdy - ydx + Bdx = 0 (a=dy, b=-dx, C=Bdx)


15

The sign of The sign of F(x,y)F(x,y) for any point for any point (x,y)(x,y) F(x,y) = 0 => F(x,y) = 0 => point is on the linepoint is on the line F(x,y) > 0 => F(x,y) > 0 => point is below the linepoint is below the line F(x,y) < 0 => F(x,y) < 0 => point is above the linepoint is above the line

Check the sign ofCheck the sign of d=F(x d=F(xpp+1, y+1, ypp+1/2)+1/2) ifif d > 0, d > 0, choose pixel NEchoose pixel NE if if d < 0, d < 0, choose pixel Echoose pixel E if if d==0, d==0, choose either (we pick E)choose either (we pick E)

How should How should dd be computed? Incrementally! be computed? Incrementally!


16

Remember by definition,Remember by definition, d = a(xd = a(xpp+1)+b(y+1)+b(ypp+1/2)+c+1/2)+c

If If E E was chosen, then we shiftwas chosen, then we shift M M over 1over 1 ddnewnew=F(M1)= F(x=F(M1)= F(xpp+2, y+2, ypp+1/2)+1/2)

= a(x= a(xpp+2)+b(y+2)+b(ypp+1/2)+c+1/2)+c

but, rememberbut, remember d doldold = F(x = F(xpp+1, y+1, ypp+1/2)+1/2)

therefore:therefore: d dnewnew=d=doldold+a +a OROR E = aE = a

If If NE NE was chosen, then we shiftwas chosen, then we shift M M over & up 1over & up 1 ddnewnew=F(M2)= F(x=F(M2)= F(xpp+2, y+2, ypp+3/2)+3/2)

= a(x= a(xpp+2)+b(y+2)+b(ypp+3/2)+c+3/2)+c

also,also, d doldold = F(x = F(xpp+1, y+1, ypp+1/2)+1/2)

therefore:therefore: d dnewnew=d=doldold+a + b +a + b OR OR NE=a+bNE=a+b


17

Short Summary of the midpoint technique:Short Summary of the midpoint technique: At each step we choose between two pixels based At each step we choose between two pixels based

upon the sign of the decision variable (upon the sign of the decision variable (dd)) Then we update the Then we update the dd by adding by adding

• E or E or E E

• depending on the choice of the pixeldepending on the choice of the pixel

Now, how do we get started?Now, how do we get started? We just need the first We just need the first dd value. value.


18

The first midpoint, The first midpoint, ddstartstart, is , is

• F(xF(x00+1,y+1,y00+1/2) = a(x+1/2) = a(x00+1)+b(y+1)+b(y00+1/2)+c+1/2)+c

• = ax= ax00+by+by00+c+a+b/2+c+a+b/2

• = F(x= F(x00,y,y00)+a+b/2)+a+b/2

• BUT BUT (x(x00,y,y00) ) is on the line, so is on the line, so F(xF(x00,y,y00)=0)=0

• therefore therefore ddstartstart = a+b/2 = dy-dx/2 = a+b/2 = dy-dx/2

Can we get rid of the division?Can we get rid of the division?• Change the function F( ) to multiply everything by 2Change the function F( ) to multiply everything by 2• This changes the scalars (including This changes the scalars (including EE and and NENE) but does ) but does

not change the sign (which is what we are interested in)not change the sign (which is what we are interested in)

• So, So, ddstartstart = 2dy - dx = 2dy - dx

So, now we have an algorithm based on integer So, now we have an algorithm based on integer arithmetic only.arithmetic only.


19

Example: Example: • (x0,y0)= (5,8)(x0,y0)= (5,8)

• (x1,y1)=(9,11)(x1,y1)=(9,11)

• dy = dy =

• dx = dx =

• E = 2dy =E = 2dy =

• NE = (dy-dx)*2 =NE = (dy-dx)*2 =

• dstart = 2dy - dx =dstart = 2dy - dx =

– choose: E or NEchoose: E or NE

• dnew =dnew =


• dnew =dnew =


• dnew =dnew =



20

2.3 Additional Issues

Endpoint order:Endpoint order: A line from A line from PP00 to to PP11 should contain the same set should contain the same set

of pixels as the line from of pixels as the line from PP11 to to PP00.. The only place where the choice of the pixel is The only place where the choice of the pixel is

dependent on the direction of the line is where the dependent on the direction of the line is where the line passes directly through the midpoint.line passes directly through the midpoint.

• Going from left to right we picked Going from left to right we picked EE• Therefore going from right to left we pick Therefore going from right to left we pick SWSW, not , not WW

We can’t just swap endpoints, since line styles are not We can’t just swap endpoints, since line styles are not swappable.swappable.


21

Starting at the edge of a clip rectangleStarting at the edge of a clip rectangle


22

Varying the intensity of a line as a function of Varying the intensity of a line as a function of slopeslope Line B has slope of 1 and is times as long Line B has slope of 1 and is times as long

as A, yet each line has 10 pixels.as A, yet each line has 10 pixels. If intensity per pixel is constant, then the If intensity per pixel is constant, then the

intensity per unit length is easily discernable by intensity per unit length is easily discernable by the user.the user.

Solution: make intensity a Solution: make intensity a function of the slope.function of the slope. Antialiasing (3.14) will cover Antialiasing (3.14) will cover

another method.another method.

2


23

Outline primitives composed of linesOutline primitives composed of lines Polylines Polylines

can be scan-converted one line segment at a time.can be scan-converted one line segment at a time.

Rectangles and Polygons Rectangles and Polygons can be done a line segment at a time, but this would can be done a line segment at a time, but this would

result in some pixels being drawn outside.result in some pixels being drawn outside. Sect 3.4 and 3.5 cover these.Sect 3.4 and 3.5 cover these.

Shared verticesShared vertices care must be taken to draw shared vertices of care must be taken to draw shared vertices of

polylines only once.polylines only once.• Drawing twice can change the color, shut it off, or if Drawing twice can change the color, shut it off, or if

writing to film make the intensity too bright.writing to film make the intensity too bright.


24

3. Scan Converting Circles

Review of basic circle formulas:Review of basic circle formulas:

xx22+y+y22 = R = R22

circle centered at the origin circle centered at the origin (0,0)(0,0) with radius with radius R.R.

(x-x(x-x00))22 + (y-y + (y-y00))22 = R = R22

Circle centered at Circle centered at (x(x00,y,y00)) with radius with radius RR..


25

A simple algorithmA simple algorithm Overview:Overview:

Draw only one quarter of the circle,Draw only one quarter of the circle, use symmetry for the other three quarters.use symmetry for the other three quarters.

Outline:Outline: Step 1: xStep 1: x11 = 0, = 0,x = 1 x = 1 Step 2: Step 2: Step 3: round(yStep 3: round(yii))

Step 4: draw (xStep 4: draw (xii,round(y,round(yii))))

Step 5:xStep 5:xii=x=xiioldold++xx

Step 6: if xStep 6: if xii <= R goto Step 2 <= R goto Step 2

22ii xRy


26

Computational cost:Computational cost: floating point multiplications, subtractions, floating point multiplications, subtractions, square-square-

root( ), round( )root( ), round( )

Problems:Problems: large gaps for x values close to Rlarge gaps for x values close to R


27

3.1 Eight-Way Symmetry

Draw one octant of the circleDraw one octant of the circle


28

3.2 Midpoint Circle Algorithm

Bresenham in 1977 developed an incremental Bresenham in 1977 developed an incremental circle generator (for pen plotters) that is the circle generator (for pen plotters) that is the foundation for the algorithm we will discuss.foundation for the algorithm we will discuss.

We will begin at x=0, and continue through the We will begin at x=0, and continue through the first octant. ( ) first octant. ( ) We will use the symmetry from the previous We will use the symmetry from the previous

subsection to plot the rest of the circle.subsection to plot the rest of the circle.

2Rx


29

Overview:Overview: Assume that P has been chosen as closest to the Assume that P has been chosen as closest to the

circle.circle. The next choice is pixel E and SE.The next choice is pixel E and SE.

if M is inside the circle, choose Eif M is inside the circle, choose E if M is outside, choose SEif M is outside, choose SE


30

F(x,y) = xF(x,y) = x22 + y + y22 - R - R22 = 0 = 0

The sign of The sign of F(x,y)F(x,y) for any point for any point (x,y)(x,y) F(x,y) = 0 => F(x,y) = 0 => point is on the circlepoint is on the circle F(x,y) > 0 => F(x,y) > 0 => point is outside the circlepoint is outside the circle F(x,y) < 0 => F(x,y) < 0 => point is inside the circlepoint is inside the circle

Check the sign ofCheck the sign of d=F(x d=F(xpp+1, y+1, ypp-1/2)-1/2) ifif d > 0, d > 0, choose pixel SEchoose pixel SE if if d < 0, d < 0, choose pixel Echoose pixel E if if d==0, d==0, choose either (we pick SE)choose either (we pick SE)


31

Remember by definition:Remember by definition:• d = (xd = (xpp+1)+1)22+(y+(ypp-1/2)-1/2)22-R-R22

If If E E was chosen, then we shiftwas chosen, then we shift M M over 1over 1 ddnewnew=F(M1)= F(x=F(M1)= F(xpp+2, y+2, ypp-1/2)-1/2)

= (x= (xpp+2)+2)22+(y+(ypp-1/2)-1/2)22-R-R22

a bunch of algebra later we geta bunch of algebra later we get ddnewnew=d=doldold+(2x+(2xpp+3) +3) OROR E = (2xE = (2xpp+3) +3)

If If SE SE was chosen, then was chosen, then M M goes over & down 1goes over & down 1 ddnewnew=F(M2)= F(x=F(M2)= F(xpp+2, y+2, ypp-3/2)-3/2)

= (x= (xpp+2)+2)22+(y+(ypp-3/2)-3/2)22-R-R22

more algebra...more algebra... ddnewnew=d=doldold+(2x+(2xpp-2y-2ypp+5) +5) OR OR SE= +(2xSE= +(2xpp-2y-2ypp+5) +5)


32

Did you notice thatDid you notice that E E andand SE SE were not were not constants? constants?

Short Summary:Short Summary: choose between choose between EE and and SESE, based on the sign of , based on the sign of dd Update Update d d by adding either by adding either E E oror SE SE

All that remains is to compute the initial All that remains is to compute the initial condition, condition, ddstartstart..


33

How should we compute How should we compute ddstartstart.. The first midpoint will be at The first midpoint will be at (1,R-1/2)(1,R-1/2)

• F(1, R - 1/2) = 1 + (R - 1/2)F(1, R - 1/2) = 1 + (R - 1/2)22 - R - R22

• = 5/4 - R= 5/4 - R

Moving the algorithm from floats to intsMoving the algorithm from floats to ints Define Define h = d - 1/4 h = d - 1/4

• then replacethen replace d d byby h+1/4 h+1/4

hhstartstart = 1 - R = 1 - R Now,Now, d<0 d<0 becomesbecomes h<-1/4 h<-1/4

• but since these are all ints, it is equivalent tobut since these are all ints, it is equivalent to h<0 h<0

Now replace Now replace hh with with dd, and you have , and you have Program 3.4 pg 83.Program 3.4 pg 83.


34

Second-order differencesSecond-order differences If E is chosen: If E is chosen: (x(xpp, y, ypp) --> (x) --> (xpp+1, y+1, ypp))

• EEoldold = 2x = 2xpp+3+3

• EEnewnew = 2(x = 2(xpp+1)+3+1)+3

• EEnewnew - - EEold old = 2= 2

• or or EEnewnew = = EEold old + 2+ 2

• SESEoldold = 2x = 2xpp-2y-2ypp+5+5

• SESEnewnew = 2(x = 2(xpp+1)+3+1)+3

• SESEnewnew - - SESEold old = 2= 2

• or or SESEnewnew = = SESEold old + 2+ 2


35

If SE is chosen: If SE is chosen: (x(xpp, y, ypp) --> (x) --> (xpp+1, y+1, ypp-1)-1)

• EEoldold = 2x = 2xpp+3+3

• EEnewnew = 2(x = 2(xpp+1)+3+1)+3

• EEnewnew - - EEold old = 2= 2

• or or EEnewnew = = EEold old + 2+ 2

• SESEoldold = 2x = 2xpp-2y-2ypp+5+5

• SESEnewnew = 2(x = 2(xpp+1) - 2(y+1) - 2(ypp - 1) + 5 - 1) + 5

• SESEnewnew - - SESEold old = 4= 4

• or or SESEnewnew = = SESEold old + 4+ 4


36

The revised algorithm has the following steps:The revised algorithm has the following steps:• Choose the pixel based on the sign of Choose the pixel based on the sign of dd computed during computed during

the previous iteration.the previous iteration.

• Update Update dd based with either based with either E or E or SE.SE.

• Update the Update the ’s to take into account the move to the new ’s to take into account the move to the new pixel using the constant differences computed previously.pixel using the constant differences computed previously.

• Do the move.Do the move.

How should How should EE and and SESE be initialized? be initialized?• Use the starting point (0,R)Use the starting point (0,R)

• EEstartstart = 2x = 2xpp+3 = 3+3 = 3

• SESEstartstart = 2x = 2xp p - 2y- 2ypp + 5 = 5 - 2R + 5 = 5 - 2R


37

4. Filling Rectangles

The task of filling primitives can be broken The task of filling primitives can be broken down into two parts:down into two parts: the decision on which pixels to fillthe decision on which pixels to fill and the easier decision of what to fill them withand the easier decision of what to fill them with

We will first discuss filling unclipped We will first discuss filling unclipped primitives with a solid colorprimitives with a solid color We will see patterns in Section 6We will see patterns in Section 6


38

In general, determining which pixels to fill In general, determining which pixels to fill consists of taking successive scan lines that consists of taking successive scan lines that intersect the primitive and filling in spans of intersect the primitive and filling in spans of adjacent pixels from left to right.adjacent pixels from left to right.

Basically we look for those pixels at which Basically we look for those pixels at which changes occur.changes occur.

By doing this, we take advantage of the By doing this, we take advantage of the coherencecoherence of the object -- of the object -- the fact that is does not change very rapidly.the fact that is does not change very rapidly.


39

5. Filling Polygons

The general polygon scan-conversion The general polygon scan-conversion algorithm we will study next handles both algorithm we will study next handles both convex and concave polygons, even those that convex and concave polygons, even those that are self-intersecting or have interior holes.are self-intersecting or have interior holes.

It operates by computing spans that lie between It operates by computing spans that lie between left and right edges of the polygon.left and right edges of the polygon.


40

In this figure we can see the basic polygon In this figure we can see the basic polygon scan-conversion process.scan-conversion process. Note: for line 8 a and d Note: for line 8 a and d

are at integer values, whereas are at integer values, whereas b and c are not.b and c are not.

We must determine which pixels on each scan We must determine which pixels on each scan line are within the polygon, and we must set the line are within the polygon, and we must set the corresponding pixels (x=2 through 4, and 9 corresponding pixels (x=2 through 4, and 9 through 13) to their appropriate value.through 13) to their appropriate value.

We then repeat this process for each scan line We then repeat this process for each scan line that intersects the polygon.that intersects the polygon.


41

This figure shows one problemThis figure shows one problem If we use the midpoint line scan-conversion If we use the midpoint line scan-conversion

algorithm to find the end of spans, we will select algorithm to find the end of spans, we will select pixels outside the polygonpixels outside the polygon

Not good for polygons that share edges.Not good for polygons that share edges.

(a) uses midpoint (b) uses interior only(a) uses midpoint (b) uses interior only


42

As with the original midpoint algorithm, we will As with the original midpoint algorithm, we will use an incremental algorithm to calculate the use an incremental algorithm to calculate the span extrema on one scan line from those on the span extrema on one scan line from those on the previous scan line. previous scan line.

In scan line 8 of this figure, In scan line 8 of this figure, there are two spans of pixelsthere are two spans of pixels

These spans can be filled in a three step processThese spans can be filled in a three step process Find the intersections of the scan line with all edges Find the intersections of the scan line with all edges

of the polygon.of the polygon. Sort the intersections by increasing x coordinateSort the intersections by increasing x coordinate Fill pixels between pairs that lie interior to the Fill pixels between pairs that lie interior to the

polygonpolygon


43

The first two steps will be covered later, so let The first two steps will be covered later, so let us look at the span filling strategy.us look at the span filling strategy.

In this figure the sorted coordinates are:In this figure the sorted coordinates are: 2, 2, 4.5, 4.5, 8.5, and 8.5, and 1313

When dealing with the span filling there are four When dealing with the span filling there are four elaborations we need to make.elaborations we need to make.


44

These elaborations are: Given an intersection with an arbitrary, fractional x

value, how do we determine which pixel on either side of that intersection is interior?

How do we deal with the special case of intersections at integer pixel coordinates?

How do we deal with the special case in the second elaboration for shared vertices?

How do we deal with the special case in the second elaboration in which the vertices define a horizontal edge.


45

To handle the first elaboration, we say that if we are approaching a fractional intersection to the right

and inside the polygon, we round down the x coordinate of the intersection to define the interior pixel;

if we are outside the polygon, we round up to be inside,

We handle the second elaboration by applying the criterion we used to avoid conflicts at shared edges of rectangles

If the leftmost pixel in a span has integer x coordinate, we define it to be interior;

• If the rightmost pixel has integer x coordinate, we define it to be exterior.


46

For the third case, we count the ymin vertex of an edge in the parity calculation, but not the ymax vertex;

therefore a ymax vertex is drawn only if it is the ymin vertex for the adjacent edge.

Consider vertex A in this example. It is counted in the parity calculation since it is the ymin for FA, and ignored as the ymax for AB

Thus edges are treated as intervals (closed at ymin, and open at ymax)


47

For the fourth case (horizontal edges) the desired effect is that, as with rectangles, bottom edges are drawn but top edges are not.

We will see int he next subsection that this happens if we follow the ymax ymin rules just outlined.

Examples: scan line 8

note pixel at d is not inside polygon by second clarification, therefor it is not drawn.


48

Examples (cont.): scan line 3

A counts since it is a ymin for AF.

scan line 1 hits vertex B AB and BC have their ymins at B

therefore both change the parity therefore B is drawn.

scan line 9 hits vertex F FA and EF have their ymaxs at F (therefore neither

change the parity) therefore nothing is drawn


49

5.1 Horizontal Edges

We deal properly with horizontal edges by not counting their vertices

Here are the rules: Don’t consider the vertex contribution for the

horizontal edge Invert the parity if the vertex is a ymin of some

edge. Do not invert if the vertex is a ymax of some edge


50

Examples:Examples: Consider the bottom edge AB.

Vertex A is a ymin for edge JA, • and AB does not contribute.

• Therefore the parity is odd and the span AB is drawn.

Vertical edge BC has its ymin at B, • but again AB does not contribute.

• The parity becomes even, and the span is terminated.

At vertex J, edge IJ has a ymin vertex but edge JA does not, so the parity becomes odd and the span is drawn to edge BC.


51

Examples (cont.):Examples (cont.):

The span that starts at edge IJ (and hits C) sees no change at C because C is a ymax vertex for

BC, • so the span continues along bottom edge CD

• However at D, the edge DE has a ymin, so the parity s reset to even and the span ends.


52

Examples (cont.):Examples (cont.): The span that starts at I

the edge IJ has a ymax and edge HI does not contribute,

• so parity stays even and the top edge IH is not drawn.

• At H, however, edge GH has a ymin, so the parity becomes odd and the span is drawn from H to the pixel to the left of the intersection with edge EF

Finally, there is no ymin vertex at G, nor is there one at F, so the top edge GF is not drawn.


53

Issues:Issues: Good:

Deals with shared vertices in a polygon Deals with edges shared by two adjacent polygons Deals with horizontal edges It also allows self-intersecting polygons.

Bad: It omits pixels it cannot totally avoid writing shared pixels multiple

times without a history.


54

5.2 Slivers

There is another problem with our scan-conversion algorithm, one that is not resolved as satisfactorily as is that of horizontal edges: polygons with slivers – an area so thin that its interior does not contain a distinct span for each scan line.


55

This problem of having missing pixels is another example of the aliasing problem – representing a continuous signal with a discrete approximation.

If we had multiple bits per pixel, we could use antialiasing techniques as introduced for lines in 3.14


56

5.3 Edge Coherence and the Scan-Line Algorithm

Step 1 in our procedure – calculating intersections – must be done cleverly. Brute Force Method: (very slow)

• test every polygon edge for intersection with every scan line.

Efficient method:• take advantage of edge coherence

Note: Calculate the x intercept based upon the previous one.

• And this can be done completely with integers.


57

Now we can develop a scan-line algorithm that takes advantage of this edge coherence. We will use a data structure called the active-edge

table (AET)• the edges in the AET are sorted on their x intersection

values, so we can fill the spans defined by pairs of intersection values (span extremas)

• As we move to the next scan line, y+1, the AET is updated

– first those edges in the table whose ymax = y are deleted

– second those edges not in the table whose ymin=y+1 are added

– finally, new x intersections are calculated using the incremental edge algorithm


58

To make the addition of edges to the AET efficient, we initially create a global edge table (ET) this contains all edges

sorted by their smaller y coordinate

the ET is typically built using a bucket sort, with as many buckets as there are scan lines.

Inside the bucket they are sorted by the x coordinate at the lower endpoint.


59

Once the ET has been filled, here is our algorithm:• set y to the smallest y coordinate with an entry in the ET

• initialize AET to empty.

• Repeat until AET and ET are empty.

– move from ET to AET bucket y

– remove from AET those entries for which y=ymax, then sort AET on x

– fill in the desired pixel values on scan y using pairs of x coordinates from AET

– y++

– for each nonvertical edge in AET, update x for the new y (use slope,…)


60

6. Pattern Filling

Introduction: So far we have filled the interiors of a primitive

with a solid color. Now we want to consider filling with a pattern

We do this by adding extra control to the part of the scan conversion algorithm that actually writes each pixel.


61

6.1 Pattern Filling Using Scan Conversion

The main issue for filling with pattern is the relation of the area of the pattern to that of the primitive. --- Where is the pattern anchored?

• Choice 1 – Anchor to the leftmost pixel in the first row.

– some primitives (circles) cause you problems…

• Choice 2 – Have the programmer specify the anchor.

• Choice 3 – consider the entire screen as tiled with the primitive (anchor is lower left corner of the screen)

– computationally efficient and easy.


62

6.2 Pattern Filling without Repeated Scan Conversion Another technique is to scan convert the Another technique is to scan convert the

primitive first into a rectangular work area, and primitive first into a rectangular work area, and then to write each pixel from the bitmap to the then to write each pixel from the bitmap to the appropriate place in the canvas.appropriate place in the canvas.

This two-step process is twice as much work as This two-step process is twice as much work as filling during scan conversion, and filling during scan conversion, and


63

This two-step process is twice as much work as This two-step process is twice as much work as filling during scan conversion, filling during scan conversion, and therefore is not worthwhile for primitives and therefore is not worthwhile for primitives

that are encountered and scan-converted only that are encountered and scan-converted only once.once.

It pays off however for primitives that would It pays off however for primitives that would otherwise be scan-converted repeatedly.otherwise be scan-converted repeatedly. Fixed size fonts,Fixed size fonts, ......


64

7. Thick Primitives

Conceptually, you produce thick primitives by Conceptually, you produce thick primitives by tracing the scan-converted single pixel outline tracing the scan-converted single pixel outline primitive.primitive.

But there are a lot of questions:But there are a lot of questions: What shape is the brush,What shape is the brush, If non-circular, what is the orientation,If non-circular, what is the orientation, ……


65

There are four basic methods for drawing thick There are four basic methods for drawing thick primitivesprimitives The first method uses more than 1 pixel for The first method uses more than 1 pixel for

each column or row during scan conversion.each column or row during scan conversion. The second traces the pen’s cross section along The second traces the pen’s cross section along

the single pixel outline of the primitive.the single pixel outline of the primitive. The third draws two copies of the primitive a The third draws two copies of the primitive a

thickness thickness tt apart and fills in the space. apart and fills in the space. The fourth approximates all primitives by The fourth approximates all primitives by

polylines and then uses a thick line for each polylines and then uses a thick line for each polyline segment.polyline segment.


66

7.1 Replacing Primitives

A quick extension to the scan-conversion inner A quick extension to the scan-conversion inner loop to write multiple pixels at each computed loop to write multiple pixels at each computed pixel works reasonably well for lines;pixel works reasonably well for lines; Here pixels are duplicated in columns for lines Here pixels are duplicated in columns for lines

with -1<slope<1 with -1<slope<1 and in rows for all other lines.and in rows for all other lines.


67

Problems:Problems: The line ends are always horizontal or vertical, The line ends are always horizontal or vertical,

which is not pleasing for rather thick lines. which is not pleasing for rather thick lines.


68

Problems (cont.)Problems (cont.) The pixel replication algorithm also produces The pixel replication algorithm also produces

noticeable gaps in places where line segments noticeable gaps in places where line segments meet at an angle, and misses pixels where there meet at an angle, and misses pixels where there is a shift from horizontal to vertical replication is a shift from horizontal to vertical replication


69

Problems (cont.)Problems (cont.) The thickness of lines varies by slope (another The thickness of lines varies by slope (another

aliasing problem) if the thickness is horizontal aliasing problem) if the thickness is horizontal or vertically determined.or vertically determined.

Even Thicknesses is also a problemEven Thicknesses is also a problem

Altogether pixel replication is an efficient but Altogether pixel replication is an efficient but crude approximation that works best for crude approximation that works best for primitives that are not very thick.primitives that are not very thick.


70

7.2 The Moving Pen

Choosing a rectangular pen whose center or Choosing a rectangular pen whose center or corner travels along the line works reasonably corner travels along the line works reasonably well for lines.well for lines.


71

Problems:Problems: The problems here are different. The line is The problems here are different. The line is

now thicker at the angle than it is on the now thicker at the angle than it is on the horizontal.horizontal.


72

8. Clipping in a Raster World

As noted earlier, clipping and scan-conversion As noted earlier, clipping and scan-conversion need to be as fast as possible.need to be as fast as possible.

Clipping can be done:Clipping can be done: Analytically,Analytically, On the fly during scan-conversion,On the fly during scan-conversion, or as part of CopyPixelor as part of CopyPixel


73

9. Clipping Lines

This section treats analytic clipping of lines This section treats analytic clipping of lines against rectangles; against rectangles; algorithms for clipping other primitives are algorithms for clipping other primitives are

handled in future sectionshandled in future sections

Although there are specialized algorithms for Although there are specialized algorithms for rectangle and polygon clipping, it is important to rectangle and polygon clipping, it is important to note that primitives built out of lines can be note that primitives built out of lines can be clipped by repeated application of the line clipper.clipped by repeated application of the line clipper.


74

Lines intersecting a rectangular clip region are Lines intersecting a rectangular clip region are always clipped into a single line segmentalways clipped into a single line segment Here are several examples of clipped lines:Here are several examples of clipped lines:


75

9.1 Clipping Endpoints

Before we discuss clipping lines, let us look at Before we discuss clipping lines, let us look at the simpler problem of clipping points.the simpler problem of clipping points.

For a point to be inside, four inequalities must For a point to be inside, four inequalities must be satisfied:be satisfied:

maxmin xxx

maxmin yyy


76

9.2 Clipping Lines by Solving Simultaneous Equations To clip a line, we need only consider its To clip a line, we need only consider its

endpoints.endpoints. If both endpoints lie inside the clip rectangle, If both endpoints lie inside the clip rectangle,

the line can be trivially accepted (AB)the line can be trivially accepted (AB) If one is inside and one outside (CD), the line If one is inside and one outside (CD), the line

intersects, and we must compute the intersects, and we must compute the intersection point.intersection point.

If both are outside, it may or may not intersect If both are outside, it may or may not intersect the clip rectangle. We have further work to do.the clip rectangle. We have further work to do.


77

The brute force method:The brute force method: Find the intersection points for the line with each Find the intersection points for the line with each

of the four clip-rectangle edges.of the four clip-rectangle edges. For each line and edge, we take the two lines and For each line and edge, we take the two lines and

intersect themintersect them then we test whether the intersection is interior then we test whether the intersection is interior

• G’ and H’ are, G’ and H’ are, • I’ and J’ are not.I’ and J’ are not.

Altogether, the brute-force approach involves Altogether, the brute-force approach involves considerable calculation and testing; it is thus considerable calculation and testing; it is thus inefficient.inefficient.


78

9.3 The Cohen-Sutherland Line-Clipping Algorithm The more efficient Cohen-Sutherland The more efficient Cohen-Sutherland

algorithm performs initial tests on a line to algorithm performs initial tests on a line to determine whether intersection calculations determine whether intersection calculations can be avoided.can be avoided. First, endpoints pairs are checked for trivial First, endpoints pairs are checked for trivial

acceptance. acceptance. If they cannot be trivially accepted, If they cannot be trivially accepted, regionregion

checks are then done.checks are then done.


79

For instance, two simple comparisons on x For instance, two simple comparisons on x show that both endpoints of line EF have an x show that both endpoints of line EF have an x coordinate less than xcoordinate less than xminmin and thus lie outside of and thus lie outside of

the clip rectanglethe clip rectangle therefore EF is trivially rejected.therefore EF is trivially rejected.


80

If a line segment cannot be trivially accepted or If a line segment cannot be trivially accepted or trivially rejected, it is divided into two trivially rejected, it is divided into two segments at a clip edge so one segment can be segments at a clip edge so one segment can be trivially dealt with.trivially dealt with. See edge IJSee edge IJ


81

To perform the tests, we To perform the tests, we extend the edges of the clip extend the edges of the clip rectangle to divide the plane rectangle to divide the plane into 9 regions.into 9 regions. These segments help the These segments help the

processing of trivial rejects or processing of trivial rejects or accepts.accepts.

If triviality is not possible, If triviality is not possible, the line is segmented. And the line is segmented. And the highest bit tells which the highest bit tells which rectangle edge to intersect rectangle edge to intersect the line with with. the line with with. (edge EI)(edge EI)


82

9.4 A Parametric Line-Clipping Algorithm Intro:Intro:

The Cohen-Sutherland algorithm is probably The Cohen-Sutherland algorithm is probably still the most commonly used line-clipping still the most commonly used line-clipping algorithm because it has been around the algorithm because it has been around the longest and has been widely published.longest and has been widely published.

In 1978, Cyrus and Beck published an In 1978, Cyrus and Beck published an algorithm that takes a fundamentally different algorithm that takes a fundamentally different and generally more efficient approach to line and generally more efficient approach to line clipping.clipping.


83

Parametric Representation of a lineParametric Representation of a line P(t) = PP(t) = P00+t(P+t(P11-P-P00), t has values in [0,1]), t has values in [0,1]

t = 0, P(t) == Pt = 0, P(t) == P00

t = 1, P(t) == Pt = 1, P(t) == P11

This is a directed line segmentThis is a directed line segment

Parametric vs Slope Intercept equationsParametric vs Slope Intercept equations Slope Intercept describe infinite linesSlope Intercept describe infinite lines Parametric describe segments (finite lines)Parametric describe segments (finite lines) Slope Intercept cannot deal with vertical lines.Slope Intercept cannot deal with vertical lines.


84

Cohen-Sutherland is efficient when Cohen-Sutherland is efficient when testing is cheap (bit testing in assembler)testing is cheap (bit testing in assembler) trivial acceptance or rejection applies to the majority trivial acceptance or rejection applies to the majority

of the lines.of the lines.

Parametric line clipping wins when:Parametric line clipping wins when: many line segments need to be clipped, since the many line segments need to be clipped, since the

actual calculation can be postponed.actual calculation can be postponed.

Improvements to both these algorithms are Improvements to both these algorithms are discussed in the literaturediscussed in the literature


85

10. Clipping Circles

First you can do a test on the circle’s extent First you can do a test on the circle’s extent (the square containing the circle)(the square containing the circle)

If scan conversion is fast, or the circle is not If scan conversion is fast, or the circle is not too large, it is probably more efficient to too large, it is probably more efficient to scissor on a pixel-by-pixel basis.scissor on a pixel-by-pixel basis.

If the circle is filled, spans can be clipped If the circle is filled, spans can be clipped individually and then filled.individually and then filled.


86

11. Clipping Polygons

An algorithm that clips polygons must deal An algorithm that clips polygons must deal with many different cases.with many different cases.

Note: (a) yields two polygons from one.Note: (a) yields two polygons from one.


87

11.1 The Sutherland-Hodgman Polygon-Clipping Algorithm Sutherland and Hodgman’s polygon clipping Sutherland and Hodgman’s polygon clipping

algorithm uses a divide and conquer strategy.algorithm uses a divide and conquer strategy. It solves a series of simple and identical It solves a series of simple and identical

problems that, when combined, solve the problems that, when combined, solve the overall problem.overall problem.

The simple problem is to clip a polygon against The simple problem is to clip a polygon against a single infinite edge.a single infinite edge.


88

The four clip edges, each defining one The four clip edges, each defining one boundary of the clip rectangle, successively clip boundary of the clip rectangle, successively clip a polygon against the clip rectangle.a polygon against the clip rectangle.


89

Notice the differences between this algorithm Notice the differences between this algorithm and the Cohen-Sutherland line clipping and the Cohen-Sutherland line clipping algorithm.algorithm. In this algorithm, the polygon is clipped against the In this algorithm, the polygon is clipped against the

four lines in succession.four lines in succession. In the Line Algorithm, the clipper tested to see In the Line Algorithm, the clipper tested to see

which edge was crossed and clipped only when which edge was crossed and clipped only when necessary.necessary.

This algorithm is actually generalizable to allow a This algorithm is actually generalizable to allow a polygon to be clipped any convex polyhedral polygon to be clipped any convex polyhedral volume.volume.


90

12. Generating Characters

There are two basic techniques for defining There are two basic techniques for defining characters.characters. Define each character as a curved or polygonal Define each character as a curved or polygonal

outline and scan convert it as needed.outline and scan convert it as needed. Most general, but computationally expensive.Most general, but computationally expensive.

Define each font as a small rectangular bitmap.Define each font as a small rectangular bitmap. Generating simply entails copying the pixels from a Generating simply entails copying the pixels from a

font cache into the frame buffer.font cache into the frame buffer.


91

14. Antialiasing

The primitives drawn so far have a common The primitives drawn so far have a common problem: problem: They have jagged edges.They have jagged edges.

This undesirable effect known as the jaggies or This undesirable effect known as the jaggies or staircasing, is the result of an all-or-nothing staircasing, is the result of an all-or-nothing approach to scan conversion in which each approach to scan conversion in which each pixel is either replaced with the primitives color pixel is either replaced with the primitives color or is left unchanged.or is left unchanged.


92

Jaggies are an instance of a phenomenon Jaggies are an instance of a phenomenon known as aliasing. known as aliasing.

The application of techniques that reduce or The application of techniques that reduce or eliminate aliasing is referred to as antialiasing.eliminate aliasing is referred to as antialiasing.

Chapter 14 discusses basic ideas from signal Chapter 14 discusses basic ideas from signal processing that explain how aliasing got its processing that explain how aliasing got its name, why it occurs, and how to reduce or name, why it occurs, and how to reduce or eliminate it when creating pictures.eliminate it when creating pictures.

Here, we content ourselves with a more Here, we content ourselves with a more intuitive explanation of why the primitives we intuitive explanation of why the primitives we have produced exhibit aliasing and how to have produced exhibit aliasing and how to generate antialiased lines.generate antialiased lines.


93

14.1 Increasing Resolution

Consider the midpoint algorithm to draw a 1-Consider the midpoint algorithm to draw a 1-pixel thick line. pixel thick line. In each column the algorithm sets the color of In each column the algorithm sets the color of

the pixel closest to the line to black.the pixel closest to the line to black.

Each time the line moves between Each time the line moves between columns in which the pixels closest columns in which the pixels closest to the line are not in the same row, to the line are not in the same row, there is a sharp jag in the line.there is a sharp jag in the line.


94

Suppose we now use a display with twice the Suppose we now use a display with twice the horizontal and vertical resolution.horizontal and vertical resolution. The line passes through twice as The line passes through twice as

many columns and therefore has many columns and therefore has twice as many jags, twice as many jags,

But each jag is half as large in x and in y.But each jag is half as large in x and in y. Although the resulting picture looks better, the Although the resulting picture looks better, the

improvement comes at a cost of quadrupling the improvement comes at a cost of quadrupling the memory cost, memory bandwidth, and scan-memory cost, memory bandwidth, and scan-conversion time.conversion time.

Increasing the resolution only diminishes the Increasing the resolution only diminishes the problem, it does not eliminate it.problem, it does not eliminate it.


95

14.2 Unweighted Area Sampling

The first approach to improving picture quality The first approach to improving picture quality can be developed by recognizing that, although can be developed by recognizing that, although an ideal primitive such as a line has zero an ideal primitive such as a line has zero width, the primitive we drawing has nonzero width, the primitive we drawing has nonzero width.width. A scan-converted area occupies a finite area on A scan-converted area occupies a finite area on

the screen.the screen.


96

Thus, we think of any line as a rectangle of a Thus, we think of any line as a rectangle of a desired thickness covering a portion of the grid desired thickness covering a portion of the grid of pixels.of pixels.

It follows that a line should not set the intensity It follows that a line should not set the intensity of only a single pixel in a column to black, but of only a single pixel in a column to black, but rather should contribute some amount of rather should contribute some amount of intensity to each pixel in the columns whose intensity to each pixel in the columns whose area it intersects.area it intersects.


97

But what is the geometry of a pixel? How But what is the geometry of a pixel? How large is it?….large is it?…. It is computationally simple to assume that It is computationally simple to assume that

pixels form an array of non-overlapping square pixels form an array of non-overlapping square tiles covering the screen, centered on grid tiles covering the screen, centered on grid points, rather than disjoint circles as discussed points, rather than disjoint circles as discussed earlier.earlier.

We also assume that a line contributes to each We also assume that a line contributes to each pixel’s intensity an amount proportional to the pixel’s intensity an amount proportional to the percentage of the pixel’s tile it covers.percentage of the pixel’s tile it covers. Fully covered is black,… Fully covered is black,…


98

This technique, as applied to the line shown This technique, as applied to the line shown previously is shown below:previously is shown below:

This blurring makes the line look better at a This blurring makes the line look better at a distance, despite the fact that it spreads the on-off distance, despite the fact that it spreads the on-off transitions over multiple pixels in a column or row.transitions over multiple pixels in a column or row.


99

We call this technique of setting the intensity We call this technique of setting the intensity proportional to the amount of the area covered proportional to the amount of the area covered unweighted area samplingunweighted area sampling..

The properties of unweighted area sampling The properties of unweighted area sampling are:are: First, the intensity of the pixel intersected by a line First, the intensity of the pixel intersected by a line

edge decreases as the distance between the pixel edge decreases as the distance between the pixel center and the edge increases.center and the edge increases.

Second, the primitive cannot influence the pixel at Second, the primitive cannot influence the pixel at all if it does not intersect the pixel.all if it does not intersect the pixel.

Third, equal areas contribute equal intensity Third, equal areas contribute equal intensity


100

14.3 Weighted Area Sampling

In weighted area sampling, we keep the first In weighted area sampling, we keep the first and second properties of unweighted area and second properties of unweighted area sampling, but we alter the third.sampling, but we alter the third. We let equal areas contribute unequally.We let equal areas contribute unequally.

Chapter 14 discusses Weighted Area Sampling Chapter 14 discusses Weighted Area Sampling in the context of filtering theory.in the context of filtering theory.


101

To explain the difference between weighted To explain the difference between weighted and unweighted sampling, let us look at one and unweighted sampling, let us look at one simple example:simple example: Traditional unweighted samplingTraditional unweighted sampling


102

Traditional weighted samplingTraditional weighted sampling

• Note the change from squares to circles (that overlap)Note the change from squares to circles (that overlap)

• Note also that the weight is centered at the center of the Note also that the weight is centered at the center of the pixel.pixel.


103

15. Advanced Topics

We have only touched on the concepts of We have only touched on the concepts of clipping and scan conversion in this chapter.clipping and scan conversion in this chapter. In practice, many complex situations arise that In practice, many complex situations arise that

require the applications of advanced require the applications of advanced approaches.approaches.

These are fully discussed in These are fully discussed in Computer Computer Graphics: Principles and PracticeGraphics: Principles and Practice by Foley, by Foley, vanDam, Feiner and Hughes (1990)vanDam, Feiner and Hughes (1990)


104

Summary In this chapter, we have taken our first look at the In this chapter, we have taken our first look at the

fundamental clipping and scan-conversion fundamental clipping and scan-conversion algorithms that are the meat and potatoes of raster algorithms that are the meat and potatoes of raster graphics packages.graphics packages.

The most important idea of this chapter is that, The most important idea of this chapter is that, since speed is essential in interactive raster since speed is essential in interactive raster graphics, incremental scan-conversion algorithms graphics, incremental scan-conversion algorithms using only integer operations in their inner loops are using only integer operations in their inner loops are the best.the best.

Documents

Basic Raster Graphics Algorithms for Drawing 2D Primitives Chapter 3