Computer Graphics

CH2 – Simple Drawing Algorithms

Outline
• Introduction – Output Primitives
• Line Drawing and Attributes
• Polygon Drawing
• Circle Drawing
• Ellipse Drawing
• Character Generation and Attributes
Introduction – Output Primitives
• Shapes and colors of objects can be described internally with sets of basic
geometric structures such as straight line segments and polygon color areas.

• A scene can be displayed by loading pixel arrays into the frame buffer or by
scan converting basic geometric structure specifications into pixel patterns.

• Typically, graphics programming packages provide functions

• To describe a scene/picture/model in terms of these geometric structures, referred
to as output primitives, and
• To group sets of output primitives into more complex structures.
Introduction – Output Primitives
• Output Primitives are basic geometric structures used to describe scenes.
• They can also be grouped into more complex structures.
• Each one is specified with input coordinate data and other information about the way
that object is to be displayed.
• Examples of output primitives can include:
• Points,
• Straight line segment,
• Circles and other conic sections,
• Quadric surfaces,
• Spline curve and surfaces,
• Polygon color areas, and
• Character strings
• These picture components are often defined in a continuous space.
• A polygon in continuous space is a series of line segments joined at their endpoints,
thus conversion of a polygon from continuous to discrete space is completely
determined by the method applied to convert the continuous line segments to line
segments composed of pixels in discrete space.
Introduction – Output Primitives
• In digital representation:
• Display screen is divided into scan lines and columns.
• Pixels positions are referenced according to scan line number and column number
(columns across scan lines).
• Scan lines start from 0 at screen bottom, and columns start from 0 at the screen left side.
• Screen locations (or pixels) are referenced with integer values.
• In order to draw the primitive objects, one has to first scan convert the object.
• Scan conversion refers to the operation of
• finding out the location of pixels to be intensified and then setting the values of
corresponding bits, in the graphic memory, to the desired intensity code.
• The frame buffer stores the intensities temporarily, and the video controller
reads from the frame buffer and plots the screen pixels.
Introduction – Output Primitives
Picture or scene descriptions
• In Raster display:
• Is completely specified by the set of intensities for the pixels positions in the
display.
• Shapes and colors are described with pixel arrays.
• The picture or scene is displayed by loading pixels array into the frame buffer.
• In Vector Display:
• Picture or scene description is set of complex objects positioned at specified
coordinate locations within the scene.
• Shapes and colors are described with sets of basic geometric structures.
• The picture or scene is displayed by scan converting the geometric-structure
specifications into pixel patterns.
Line Drawing and Attributes
Point Drawing
• Point drawing is accomplished by converting a single coordinate position
furnished by an application program into appropriate operation for the output
device in use.
• In raster-scan system:
• Black-white: setting the bit value corresponding to a specified screen position within the
frame buffer to 1.
• RGB: loading the frame buffer with the color codes for the intensities that are to be
displayed at the screen pixel positions.
• In random-scan (vector) system:
• Stores point-plotting instructions in the display list, and coordinate values in these
instructions are converted to deflection voltages that position the electron beam at the
screen locations to be plotted during each refresh cycle.
Line Drawing and Attributes
Point Drawing
• A mathematical point needs to be scan converted to a pixel at location and .
• All points that satisfy and are mapped to pixel .
Line Drawing and Attributes
Point Drawing
• A better way: A mathematical point needs to be scan converted to a
pixel at location and .
• All points that satisfy and are mapped to pixel .
Line Drawing and Attributes
Point Drawing
• Pixel positions are referenced by scan-line number and column number.
• To load a specified color into the frame buffer at a position corresponding to column x along scan line
y, we will assume we have available a low-level procedure of the form

• We also want to be able to retrieve the current frame-buffer intensity setting for a specified location
using the low-level function
Line Drawing
• Line drawing Is accomplished by calculating intermediate positions along
the line path between two specified endpoint positions.
• An output device is then directed to fill in these positions between the endpoints.
• Digital devices display a straight line segment by plotting discrete points
between the two endpoints.
• Discrete coordinate positions along the line path are calculated from the equation
of the line.
• For a raster video display, the line color (intensity) is then loaded into the frame
buffer at the corresponding pixel coordinates.
• Reading from the frame buffer, the video controller then "plots" the screen pixels.
• Screen locations are referenced with integer values, so plotted positions may only
approximate actual line positions between two specified endpoints.
Line Drawing
• For example:
• A computed line position of (10.48, 20.51), would be converted to pixel position
(10, 21).
• Thus rounding of coordinate values to integers causes lines to be displayed with
aliasing effect or stair-case appearance ("the jaggies").

• These stair-case characteristic shape of raster lines is particularly noticeable on

systems with low resolution, and we can improve their appearance somewhat
by displaying them on high resolution systems.

• More effective techniques for smoothing raster lines are based on adjusting
pixel intensities along the line paths (anti-aliasing).
Line Drawing Algorithms
• The Cartesian slope-intercept equation for a straight line with representing the slope of the line
and as the y-intercept is:

• Given that the two endpoints of a line segment are specified at positions and , we can determine
values for the slope and y-intercept with the following calculations:

• Algorithms for displaying straight lines are based on the line equation and the calculations given in
equations and .
• For any given interval along a line, we can compute the corresponding interval from equation as:

