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 (𝑥 ≤ 𝑥 ′ < 𝑥 + 1) and (𝑦 ≤ 𝑦 ′ < 𝑦 + 1) 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 𝑥, 𝑦 : 𝑥 = 𝑅𝑜𝑢𝑛𝑑(𝑥 ′ + 0.5) and 𝑦 = 𝑅𝑜𝑢𝑛𝑑(𝑦 ′ + 0.5).
• All points that satisfy (𝑥 − 0.5 ≤ 𝑥 ′ < 𝑥 + 0.5) and (𝑦 − 0.5 ≤ 𝑦 ′ < 𝑦 + 0.5) 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 (𝑥1, 𝑦1) and (𝑥2, 𝑦2), 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 (2.1) and the calculations
given in equations (2.2) and (2.3).
• For any given 𝑥 interval Δ𝑥 along a line, we can compute the corresponding 𝑦 interval Δ𝑦 from
equation (2.2) 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 |𝑚| < 1,
• Δ𝑥 can be set proportional to small horizontal deflection voltage and the corresponding
vertical deflection is then set proportional to Δ𝑦 as calculated from equation (2.4).
• For lines whose slopes have magnitudes |𝑚| > 1,
• Δ𝑦 can be set proportional to a small vertical deflection voltage with the corresponding
horizontal deflection voltage set proportional to Δ𝑥, calculated from equation (2.5).
• For lines with 𝑚 = 1,
• Δ𝑥 = Δ𝑦 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 (2.4) or equation (2.5).
• 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 (Δ𝑥 = 1) and compute each
successive 𝑦 values as:
𝒚𝒌+𝟏 = 𝒚𝒌 + 𝒎 (𝟐. 𝟔)
• Subscript 𝑘 takes integer values starting from 1, for the first point, and increases by 1 until the
final endpoint is reached.
• Since 𝑚 can be any real number between 0 and 1, the calculated 𝑦 values must be rounded to
the nearest integer.
• For lines with a positive slope greater than 1, we reverse the roles of 𝑥 and 𝑦, i.e., we sample at
unit 𝑦 intervals (Δ𝑦 = 1) and calculate each succeeding 𝑥 value as:
𝟏
𝒙𝒌+𝟏 = 𝒙𝒌 + (𝟐. 𝟕)
𝒎
Digital Differential Analyzer (DDA) Algorithm
• Equations (2.6) and (2.7) 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 Δ𝑥 = −1 and
𝒚𝒌+𝟏 = 𝒚𝒌 − 𝒎 (𝟐. 𝟖)
or (when the slope is greater than 1) we have Δ𝑦 = −1 with
𝟏
𝒙𝒌+𝟏 = 𝒙𝒌 − (𝟐. 𝟗)
𝒎
Digital Differential Analyzer (DDA) Algorithm
• Equations (2.6) through (2.9) can also be used to calculate pixel positions along a
line with negative slope.
• If |𝑚| ≤ 1 and the start endpoint is at the left,
• We set Δ𝑥 = 1 and calculate 𝑦 values with equations (2.6).
𝒚𝒌+𝟏 = 𝒚𝒌 + 𝒎
• When the start endpoint is at the right (for the same slope), we set Δ𝑥 = −1 and obtain 𝑦
positions from equation (2.8).
𝒚𝒌+𝟏 = 𝒚𝒌 − 𝒎
• Similarly, when |𝑚| > 1,
• We use Δ𝑦 = −1 and equation 2.9 ,
𝟏
𝒙𝒌+𝟏 = 𝒙𝒌 −
𝒎
• Or we use Δ𝑦 = 1 and equation (2.7),
𝟏
𝒙𝒌+𝟏 = 𝒙𝒌 +
𝒎
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 1 and 𝑚, respectively.
• If the greater change is in the 𝑥 direction, but 𝑥𝑎 is greater than 𝑥𝑏, then the decrements −1 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
1
decrement) of 𝑚 .
DDA Algorithm
Digital Differential Analyzer (DDA) Algorithm
Example 1: Scan convert a line having end points (3,2) and (4,7) using
the DDA algorithm?
Digital Differential Analyzer (DDA) Algorithm
Example 2: Describe the line segment which starts at (3,3) and ends at
(23,7).
Digital Differential Analyzer (DDA) Algorithm
Example 1: Describe the line segment which starts at (3,3) and ends at
(23,7).
Digital Differential Analyzer (DDA) Algorithm
Example 3: Describe the line segment which starts at (3,3) and ends at
(7,23).
Digital Differential Analyzer (DDA) Algorithm
Example 2: Describe the line segment which starts at (3,3) and ends at
(7,23).
Digital Differential Analyzer (DDA) Algorithm
• The DDA algorithm is a faster method for calculating pixel positions than the
direct use of equation (2.1).
• It eliminates the multiplication in equation (2.1) 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
1
𝑚 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 (0 < 𝑚 < 1, i.e., Δ𝑦 < Δ𝑥.
• We start with pixel 𝑃1’(𝑥1’, 𝑦1’), then select subsequent pixels in the horizontal
direction towards 𝑃2’(𝑥2’, 𝑦2’).
• 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 𝑃1’ and 𝑃2’.
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:

𝑦 = 𝑚𝑥 + 𝑏 = 𝑚 𝑥𝑖+1 + 𝑏
= 𝑚(𝑥𝑖 + 1) + 𝑏 … … … … (eq. 1)
𝑦𝑖 + 1
• The distance from S to actual line in 𝑦 direction is: 𝑦𝑖
𝑠 = 𝑦 – 𝑦𝑖
• The distance from T to actual line in 𝑦 direction is:
𝑡 = 𝑦𝑖+1 – 𝑦 𝑥𝑖 𝑥𝑖 + 1
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now consider the difference between these two distance values 𝑠 – 𝑡.
• When 𝑠 – 𝑡 < 0 we have 𝑠 < 𝑡 and the closest pixel is S.
• When 𝑠 – 𝑡 > 0 we have 𝑠 > 𝑡 and the closest pixel is T.
• We also choose T when 𝑠 – 𝑡 = 0.
• The difference is:-
𝑠– 𝑡 = 𝑦– 𝑦𝑖 – [(yi + 1) – y] = 𝑦– 𝑦𝑖– 𝑦𝑖– 1 + 𝑦 = 2𝑦– 2𝑦𝑖– 1
• From (eq. 1) above  𝑦 = 𝑚 𝑥𝑖 + 1 + 𝑏
𝑠 – 𝑡 = 2 𝑚 𝑥𝑖 + 1 + 𝑏 – 2𝑦𝑖 – 1
= 2𝑚 (𝑥𝑖 + 1) + 2𝑏 – 2𝑦𝑖 – 1 … … … … … … (eq. 2)
∆𝑦
• Put 𝑚 =
∆𝑥
∆𝑦
𝑠– 𝑡 = 2 𝑥𝑖 + 1 + 2𝑏 – 2𝑦𝑖 – 1
∆𝑥
∆𝑥(𝑠 – 𝑡) = 2∆𝑦(𝑥𝑖 + 1) + (2𝑏 – 2𝑦𝑖 – 1)∆𝑥
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now, take decision variable
𝑑𝑖 = ∆𝑥(𝑠 – 𝑡) … … … … … … … … … … … … …… (eq. 3)
𝑑𝑖 = 2∆𝑦 𝑥𝑖 + 1 + 2𝑏 – 2𝑦𝑖 – 1 ∆𝑥
= 2∆𝑦𝑥𝑖 + 2∆𝑦 + (2𝑏 – 2𝑦𝑖 – 1)∆𝑥
= 2∆𝑦𝑥𝑖 + 2∆𝑦 + 2𝑏∆𝑥 – 2𝑦𝑖∆𝑥 – ∆𝑥
= 2∆𝑦𝑥𝑖 – 2𝑦𝑖∆𝑥 + 2∆𝑦 + 2𝑏∆𝑥 – ∆𝑥
= 2∆𝑦𝑥𝑖 – 2𝑦𝑖∆𝑥 + 2∆𝑦 + 2𝑏 – 1 ∆𝑥
= 2∆𝑦𝑥𝑖 – 2∆𝑥𝑦𝑖 + 𝐶 … … … … … … … … … … (eq. 4)
where, 𝐶 = 2∆𝑦 + (2𝑏 – 1)∆𝑥
• Similarly,
𝑑𝑖+1 = 2∆𝑦𝑥𝑖+1 – 2∆𝑥 𝑦𝑖+1 + 𝐶 … … … … … … … … … (eq. 5)
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now subtract (eq. 4) from (eq. 5), we get
𝑑𝑖+1 – 𝑑𝑖 = 2∆𝑦𝑥𝑖+1 – 2∆𝑥𝑦𝑖+1 + 𝐶 – 2∆𝑦𝑥𝑖 + 2∆𝑥𝑦𝑖 – 𝐶
• Put: 𝑥𝑖+1 = 𝑥𝑖 + 1
𝑑𝑖+1 – 𝑑𝑖 = 2∆𝑦 𝑥𝑖 + 1 – 2∆𝑥𝑦𝑖+1 + 𝐶– 2∆𝑦𝑥𝑖 + 2∆𝑥𝑦𝑖 – 𝐶
= 2∆𝑦 𝑥𝑖 + 1 – 2∆𝑥𝑦𝑖+1 – 2∆𝑦𝑥𝑖 + 2∆𝑥𝑦𝑖
= 2∆𝑦 𝑥𝑖 + 1 – 2∆𝑦𝑥𝑖 – 2∆𝑥𝑦𝑖+1 + 2∆𝑥𝑦𝑖
= 2∆𝑦(𝑥𝑖 + 1 – 𝑥𝑖) – 2∆𝑥(𝑦𝑖+1 – 𝑦𝑖 )
= 2∆𝑦 – 2∆𝑥(𝑦𝑖+1 – 𝑦𝑖 )
𝑑𝑖+1 = 𝑑𝑖 + 2∆𝑦 – 2∆𝑥(𝑦𝑖+1 – 𝑦𝑖 ) … … … … … …… (eq. 6)
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
• Now if choose pixel T, it means that 𝑠 – 𝑡 > 0
𝑑𝑖 > 0 as 𝑑𝑖 = (𝑠– 𝑡)∆𝑥
• then, 𝑦𝑖+1 = 𝑦𝑖 + 1 putting this in (eq. 6)
𝑑𝑖+1 = 𝑑𝑖 + 2∆𝑦 – 2∆𝑥(𝑦𝑖 + 1– 𝑦𝑖)
= 𝑑𝑖 + 2∆𝑦 – 2∆𝑥
= 𝑑𝑖 + 2(∆𝑦 – ∆𝑥 )
• Now if choose pixel S, it means that 𝑠 – 𝑡 < 0
𝑑𝑖 < 0 as 𝑑𝑖 = (𝑠– 𝑡)∆𝑥
• then, 𝑦𝑖+1 = 𝑦𝑖 putting this in (eq. 6)
𝑑𝑖+1 = 𝑑𝑖 + 2∆𝑦 – 2∆𝑥 𝑦𝑖 – 𝑦𝑖
= 𝑑𝑖 + 2∆𝑦
Bresenham’s Line Drawing Algorithm
Working of Bresenham's Algorithm:
𝑑 +2 ∆𝑦−∆𝑥 𝑖𝑓 𝑑𝑖 >0
• Thus we have, 𝑑𝑖+1 = {𝑑𝑖𝑖 +2∆𝑦 𝑖𝑓 𝑑𝑖 <0
• Now we calculate 𝑑𝑖 from the original value of di
• From (eq. 3)  𝑑𝑖 = ∆𝑥 𝑠 – 𝑡
• From (eq. 2)  = ∆𝑥 2𝑚 𝑥𝑖 + 1 + 2𝑏 – 2𝑦𝑖 – 1
𝑑1 = ∆𝑥 2𝑚 𝑥1 + 1 + 2𝑏 – 2𝑦1 – 1
= ∆𝑥[2(𝑚𝑥1 + 𝑏 − 𝑦1) + 2𝑚 – 1 )
• But 𝑦 = 𝑚𝑥 + 𝑏  𝑚𝑥 + 𝑏– 𝑦 = 0
 𝑚𝑥1 + 𝑏– 𝑦1 = 0
• Thus 𝑑1 = ∆𝑥 2 0 + 2𝑚 – 1
𝑑1 = ∆𝑥 2𝑚 – 1
∆𝑦
= ∆𝑥[2 – 1]
∆𝑥
𝑑1 = 2∆𝑦 – ∆𝑥
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
𝑑0 = 2∆𝑦 – ∆𝑥
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
𝑑𝑖+1 = 𝑑𝑖 + 2∆𝑦
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 𝑃1′(𝑥1’, 𝑦1’) to 𝑃2’(𝑥2’, 𝑦2’) with 𝑥1′ < 𝑥2′ and 0 < 𝑚 < 1.

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 𝑃1(1,1) and 𝑃2(8,5) with 0 < 𝑚 < 1.
𝑥1 = 1, 𝑦1 = 1, 𝑥2 = 8, 𝑦2 = 5
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
0 ≤ 𝑘 ≤ 1 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
𝑀 𝑥 + 1, 𝑦 + ½
• 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 𝐹(𝑥, 𝑦) = 0
• If 𝑦 is above the line, then 𝐹(𝑥, 𝑦) < 0
• If 𝑦 is below the line, then 𝐹(𝑥, 𝑦) > 0
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:
𝑥– 𝑥𝑐 2 + 𝑦– 𝑦𝑐 2 = 𝑟2 (𝑒𝑞. 1)
• 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:
𝑦 = 𝑦𝑐 ± 𝑥 − 𝑥𝑐 − 𝑟2 (𝑒𝑞. 2)
• 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 𝜃 (𝑒𝑞. 3)
𝑥 = 𝑥𝑐 + 𝑟 cos 𝜃, 𝑦 = 𝑦𝑐 + 𝑟 sin 𝜃 (𝑒𝑞. 3)
• 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 (𝑒𝑞. 1) or
equations (𝑒𝑞. 3) requires a good deal of computation time.
• The Cartesian equation (𝑒𝑞. 1) 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 (0, 0).

• 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 𝑥 = 0 to 𝑥 = 𝑦 in the first quadrant, the
slope of the curve varies from 0 to −1.
• 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:
𝑓𝑐𝑖𝑟𝑐𝑙𝑒(𝑥, 𝑦) = 𝑥2 + 𝑦2 – 𝑟2 (𝑒𝑞. 4)
• Any point (𝑥, 𝑦) on the boundary of the circle with radius 𝑟 satisfies the equation
𝑓𝑐𝑖𝑟𝑐𝑙𝑒(𝑥, 𝑦) = 0.
• 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 𝑥𝑘 + 1.
• Assuming we have just plotted the pixel at (𝑥𝑘 , 𝑦𝑘 ),
we next need to determine whether the pixel at position
(𝑥𝑘 + 1, 𝑦𝑘) or the one at position (𝑥𝑘 + 1, 𝑦𝑘 − 1) is
closer to the circle.
• Our decision parameter is the circle function evaluated at the midpoint between
these two pixels:
1 1 2
𝑝𝑘 = 𝑓𝑐𝑖𝑟𝑐𝑙𝑒 (𝑥𝑘 + 1, 𝑦𝑘 – ) = (𝑥𝑘 + 1) + (𝑦𝑘 – ) – 𝑟2
2 (𝑒𝑞. 5)
2 2
• If 𝑝𝑘 < 0, 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 𝑦𝑘 – 1.
• 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 𝑥𝑘+1 + 1 = 𝑥𝑘 + 2:
1 2
1 2 2
𝑝𝑘+1 = 𝑓𝑐𝑖𝑟𝑐𝑙𝑒 𝑥𝑘+1 + 1, 𝑦𝑘+1 – = [ 𝑥𝑘 + 1 + 1] + (𝑦𝑘+1 – ) – 𝑟
2 2
or
2
𝑝𝑘+1 = 𝑝𝑘 + 2(𝑥𝑘 + 1) + (𝑦𝑘+1 – 𝑦𝑘2 ) – (𝑦𝑘+1 – 𝑦𝑘 ) + 1 (𝑒𝑞. 6)
where 𝑦𝑘+1 is either 𝑦𝑘 or 𝑦𝑘 − 1, depending on the sign of 𝑝𝑘 .
• Increments for obtaining 𝑝𝑘+1 are either 2𝑥k+1 + 1 (if 𝑝𝑘 is negative) or 2𝑥k+1 + 1– 2𝑥k+1 .
• Evaluation of the terms 2𝑥k+1 and 2𝑦k+1 can also be done incrementally as
2𝑥k+1 = 2𝑥𝑘 + 2
2𝑦k+1 = 2𝑦𝑘– 2
• At the start position (0, 𝑟), these two terms have the values 0 and 2𝑟, respectively.
• Each successive value is obtained by adding 2 to the previous value 2𝑥 and subtracting 2
from the previous value of 2𝑦.
Circle Drawing – Midpoint Circle Algorithm
• The initial decision parameter is obtained by evaluating the circle function at
the start position (𝑥0, 𝑦0) = (0, 𝑟):
1 1 2 2
𝑝0 = 𝑓𝑐𝑖𝑟𝑐𝑙𝑒(1, 𝑟 – ) = 1 + (𝑟 – ) – 𝑟
2 2
or
5
𝑝0 = – 𝑟 (𝑒𝑞. 7)
4
• If the radius is specified as an integer, we can simply round 𝑝0 to 1– 𝑟 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 (𝑥0, 𝑦0) = (0, 𝑟).
5
2. Calculate the initial value of the decision parameter as: 𝑝0 = 4 – 𝑟
3. At each 𝑥𝑘 position, starting at 𝑘 = 0, perform the following test:
• If 𝑝𝑘 < 0, the next point along the circle centered on (0, 0) is (𝑥𝑘+1 , 𝑦𝑘) and
𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1
• Otherwise, the next point along the circle is (𝑥𝑘+1 , 𝑦𝑘−1 ) and
𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1 – 2𝑦𝑘+1
where 2𝑥𝑘+1 = 2𝑥𝑘 + 2 and 2𝑦𝑘+1 = 2𝑦𝑘– 2
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 𝑟 = 10, we demonstrate the midpoint circle algorithm by determining
positions along the circle octant in the first quadrant from 𝑥 = 0 to 𝑥 = 𝑦.
• The initial value of the decision parameter is: 𝑝0 = 1– 𝑟 =– 9.
• The initial point is (𝑥0, 𝑦0) – (0, 10), and initial increment terms for calculating the decision
parameters are: 2𝑥0 = 0, 2𝑦0 = 20.
• 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
𝑑1 and 𝑑2, then the general equation of an ellipse can be stated as:
𝑑1 + 𝑑2 = 𝑐𝑜𝑛𝑠𝑡𝑎𝑛𝑡 (𝑒𝑞. 1)
• Expressing distances 𝑑1 and 𝑑2 in terms of the focal coordinates 𝐹1 = (𝑥1, 𝑦1) and
𝐹2 = (𝑥2, 𝑦2), we have:
𝑥 − 𝑥1 2 + 𝑦 − 𝑦1 2 + 𝑥 − 𝑥2 2 + 𝑦 − 𝑦2 2 = 𝑐𝑜𝑛𝑠𝑡𝑎𝑛𝑡 (𝑒𝑞. 2)
• By squaring this equation, isolating the remaining radical, and then
squaring again, we can rewrite the general ellipse equation in the form:
𝐴𝑥2 + 𝐵𝑦2 + 𝐶𝑥𝑦 + 𝐷𝑥 + 𝐸𝑦 + 𝐹 = 0 (𝑒𝑞. 3)
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:
2
𝑥−𝑥𝑐 2 𝑦−𝑦𝑐
+ =1 (𝑒𝑞. 4)
𝑟𝑥 𝑟𝑦
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 (𝑒𝑞. 4) with (xc, yc) = (0, 0) as
𝑓ellipse 𝑥, 𝑦 = 𝑟𝑦2 𝑥 2 + 𝑟𝑥2 𝑦 2 − 𝑟𝑥2 𝑟𝑦2 (𝑒𝑞. 5)
which has the following properties:
< 0 if (x, y) is inside the ellipse boundary
𝑓ellipse 𝑥, 𝑦 = 0 if (x, y) is on the ellipse boundary (𝑒𝑞. 6)
> 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 (𝑒𝑞. 5) as

𝑑𝑦 2𝑟𝑦2 𝑥 (𝑒𝑞. 7)
=− 2
𝑑𝑥 2𝑟𝑥 𝑦
𝑑𝑦
• At the boundary between Region 1 and Region 2, = −1 𝑎𝑛𝑑 2𝑟𝑦2 𝑥 = 2𝑟𝑥2 𝑦
𝑑𝑥

• Therefore, we move out of Region 1 whenever

2𝑟𝑦2 𝑥 ≥ 2𝑟𝑥2 𝑦 (𝑒𝑞. 8)
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 (𝑒𝑞. 5)) at this midpoint:
1
𝑝1𝑘 = 𝑓ellipse 𝑥𝑘 + 1, 𝑦𝑘 −
2
1
2 (𝑒𝑞. 9)
= 𝑟𝑦2 𝑥𝑘 + 1 2
+ 𝑟𝑥2 𝑦𝑘 − − 𝑟𝑥2 𝑟𝑦2
2

– If 𝑝1𝑘 < 0, 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 𝑦𝑘 – 1.
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
● At the next sampling position (𝑥𝑘 + 1 + 1 = 𝑥𝑘 + 2), the
decision parameter for region 1 is evaluated as
1
𝑝1𝑘+1 = 𝑓ellipse 𝑥𝑘+1 + 1, 𝑦𝑘+1 −
2
2
1
= 𝑟𝑦2 𝑥𝑘 + 1 + 1 2 + 𝑟𝑥2 𝑦𝑘+1 − − 𝑟𝑥2 𝑟𝑦2
2
or
2 2
1 1
𝑝1𝑘+1 = 𝑝1𝑘 + 2𝑟𝑦2 𝑥𝑘 + 1 + 𝑟𝑦2 + 𝑟𝑥2 𝑦𝑘+1 −
2
− 𝑦𝑘 −
2
(𝑒𝑞. 10)
where 𝑦𝑘 + 1 is either 𝑦𝑘 or 𝑦𝑘 – 1 depending on the sign of 𝑝1𝑘.
– Decision parameters are incremented by the following amounts:
2𝑟𝑦2 𝑥𝑘+1 + 𝑟𝑦2 , 𝑖𝑓𝑝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 (0, 𝑟𝑦), the two terms evaluate to
2𝑟𝑦2 𝑥 = 0 (𝑒𝑞. 11)
2𝑟𝑥2 𝑦 = 2𝑟𝑥2 𝑟𝑦 (𝑒𝑞. 12)

– As 𝑥 and 𝑦 are incremented, updated values are obtained by adding to

(𝑒𝑞. 11) and subtracting from (𝑒𝑞. 12).
– The updated values are compared at each step, and we move from region
1 to region 2 when condition (𝑒𝑞. 8) 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 (𝑥0 , 𝑦0 ) = (0, 𝑟𝑦 ):
1
𝑝10 = 𝑓ellipse 1, 𝑟𝑦 −
2
2
1
= 𝑟𝑦2 + 𝑟𝑥2 𝑟𝑦 − − 𝑟𝑥2 𝑟𝑦2
2
or
1
𝑝10 = 𝑟𝑦2 − 𝑟𝑥2 𝑟𝑦 + 𝑟𝑥2
4
(𝑒𝑞. 13)
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
1
𝑝2𝑘 = 𝑓ellipse 𝑥𝑘 + , 𝑦𝑘 − 1
2
2 (𝑒𝑞. 14)
1
= 𝑟𝑦2 𝑥𝑘 + + 𝑟𝑥2 𝑦𝑘 − 1 2 − 𝑟𝑥2 𝑟𝑦2
2

• Midpoint between candidate pixels at

sampling position 𝑦𝑘 – 1 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:
1
𝑝2𝑘+1 = 𝑓ellipse 𝑥𝑘+1 + , 𝑦𝑘+1 − 1
2
2 (𝑒𝑞. 15)
1
= 𝑟𝑦2 𝑥𝑘+1 + = 𝑟𝑥2 𝑦𝑘 − 1 − 1 2
− 𝑟𝑥2 𝑟𝑦2
2
or
2 2
1 1 (𝑒𝑞. 16)
𝑝2𝑘+1 = 𝑝2𝑘 + 2𝑟𝑥2 𝑦𝑘 − 1 + 𝑟𝑥2 + 𝑟𝑦2 𝑥𝑘+1 + − 𝑥𝑘 +
2 2

with 𝑥𝑘 + 1 set either to 𝑥𝑘 or to 𝑥𝑘 + 1, depending on the sign of 𝑝2𝑘 .

Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
● When we enter region 2, the initial position (𝑥0, 𝑦0) is taken as the
last position selected in region 1 and the initial decision parameter
in region 2 is then

2
1 1
𝑝20 = 𝑥0 + , 𝑦0 − 1 = 𝑟𝑦2 𝑥0 +
2 2
+ 𝑟𝑥2 𝑦0 − 1 2
− 𝑟𝑥2 𝑟𝑦2 (𝑒𝑞. 17)

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

counterclockwise order starting at (𝑟𝑥 , 0).
– 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 (𝑒𝑞. 5) 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, 𝑟𝑦2, 2𝑟𝑥2 and 2𝑟𝑦2 are evaluated once at the
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)
2. Calculate the initial value of the decision parameter in region 1 as
2 2
1 2
𝑝10 = 𝑟𝑦 − 𝑟𝑥 𝑟𝑦 + 𝑟𝑥
4
3. At each xk position in region 1, starting at k = 0, perform the following test: If p1k < 0, the next point along the
ellipse centered on (0, 0) is (xk+1, yk) and
𝑝1𝑘+1 = 𝑝1𝑘 + 2𝑟𝑦2 𝑥𝑘+1 + 𝑟𝑦2
Otherwise, the next point along the ellipse is (xk + 1, yk – 1) and
𝑝1𝑘+1 = 𝑝1𝑘 + 2𝑟𝑦2 𝑥𝑘+1 − 2𝑟𝑥2 𝑦𝑘+1 + 𝑟𝑦2
with
2𝑟𝑦2 𝑥𝑘+1 = 2𝑟 2 𝑥𝑘 + 2𝑟𝑦2 , 2𝑟𝑥2 𝑦𝑘+1 = 2𝑟𝑥2 𝑦𝑘 − 2𝑟𝑘2
and continue until .
2𝑟𝑦2 𝑥 ≥ 2𝑟𝑥2 𝑦
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
1
𝑝20 = 𝑟𝑦2 𝑥0 + + 𝑟𝑥2 𝑦0 − 1 2
− 𝑟𝑥2 𝑟𝑦2
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𝑘+1 = 𝑝2𝑘 − 2𝑟𝑥2 𝑦𝑘+1 + 𝑟𝑥2
Otherwise, the next point along the ellipse is (xk + 1, yk – 1) and
𝑝2𝑘+1 = 𝑝2𝑘 + 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 + xc, y = y + yc
7. Repeat the steps for region 1 until .
2𝑟𝑦2 𝑥 < 2𝑟𝑥2 𝑦
Ellipse – Generating Algorithm
Midpoint Ellipse Algorithm
Example: Midpoint Ellipse Drawing
● Given input ellipse parameters 𝑟𝑥 = 8 and 𝑟𝑦 = 6, 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 (with increment 2𝑟𝑦2 = 72 )