• Similarly, we can obtain the interval corresponding to a specified as:

Line Drawing Algorithms
• These equations form the basis for determining deflection voltages in analog
devices.
• For lines with slope magnitudes ,
• can be set proportional to small horizontal deflection voltage and the corresponding
vertical deflection is then set proportional to as calculated from equation .
• For lines whose slopes have magnitudes ,
• can be set proportional to a small vertical deflection voltage with the corresponding
horizontal deflection voltage set proportional to , calculated from equation .
• For lines with ,
• and the horizontal and vertical deflections voltages are equal.
• In each case, a smooth line with slope is generated between the specified
endpoints.
Line Drawing Algorithms
• On raster systems, lines are plotted with pixels, and step sizes in the
horizontal and vertical directions are constrained by pixel separations,
• i.e., we must "sample" a line at discrete positions and determine the nearest
pixel to the line at each sampled position.
• Scan conversion process samples a line at discrete positions and determine the
nearest pixel to the line at each sampled position.
Digital Differential Analyzer (DDA)
Algorithm
• The DDA algorithm is a scan-conversion algorithm based on calculating either or using
equation or equation .
• We sample the line at unit intervals in one coordinate and determine corresponding
integer values nearest the line path for the other coordinate.
• Let us consider first a line with positive slope.
• If the slope is less than or equal to 1, we sample at unit intervals and compute each successive
values as:

• Subscript takes integer values starting from , for the first point, and increases by until the final
endpoint is reached.
• Since can be any real number between and , the calculated values must be rounded to the nearest
integer.
• For lines with a positive slope greater than , we reverse the roles of and , i.e., we sample at unit
intervals and calculate each succeeding value as:
Digital Differential Analyzer (DDA)
Algorithm
• Equations and are based on the assumption that lines are to be
processed from the left endpoint to the right endpoint.
• If this processing is reversed, so that the starting endpoint is at the
right, then either we have and

or (when the slope is greater than 1) we have with

Digital Differential Analyzer (DDA)
Algorithm
• Equations through can also be used to calculate pixel positions along a
line with negative slope.
• If and the start endpoint is at the left,
• We set and calculate values with equations .

• When the start endpoint is at the right (for the same slope), we set and obtain
positions from equation .

• Similarly, when ,
• We use and equation

• Or we use and equation ,

Digital Differential Analyzer (DDA)
Algorithm
• The DDA algorithm is summarized in the following procedure, which accepts
as input the two endpoint pixel positions and .
• Horizontal and vertical differences between the endpoint positions are assigned to
parameters and .
• The difference with the greater magnitude determines the value of parameter steps.
• Starting with pixel position , we determine the offset needed at each step to generate
the next pixel position along the line path.
• We loop through this process steps times.
• If the is greater than and is less than , the values of the increments in the and directions are
and , respectively.
• If the greater change is in the direction, but is greater than , then the decrements and are used
to generate each new point on the line.
• Otherwise, we use a unit increment (or decrement) in the direction and an increment (or
decrement) of .
DDA Algorithm
Digital Differential Analyzer (DDA)
Algorithm
Example 1: Scan convert a line having end points and using the DDA
algorithm?
Digital Differential Analyzer (DDA)
Algorithm
Example 2: Describe the line segment which starts at and ends at
Digital Differential Analyzer (DDA)
Algorithm
Example 1: Describe the line segment which starts at and ends at
Digital Differential Analyzer (DDA)
Algorithm
Example 3: Describe the line segment which starts at and ends at
Digital Differential Analyzer (DDA)
Algorithm
Example 2: Describe the line segment which starts at and ends at
Digital Differential Analyzer (DDA)
Algorithm
• The DDA algorithm is a faster method for calculating pixel positions than the
direct use of equation .
• It eliminates the multiplication in equation by making use of raster characteristics, so
that appropriate increments are applied in the or direction to step to pixel positions
along the line path.
• The accumulation of round off error in successive additions of the floating-
point increment, however, can cause the calculated pixel positions to drift
away from the true line path for long line segments.
• Furthermore, the rounding operations and floating-point arithmetic in
procedure lineDDA are still time-consuming.
• We can improve the performance of the DDA algorithm by separating the increments
and into integer and fractional parts so that all calculations are reduced to integer
operations.
Bresenham’s Line Drawing Algorithm
• An accurate and efficient raster line-generating algorithm is developed
by Jack Elton Bresenham, in 1962 at IBM.
• This algorithms scan converts lines using only incremental integer calculations
that can be adapted to display circles and other curves.
Working of Bresenham's Algorithm:
• Let us say we want to scan convert a line with a positive slope less than
1 (, i.e., .
• We start with pixel , then select subsequent pixels in the horizontal direction
towards .
• Once a pixel is chosen at any step, the next pixel is either the one to its right or
the one to its right and up due to the limit on .
• The line is best approximated by those pixels that fall the least distance from its
true path between and .
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• The coordinates of the last chosen pixel upon entering step i are
• The task is to choose the next one between the bottom pixel S and top pixel T.

• If S is chosen, we have: xi+1 = xi + 1 and yi+1 = yi

• If T is chosen, we have: xi+1 = xi + 1 and yi+1 = yi + 1

• The actual coordinate of line at x = xi+1 is:

… … … … (eq. 1)

• The distance from S to actual line in direction is:

• The distance from T to actual line in direction is: 𝑥 𝑖 𝑥𝑖+1

Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now consider the difference between these two distance values .
• When we have and the closest pixel is S.
• When we have and the closest pixel is T.
• We also choose T when .
• The difference is:-

• From (eq. 1) above Þ

… … … … … … (eq. 2)
• Put
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now, take decision variable
… … … … … … … … … … … … …… (eq. 3)

… … … … … … … … … … (eq. 4)
where,
• Similarly,
… … … … … … … … … (eq. 5)
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now subtract (eq. 4) from (eq. 5), we get

• Put:

… … … … … …… (eq. 6)
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now if choose pixel T, it means that
as
• then, putting this in (eq. 6)

• Now if choose pixel S, it means that

as
• then, putting this in (eq. 6)
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Thus we have,
• Now we calculate from the original value of di
• From (eq. 3) Þ
• From (eq. 2) Þ

• But Þ
Þ
• Thus
Bresenham’s Line Drawing Algorithm
Bresenham's Line-Drawing Algorithm for
1. Input the two line endpoints and store the left endpoint in (x0, y0).
2. Load (x0, y0) into the frame buffer; that is, plot the first point.
3. Calculate constants Dx, Dy, 2Dy, and 2Dy – 2Dx, and obtain the starting value for the
decision parameter as

4. At each xi along the line, starting at i = 0, perform the following test:

If di < 0, the next point to plot is (xi+1, yi) and

Otherwise (if di > 0), the next point to plot is (xi+1, yi+1) and
di+1 = di + 2Dy – 2Dx
5. Repeat step 4 Dx times.
Bresenham’s Line Drawing Algorithm
Bresenham's Line-Drawing Algorithm for
Algorithm: Algorithm for scan converting a line from to with and .

1) int x = x1’ and y = y1’

2) int dx = x2’ – x1’, dy = y2’ – y1, dT = 2(dy – dx), dS = 2dy
3) int d = 2dy – dx
4) setpixel(x, y)
5) while(x < x2’)
{
x++
if(d < 0)
d = d + dS
else
{
y++
d = d + dT
}
setpixel(x, y)
}
Bresenham’s Line Drawing Algorithm
Example 1: Scan convert a line from and with .

x= y= dx = x2 – dy = y2 – dT= 2(dy – dS = 2dy d = 2dy – Plot

x1 y1 x1 y1 dx) dx

1 1 7 4 -6 8 1 1,1

2 2 -5 2,2

3 3 3,2

4 3 -3 4,3

5 5 5,3

6 4 -1 6,4

7 7 7,4

8 5 1 8,5
Mid-Point Algorithm
• Mid-point algorithm is due to Bresenham which was modified by
Pitteway and Van Aken.
• Assume that you have already put the point P at
coordinate and the slope of the line is as shown
in the illustration.
• Now you need to decide whether to put the next
point at or .
• This can be chosen by identifying the intersection
point closest to the point or .
• If the intersection point is closest to the point then
is considered as the next point; otherwise .
Mid-Point Algorithm
• To determine which point to choose, first calculate the mid-point

• If the intersection point of the line with the vertical line connecting and is
below , then take as the next point; otherwise take as the next point.
• In order to check this, we need to consider the implicit line equation:

• For a positive slope at any given ,

• If is on the line, then
• If is above the line, then
• If is below the line, then
Circle Drawing – Circle Generating
Algorithms
• A circle is defined as the set of points that are all at a given distance from a center position .
• This distance relationship is expressed by the Pythagorean theorem in Cartesian coordinate as:

• We could use this equation to calculate the position of points on a circle circumference by
stepping along the axis in unit steps from to and calculating the corresponding values at each
position as:

• But this is not the best method for generating a circle.

• One problem with this approach is that it involves considerable computation at each step.
• Moreover, the spacing between plotted pixel positions is not uniform.
• The spacing can be adjusted by interchanging and (stepping through values and calculating values)
whenever the absolute value of the slope of the circle is greater than 1.
• But, this simply increases the computation and processing required by the algorithm.
Circle Drawing – Circle Generating
Algorithms
• Another way to eliminate the unequal spacing is to calculate points along the circular boundary
using polar coordinates and

• When a display is generated with these equations using a fixed angular step size, a circle is
plotted with equally spaced points along the circumference.
• Computation can be reduced by considering the symmetry of circles.
• The shape of the circle is similar in each quadrant.
• We can generate the circle section in the second quadrant of the by noting that the two circle sections are
symmetric with respect to the axis.
• And circle sections in the third and fourth quadrants can be obtained from sections in the first and second
quadrants by considering symmetry about the axis.
• Determining pixel positions along a circle circumference using either or equations requires a
good deal of computation time.
• The Cartesian equation involves multiplications and square-root calculations, while the parametric
equations contain multiplications and trigonometric calculations.
Circle Drawing – Circle Generating
Algorithms
• More efficient circle algorithms are based on incremental calculation of
decision-parameters, as in the Bresenham line algorithm, which involves
only integer operations.
• A method for direct distance comparison is to test the halfway position
between two pixels to determine if this midpoint is inside or outside the
circle boundary.
• This method is more easily applied to other conics; and for an integer
circle radius, the midpoint approach generates the same pixel positions
as the Bresenham circle algorithm.
• Also, the error involved in locating pixel positions along any conic section
using the midpoint test is limited to one-half the pixel separation.
Circle Drawing – Midpoint Circle
Algorithm
• As in the raster line algorithm, we sample at unit intervals and
determine the closest pixel position to the specified circle path at each
step.