2𝑟𝑥2 𝑦 = 2𝑟𝑥2 𝑟𝑦 (with increment −2𝑟𝑥2 = −128 )
● For region 1: The initial point for the ellipse centered on the origin is (𝑥0, 𝑦0) =
(0, 6), and the initial decision parameter value is
1 2
𝑝10 = 𝑟𝑦2 − 𝑟𝑥2 𝑟𝑦 + 𝑟𝑥 = −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) 2𝑟𝑦2 𝑥𝑥+1 2𝑟𝑥2 𝑦𝑥+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 (𝑥0, 𝑦0) = (7, 3) and the
initial decision parameter is
1
𝑝20 = 𝑓 7 + , 2 = −151
2

● The remaining positions along the ellipse path in the first

quadrant are then calculated as
k p2k (xk+1, yk+1) 2𝑟𝑦2 𝑥𝑥+1 2𝑟𝑥2 𝑦𝑥+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 [𝑝1 ; 𝑝2 ; 𝑝3 ; 𝑝4 ; … ; 𝑝2𝑛−1 ; 𝑝2𝑛 ], it draws the lines 𝑝1 →
𝑝2 ; 𝑝3 → 𝑝4 ; … ; 𝑝2𝑛−1 → 𝑝2𝑛 .
• A decision must be taken as to whether the edges should be displayed or not:
given that 𝑝1 = (𝑥1 , 𝑦) and 𝑝2 = (𝑥2 , 𝑦), should we display the line (𝑥1 , 𝑦, 𝑥2 , 𝑦)
or just the interior points (𝑥1+1 , 𝑦, 𝑥2−1 , 𝑦)?
• 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

(𝑥1 , 𝑦1 ), (𝑥2 , 𝑦2 ), 𝑦1 < 𝑦2 , an intersection between the two exists if
𝑦1 ≤ 𝑦 ≤ 𝑦2 .

𝑠−𝑐 𝑦2 −𝑦1
• The point of intersection is ( , 𝑠) where 𝑚 = and 𝑐 = 𝑦1 − 𝑚𝑥1 .
𝑚 𝑥2 −𝑥1

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 (3,3)
(𝐸9) and (6,3) (𝐸7) and (10,3) (𝐸5) to (15,3) (𝐸3).
• The next scan-line (4) is calculated in the same manner.
• In this the values of 𝑥 do not change (since the line is vertical; it is incremented
by 0).
• The active edge at scan-line 7 are 10 and 2 (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