• For a given radius and screen center position , we can first set up our algorithm
to calculate pixel positions around a circle path centered at the coordinate origin
.

• Then each calculated position is moved to its proper screen position by adding
to and to .
Circle Drawing – Midpoint Circle
Algorithm
• Along the circle section from to in the first quadrant, the slope of the
curve varies from to .
• Therefore, we can take unit steps in the positive direction over this octant and
use a decision parameter to determine which of the two possible positions is
closer to the circle path at each step.
• Positions in the other seven octants are then obtained by symmetry.
Circle Drawing – Midpoint Circle
Algorithm
• To apply the midpoint method, we define a circle function:

• Any point on the boundary of the circle with radius satisfies the equation .
• If the point is in the interior of the circle, the circle function is negative.
• And if the point is outside the circle, the circle function is positive.
• The circle-function tests are performed for the mid positions between
pixels near the circle path at each sampling step.
• Thus, the circle function is the decision parameter in the midpoint algorithm,
and we can set up incremental calculations for this function as we did in the line
algorithm.
Circle Drawing – Midpoint Circle
Algorithm
• Figure below shows the midpoint between the two candidate pixels at sampling position .
• Assuming we have just plotted the pixel at ,
we next need to determine whether the pixel at position
or the one at position is
closer to the circle.
• Our decision parameter is the circle function evaluated at the midpoint between these
two pixels:

• If , this midpoint is inside the circle and the pixel on scan line is closer to the circle boundary.
• Otherwise, the mid position is outside or on the circle boundary, and we select the pixel on scan line
.
• Successive decision parameters are obtained using incremental calculations.
Circle Drawing – Midpoint Circle
Algorithm
• We obtain a recursive expression for the next decision parameter by evaluating the circle
function at sampling position :

or

where is either or , depending on the sign of .

• Increments for obtaining are either (if is negative) or .
• Evaluation of the terms and can also be done incrementally as

• At the start position , these two terms have the values and , respectively.
• Each successive value is obtained by adding to the previous value and subtracting from the
previous value of
Circle Drawing – Midpoint Circle
Algorithm
• The initial decision parameter is obtained by evaluating the circle
function at the start position :

or

• If the radius is specified as an integer, we can simply round to since all

increments are integers.
• As in Bresenham's line algorithm, the midpoint method calculates pixel
positions along the circumference of a circle using integer additions and
subtractions, assuming that the circle parameters are specified in
integer screen coordinates.
Circle Drawing – Midpoint Circle
Algorithm
Midpoint Circle Algorithm
1. Input radius and circle center , and obtain the first point on the circumference of a circle centered on the
origin as .
2. Calculate the initial value of the decision parameter as:
3. At each position, starting at , perform the following test:
• If , the next point along the circle centered on is and

• Otherwise, the next point along the circle is and

where and
4. Determine symmetry points in the other seven octants
5. Move each calculated pixel position onto the circular path centered on and plot the coordinate values: ,
.

6. Repeat steps 3 through 5 until .

 Circle Drawing – Midpoint Circle
Algorithm
• A C++ implementation of midpoint circle algorithm is given below:
void circleMidpoint(int xCenter, int yCenter, int radius) void circlePlotPoints(int xCenter, int yCenter, int x, int y)
{ {
int x = 0, y = radius; putpixel(xCenter + x, yCenter + y, WHITE);
int p = 1 - radius; putpixel(xCenter - x, yCenter + y, WHITE);
circlePlotPoints(xCenter, yCenter, x, y); putpixel(xCenter + x, yCenter - y, WHITE);
while (x < y) putpixel(xCenter - x, yCenter - y, WHITE);
{ putpixel(xCenter + y, yCenter + x, WHITE);
x++; putpixel(xCenter - y, yCenter + x, WHITE);
if (p < 0) putpixel(xCenter + y, yCenter - x, WHITE);
p += 2 * x + 1; putpixel(xCenter - y, yCenter - x, WHITE);
else }
{
y--;
p += 2 * (x - y) + 1;
}
circlePlotPoints(xCenter, yCenter, x, y);
}
}
Circle Drawing – Midpoint Circle
Algorithm
Example: Given a circle radius , we demonstrate the midpoint circle algorithm by determining positions along the
circle octant in the first quadrant from to .
• The initial value of the decision parameter is: .
• The initial point is , and initial increment terms for calculating the decision parameters are: .
• Successive decision parameter values and positions along the circle path are calculated using
the midpoint method as:
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) 14 16
6 5 (7,7) 16 14
Ellipse – Generating Algorithms
• An ellipse is defined as the set of points such that the sum of the distances from two
fixed positions (foci) is the same for all points.
• Therefore, elliptical curves can be generated by modifying circle-drawing procedures
to take into account the different dimensions of an ellipse along the major and
minor axes.

(a) Ellipse generated about foci (b) Ellipse centered at (xc, yc) with semimajor
F1 and F2. axis rx, and semiminor axis ry.
Ellipse – Generating Algorithms
• If the distances to the two foci from any point on the ellipse are labeled and , then
the general equation of an ellipse can be stated as:

• Expressing distances and in terms of the focal coordinates and , we have:

• By squaring this equation, isolating the remaining radical, and then

squaring again, we can rewrite the general ellipse equation in the form:
()
where the coefficients and are evaluated in terms of the focal
coordinates and the dimensions of the major and minor axes of the
ellipse.
Ellipse – Generating Algorithm
• The major axis is the straight line segment extending from one side of
the ellipse to the other through the foci.
• The minor axis spans the shorter dimension of the ellipse, bisecting the
major axis at the halfway position (ellipse center) between the two foci.
• Ellipse equations are greatly simplified if the major and minor axes are
oriented to align with the coordinate axes.
• Ellipse centered at (xc, yc) with semimajor axis rx and semiminor axis ry.
• The equation of the ellipse in terms of the ellipse center
coordinates and parameters rx and ry as:

()
Ellipse – Generating Algorithm
• Symmetry considerations can be used to further reduce computations.
• An ellipse in standard position is symmetric between quadrants, but
unlike a circle, it is not symmetric between the two octants of a
quadrant.

• Thus, we must calculate pixel positions along the elliptical arc

throughout one quadrant, then we obtain positions in the
remaining three quadrants by symmetry.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• Our approach here is similar to that used in displaying a raster circle.
• Given parameters rx, ry, and (xc, yc), we determine points (x, y) for an
ellipse in standard position centered on the origin, and then we shift the
points so the ellipse is centered at (xc, yc).
• If we wish also to display the ellipse in nonstandard position, we could
then rotate the ellipse about its center coordinates to reorient the major
and minor axes.
• For the present, we consider only the display of ellipses in standard
position.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• The midpoint ellipse method is applied throughout the first quadrant in two parts.
• The figure below shows the division of the first quadrant according to the slope, of
an ellipse with rx < ry.
• We process this quadrant by
• taking unit steps in the direction where the slope of the curve has a magnitude less than 1,
and
• taking unit steps in the direction where the slope has a magnitude greater than 1.

• Ellipse processing regions:

• Over region 1, the magnitude of the ellipse slope is less than 1;
• Over region 2, the magnitude of the slope is greater than 1.

•
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• Regions 1 and 2 can be processed in various ways.
• We can start at position (0, ry) and step clockwise along the elliptical path in the
first quadrant, shifting from unit steps in to unit steps in when the slope
becomes less than 1.
• Alternatively, we could start at (rx, 0) and select points in a counterclockwise
order, shifting from unit steps in to unit steps in when the slope becomes
greater than –1.
• With parallel processors, we could calculate pixel positions in the two
regions simultaneously.
• As an example of a sequential implementation of the midpoint
algorithm, we take the start position at (0, ry) and step along the ellipse
path in clockwise order throughout the first quadrant.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• We define an ellipse function from () with (xc, yc) = (0, 0) as
2 2 2 2 2 2
𝑓 ellipse ( 𝑥 , 𝑦 )=𝑟 𝑦 𝑥 +𝑟 𝑥 𝑦 − 𝑟 𝑥 𝑟 𝑦
()
which has the following properties:

{ }
¿ 0 if ( x , y ) is inside the ellipse boundary
𝑓 ellipse ( 𝑥 , 𝑦 ) ¿ 0 i f ( x , y ) is on the ellipse boundary
¿ 0 if ( x , y ) is outside the ellipse boundary ()

• Thus, the ellipse function fellipse serves as the decision parameter in the
midpoint algorithm.
• At each sampling position, we select the next pixel along the ellipse path
according to the sign of the ellipse function evaluated at the midpoint between
the two candidate pixels.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• Starting at (0, ry), we take unit steps in the direction until we reach the boundary between
Region 1 and Region 2.
• Then we switch to unit steps in the direction over the remainder of the curve in the first
quadrant.
• At each step, we need to test the value of the slope of the curve.
• The ellipse slope is calculated from () as
2
𝑑𝑦 2𝑟𝑦 𝑥
=−
𝑑𝑥 2
2𝑟 𝑥 𝑦 ()

2 𝑟 2𝑦 𝑥 =2𝑟 2𝑥 𝑦
• At the boundary between Region 1 and Region 2,

• Therefore, we move out of Region 1 whenever

2 𝑟 2𝑦 𝑥 ≥ 2𝑟 2𝑥 𝑦
()
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
• The figure below shows the midpoint between the two candidate pixels
at sampling position xk + 1 in the first region.

• Midpoint between candidate pixels at sampling position xk + 1 along an elliptical

path.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

●
Assuming position has been selected at the previous step,
– we determine the next position along the ellipse path by evaluating the
decision parameter (that is, the ellipse function ()) at this midpoint:
𝑝 1𝑘 = 𝑓 ellipse ( 𝑥𝑘 +1 , 𝑦 𝑘 −
1
2 )
( ) ()
2
2 2 2 1 2 2
¿𝑟 𝑦 ( 𝑥 𝑘 +1 ) +𝑟 𝑥 𝑦𝑘− − 𝑟𝑥 𝑟 𝑦
2

– If , the midpoint is inside the ellipse and the pixel on scan line is closer to
the ellipse boundary.
– Otherwise, the mid-position is outside or on the ellipse boundary, and we
select the pixel on scan line .
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● At the next sampling position , the decision parameter for

region 1 is evaluated as
𝑝 1𝑘+1 = 𝑓 ellipse ( 𝑥 𝑘+ 1+ 1 , 𝑦 𝑘+ 1 −
1
2 )
( )
2
2 1
¿𝑟
2
𝑦 [ ( 𝑥𝑘 + 1 ) + 1 ] +𝑟
2
𝑥 𝑦 𝑘+1 −
2
− 𝑟𝑥 𝑟
2 2
𝑦

or
[( ) ( )]
2 2
2 2 2 1 1
𝑝 1 𝑘+1= 𝑝 1𝑘 +2 𝑟 ( 𝑥 𝑘+1 ) +𝑟 +𝑟 𝑦 𝑘 +1 − − 𝑦𝑘−
𝑦 𝑦 𝑥
2 2 ()
where is either or depending on the sign of .
– Decision parameters are incremented by the following amounts:
{ }
2 2
2 𝑟 𝑦 𝑥 𝑘+1 +𝑟 𝑦 , 𝑖𝑓𝑝 1 𝑘< 0
𝑖𝑛𝑐𝑟𝑒𝑚𝑒𝑛𝑡 =
2 𝑟 2𝑦 𝑥𝑘 +1+ 𝑟 2𝑦 − 2 𝑟 2𝑥 𝑦 𝑘+1 , 𝑖𝑓𝑝 1𝑘 ≥ 0
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● As in the circle algorithm, increments for the decision parameters can be

calculated using only addition and subtraction, since values for the
terms and can also be obtained incrementally.
● At the initial position , the two terms evaluate to
2 𝑟 2𝑦 𝑥 =0
2 2
()
2 𝑟 𝑦 =2 𝑟 𝑟 𝑦
𝑥 𝑥
()

– As and are incremented, updated values are obtained by adding to () and

subtracting from (2).
– The updated values are compared at each step, and we move from region 1 to
region 2 when condition () is satisfied.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● In region 1, the initial value of the decision parameter is

obtained by evaluating the ellipse function at the start position
:
𝑝 10 = 𝑓 ellipse ( 1 ,𝑟 𝑦 −
1
2 )
( )
2
2 2 1 2 2
¿𝑟 𝑦 +𝑟 𝑥 𝑟 𝑦− −𝑟 𝑥 𝑟 𝑦
2

or
2 2 1 2
𝑝 1 0=𝑟 𝑦 − 𝑟 𝑥 𝑟 𝑦 + 𝑟
4 𝑥
()
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● Over region 2, we sample at unit steps in the negative direction, and the midpoint is now
taken between horizontal pixels at each step.
● For this region, the decision parameter is evaluated as
𝑝 2 𝑘= 𝑓 ellipse ( 𝑥𝑘 +
1
2 )
, 𝑦𝑘− 1

()
( )
2
2 1 2 2 2 2
¿𝑟 𝑦 𝑥𝑘 + + 𝑟𝑥 ( 𝑦 𝑘−1 ) − 𝑟𝑥 𝑟 𝑦
2

• Midpoint between candidate pixels at

sampling position along an elliptical path.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● If p2k > 0, the mid-position is outside the ellipse boundary, and we select the pixel at .
● If p2k 0, the midpoint is inside or on the ellipse boundary, and we select pixel position
xk+1.
● To determine the relationship between successive decision parameters in region 2, we
evaluate the ellipse function at the next sampling step yk+1 – 1 = yk – 2:
𝑝 2 𝑘+1= 𝑓 ellipse (𝑥 1
𝑘+1 +
2
, 𝑦 𝑘+1 − 1 )
( )
2
1 2
¿𝑟
2
𝑦 𝑥𝑘 +1 +
2
=𝑟
2
𝑥 [( 𝑦𝑘− 1) −1] −𝑟
2
𝑥 𝑟
2
𝑦 ()

[( ) ( )]
2 2
1 1
or 2
𝑝 2𝑘+1= 𝑝 2𝑘 +2 𝑟 ( 𝑦 𝑘 − 1 ) +𝑟 +𝑟
𝑥
2
𝑥
2
𝑦 𝑥 𝑘+1 +
2
− 𝑥 𝑘+
2
()

with set either to or to , depending on the sign of .

Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● When we enter region 2, the initial position is taken as the last

position selected in region 1 and the initial decision parameter
in region 2 is then

( ) ( )
2
1 2 1 2 2 2 2
𝑝 20= 𝑥 0 + , 𝑦 0 −1 =𝑟 𝑦 𝑥 0 + +𝑟 𝑥 ( 𝑦 0 −1 ) −𝑟 𝑥 𝑟 𝑦
2 2 ()

– To simplify the calculation of we could select pixel positions in

counterclockwise order starting at .
– Unit steps would then be taken in the positive direction up to the last
position selected in region 1.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

● The midpoint algorithm can be adapted to generate an ellipse in

nonstandard position using the ellipse function () and calculating
pixel positions over the entire elliptical path.
– Assuming and the ellipse center are given in integer screen coordinates,
we only need incremental integer calculations to determine values for
the decision parameters in the midpoint ellipse algorithm.
● The increments, 𝑟, 𝑟, 2 𝑟 and
2
𝑥
2
𝑦
2
𝑥
are evaluated once at the
2 𝑟 2𝑦
beginning of the procedure.
● A summary of the midpoint ellipse algorithm is listed in the
following steps:
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Algorithm:
1. Input rx, ry, and ellipse center (xc, yc), and obtain the first point on an ellipse centered on the origin as:

(x0, y0) = (0, ry)

Calculate𝑝the 1 2 parameter in region 1 as
1 0initial
=𝑟 𝑦value− 𝑟 of
2. 2 2 the decision
𝑥 𝑟 𝑦 + 𝑟
4 𝑥

3. At each xk position in region 1, starting at k = 0, perform the following test: If p1k < 0, the next point along
2 2
𝑝centered
the ellipse 1 𝑘+1=on 𝑝 (0, +2
1𝑘 0) is 𝑟
(x𝑦k+1𝑥
, y𝑘+
k ) +
and
1 𝑟 𝑦

𝑟 2𝑦the
2 2
𝑝 1the
Otherwise, = 𝑝point
𝑘+1next 1𝑘 +2along 𝑥 𝑘+ 1−2
ellipse is 𝑟
(x𝑥k +𝑦1,𝑘+1
yk +𝑟
– 1) 𝑦and

2 2 2 2 2 2
2
with 𝑟 𝑦 𝑥 𝑘 +1 =2 𝑟 𝑥 𝑘 +2 𝑟 𝑦 , 2 𝑟 𝑥 𝑦 𝑘 +1 =2 𝑟 𝑥 𝑦 𝑘 − 2 𝑟 𝑘

𝑟 2𝑦 𝑥 ≥ 2𝑟 2𝑥 𝑦
and continue2until .
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Algorithm:
4. Calculate the initial value of the decision parameter in region 2 using the last point (x0, y0) calculated in region 1 as

( )
2
2 1 2 2 2 2
𝑝 20=𝑟 𝑦 𝑥0+ +𝑟 𝑥 ( 𝑦 0 − 1 ) − 𝑟 𝑥 𝑟 𝑦
2
5. At each yk position in region 2, starting at k = 0, perform the following test: If p2k > 0, the next point along the ellipse
centered on (0, 0) is (xk, yk – 1) and 2 2
𝑝 2𝑘+1= 𝑝 2𝑘 − 2 𝑟 𝑥 𝑦 𝑘+1 +𝑟 𝑥

Otherwise, the next point along the ellipse is (xk + 1, yk –2 1) and

𝑝 2𝑘+1= 𝑝 2𝑘 +2 𝑟 𝑦 𝑥 𝑘+1 − 2𝑟 2𝑥 𝑦 𝑘 +1+ 𝑟 2𝑥

using the same incremental calculations for x and y as in region 1.

6. Determine symmetry points in the other three quadrants.
Move each calculated pixel position (x, y) onto the elliptical path centered on (xc, yc) and plot the coordinate
values:
x = x + x c, y = y + yc
2 2
2𝑟
7. Repeat the steps for region 1 𝑥 <2 𝑟
until
𝑦 𝑥 𝑦 .
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Example: Midpoint Ellipse Drawing

● Given input ellipse parameters and , we illustrate the steps in the midpoint ellipse
algorithm
– by determining raster positions along the ellipse path in the first quadrant.
– Initial values and increments for the decision parameter calculations are

2 𝑟 2𝑥 =0 2 𝑟 2𝑦 =72
(with increment )
2 𝑟 2𝑥 𝑦 =2 𝑟 2𝑥 𝑟 𝑦 − 2 𝑟 2𝑥 =− 128
(with increment )
● For region 1: The initial point for the ellipse centered on the origin is , and the initial
decision parameter value is
2 2 1 2
𝑝 1 0=𝑟 𝑦 − 𝑟 𝑥 𝑟 𝑦 + 𝑟 =− 332
4 𝑥
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Example: Midpoint Ellipse Drawing

● Successive decision parameter values and positions along the ellipse path are calculated using the
midpoint method as
k p1k (xk+1, yk+1)

0 -332 (1, 6) 72 768

1 -224 (2, 6) 144 768

2 -44 (3, 6) 216 768

3 208 (4, 5) 288 640

4 -108 (5, 5) 360 640

5 288 (6, 4) 432 512

6 244 (7, 3) 504 384

● We now move out of region 1, since

Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Example: Midpoint Ellipse Drawing

●
For region 2, the initial point is and the initial decision
parameter is
𝑝 20 = 𝑓 ( 7+
1
2 )
, 2 =− 151

●
The remaining positions along the ellipse path in the first
quadrant are then calculated as
k p2k (xk+1, yk+1)

0 -151 (8, 2) 576 256

1 233 (8, 1) 576 128

2 745 (8, 0) -- --
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm

Example: Midpoint Ellipse Drawing

●
A plot of the selected positions around the ellipse boundary
within the first quadrant is shown in figure below.

• Positions along an elliptical path centered on the origin with rx = 8 and ry = 6 using
• the midpoint algorithm to calculate pixel addresses in the first quadrant.
Polygon Drawing – Filled Area Primitives
Polygon Drawing – Filled Area Primitives
• Polygons are the areas enclosed by single closed loops of line
segments, where the line segments are specified by the vertices at their
endpoints.

• Polygons are typically drawn with the pixels in the interior filled in, but
you can also draw them as outlines or a set of points.

• A standard output primitive in general graphics packages is a solid-color

or patterned polygon area.

76
Polygon Drawing – Filled Area Primitives
• There are two basic approaches to area filling on raster systems:

1. To determine the overlap intervals for scan lines that cross the area.

2. To start from a given interior position and paint outward from this point until
encounter the specified boundary conditions.

• The scan-line approach is typically used in general graphics packages to

fill polygons, circles, ellipses, and other simple curves.

77
Polygon Drawing – Filled Area Primitives
Filling Polygons – Inside-outside test
• An important issue that arises when filling polygons is that of deciding
whether a particular point is interior or exterior to a polygon.
• A rule called the odd-parity (or the odd-even rule) is usually applied to test
whether a point is interior or not.

• A half-line starting from the particular point and extending to infinity is drawn in
any direction such that no polygon vertex intersects with the line.

• The point is considered to be interior if the number of intersections between

the line and the polygon edges is odd.
78
Polygon Drawing
The scan-line polygon filling algorithm
• The scan-line polygon filling algorithm involves
• the horizontal scanning of the polygon from its lowermost to its topmost vertex,
• identifying which edges intersect the scan-line, and
• finally drawing the interior horizontal lines.

• The algorithm is specified as:

• For each horizontal scan-line:
1. List all the points that intersect with the horizontal scan-line.
2. Sort the intersection points in ascending order of the coordinate.
3. Fill in all the interior pixels between pairs of successive intersections.

79
Polygon Drawing
The scan-line polygon filling algorithm
• The third step accepts a sorted list of points and connects them
according to the odd-parity rule.
• For example, given the list , it draws the lines .
• A decision must be taken as to whether the edges should be displayed or not:
given that and, should we display the line or just the interior points ?
• Step 1 can be optimized by making use of a sorted edge table.
• Entries in the edge table are sorted on the basis of their lower value.
• Next, edges sharing the same low value are sorted on the basis of their higher
value.

80
Polygon Drawing
The scan-line polygon filling algorithm
• A pair of markers are used to denote the range of ‘active’ edges in the
table that need to be considered for a particular scan-line.

• This range starts at the top of the table, and moves progressively downwards as
higher scan-lines are processed.

• Given a scan-line and a non-horizontal edge with end-points , an intersection

between the two exists if .

• The point of intersection is where and .

81
Polygon Drawing
The scan-line polygon filling algorithm
An Example: Consider the polygon in Right. The edge table and edge list
for such a polygon would be:
Edge Table Edge List Given Polygon

82
Polygon Drawing
The scan-line polygon filling algorithm
An Example: Cont.…
• Note that in the above table the horizontal lines are not added to the
edge list.
• The reason for this is discussed below.
• The active edges for scan-line 3 would be 3, 5, 7, 9, these are sorted in order of
their values, in this case 9, 7, 5, 3.
• The polygon fill routine would proceed to fill the intersections between and and
to .
• The next scan-line is calculated in the same manner.
• In this the values of do not change (since the line is vertical; it is incremented by ).
• The active edge at scan-line are and (correct order).
83
Polygon Drawing
General-purpose filling algorithms
Boundary-fill Algorithm
• Sometimes we come across an object where we want to fill the area
and its boundary with different colors.
• This makes use of coherence properties of the boundary of a
primitive/figure:
• given a point inside the region the algorithm recursively plots the surrounding
pixels until the primitive boundary is reached.
• Given the FillColor, the BoundaryColor and a point inside the boundary,
the following algorithm recursively sets the four adjacent pixels (2
horizontal and 2 vertical) to the FillColor.
84
Polygon Drawing
General-purpose filling algorithms
Boundary-fill Algorithm: 4-connected

• Regions which can be completely filled with this algorithm are called 4-connected regions.
• Some regions cannot be filled using this algorithm.
• Such regions are called 8-connected and algorithms filling such areas consider the four diagonally adjacent
pixels as well as the horizontal and vertical ones.
85
 Polygon Drawing
General-purpose filling algorithms
Boundary-fill Algorithm: 8-connected

• Care must be taken to ensure that the boundary does not contain holes, which will cause the fill to ‘leak’.
• The 8-connected algorithm is particularly vulnerable. 86
Polygon Drawing
General-purpose filling algorithms
Flood-fill Algorithm:
• Sometimes we come across an object where we want to fill the area and its boundary
with different colors.
• The flood-fill algorithm is used to fill a region which has the same color and whose
boundary may have more than one color.

87
Polygon Drawing
General-purpose filling algorithms
Pattern Filling
• Any of the filling algorithms discussed thus far can be modified to use a given pattern when filling.
• The effects of using this with the scan-line and boundary fill algorithms respectively is shown below:

88
Polygon Drawing
General-purpose filling algorithms
Pattern Filling
• Patterned fills can be achieved by changing statements into where an
m by n matrix that defines the fill pattern.

89