UNIT 2-Output Primitives

Introduction

VARDHAMAN COLLEGE OF ENGINEERING 1 CSE Department

UNIT 2-Output Primitives

Design criteria of straight lines

From geometry we know that a line, or line segment, can be uniquely specified by two points. From algebra we
also know that a line can be specified by a slope, usually given the name m and a y-axis intercept called b. Generally in
computer graphics, a line will be specified by two endpoints. But the slope and y-intercept are often calculated as
intermediate results for use by most line-drawing algorithms.

The goal of any line drawing algorithm is to construct the best possible approximation of an ideal line given the
inherent limitations of a raster display. Before discussing specific line drawing algorithms, it is useful to consider general
requirements for such algorithms. Let us see what are the desirable characteristics needed for these lines.

The primary design criteria are as follows

 Straight lines appear as straight lines
 Straight lines start and end accurately
 Displayed lines should have constant brightness along their length, independent of the line length and
orientation.
 Lines should be drawn rapidly

Digital Differential Analyzer

DDA algorithm is an incremental scan conversion method. Here we perform calculations at each step using the
results from the preceding step. The characteristic of the DDA algorithm is to take unit steps along one coordinate and
compute the corresponding values along the other coordinate. The unit steps are always along the coordinate of
greatest change, e.g. if dx = 10 and dy = 5, then we would take unit steps along x and compute the steps along y.
Suppose at step i we have calculated (xi, yi) to be a point on the line. Since the next point (x i+1,y i+1) should satisfy
∆y/∆ x =m where ∆y= y i+1–yi and ∆ x= x i+1–xi , we have y i+1= yi + m∆ x or x i+1=xi+ ∆ y/m
These formulas are used in DDA algorithm as follows. When |m| ≤ 1, we start with x = x1’≤ (assuming that x1’
<x2’) and y = y1’, and set ∆ x =1( i.e., unit increment in the x direction). The y coordinate of each successive point on the
line is calculated using y i+1= yi + m. When |m| >1, we start with x= x1’ and y= y1’ (assuming that y1’ < y2’), set ∆ y =1 (
i.e., unit increment in the y direction). The x coordinate of each successive point on the line is calculated using x i+1=xi+
1/m. This process continues until x reaches x2’(for m| ≤ 1 case )or y reaches y2’ (for m| > 1 case ) and all points are scan
converted to pixel points.
The explanation is as follows: In DDA algorithm we have to find the new point xi+1 and yi+1 from the existing
points xi and yi. As a first step here we identify the major axis and the minor axis of the line to be drawn. Once the major
axis is found we sample the major axis at unit intervals and find the value in the other axis by using the slope equation of
the line. For example if the end points of the line is given as (x1,y1)= (2,2) and (x2, y2)= (9,5). Here we will calculate y2-y1
and x2-x1 to find which one is greater. Here y2-y1 =3 and x2-x1 =7; therefore here the major axis is the x axis. So here
we need to sample the x axis at unit intervals i.e.∆ x = 1 and we will find out the y values for each ∆ x in the x axis using
the slope equation.
In DDA we need to consider two cases; one is slope of the line less than or equal to one (|m| ≤ 1)and slope of
the line greater than one (m| > 1). When |m| ≤ 1 means y2-y1 = x2-x1 or y2-y1 <x2-x1.In both these cases we assume x
to be the major axis. Therefore we sample x axis at unit intervals and find the y values corresponding to each x value. We
have the slope equation as
∆y=m∆x
y2-y1 = m (x2-x1)

VARDHAMAN COLLEGE OF ENGINEERING 2 CSE Department

UNIT 2-Output Primitives

In general terms we can say that y i+1 - yi = m(x i+1 - xi ). But here ∆ x = 1; therefore the equation reduces to y i+1= yi + m =
yi + dy/dx.
When m| > 1 means y2-y1> x2-x1 and therefore we assume y to be the major axis. Here we sample y axis at unit
intervals and find the x values corresponding to each y value.We have the slope equation as
∆y=m∆x
y2-y1 = m (x2-x1)
In general terms we can say that y i+1 - yi = m(x i+1 - xi ). But here ∆ y = 1; therefore the equation reduces to 1 = m(x i+1 -
xi). Therefore
x i+1=xi+ 1/m
x i+1=xi+ dx/dy
DDA Algorithm is given below:
procedure DDA( x1, y1, x2, y2: integer);
var
dx, dy, steps: integer;
x_inc, y_inc, x, y: real;
begin
dx := x2 - x1; dy := y2 - y1;
if abs(dx) > abs(dy) then
steps := abs(dx); {steps is larger of dx, dy}
else
steps := abs(dy);
x_inc := dx/steps; y_inc := dy/steps;
{either x_inc or y_inc = 1.0, the other is the slope}
x:=x1; y:=y1;
set_pixel(round(x), round(y));
for i := 1 to steps do
begin
x := x + x_inc;
y := y + y_inc;
set_pixel(round(x), round(y));
end;
end; {DDA}
The DDA algorithm is faster than the direct use of the line equation since it calculates points on the line without any
floating point multiplication.
DDA Algorithm:
1. Start.
2. Declare variables x,y,x1,y1,x2,y2,k,dx,dy,s,xi,yi and also declare
gdriver=DETECT, mode.
3. Initialize the graphic mode with the path location in TurboC3 folder.
4. Input the two line end-points and store the left end-points in (x1,y1).
5. Load (x1, y1) into the frame buffer; that is, plot the first point. put x=x1,y=y1.
6. Calculate dx=x2-x1 and dy=y2-y1.
7. If abs (dx) > abs (dy), do s=abs(dx).
8. Otherwise s= abs(dy).
9. Then xi=dx/s and yi=dy/s.

VARDHAMAN COLLEGE OF ENGINEERING 3 CSE Department

UNIT 2-Output Primitives

10. Start from k=0 and continuing till k<s,the points will be
i. x=x+xi.
ii. Y=y+yi.
11. Plot pixels using putpixel at points (x,y) in specified colour.
12. Close Graph and stop.

Bresenham’s line drawing Algorithm

In lecture <1> we discussed about the line drawing algorithm. You know that DDA algorithm is an incremental scan
conversion method which performs calculations at each step using the results from the preceding step. Here we are
going to discover an accurate and efficient raster line generating algorithm, the Bresenham's line-drawing algorithm.
This algorithm was developed by Jack E. Bresenham in 1962 at IBM. As stated above, in this lecture, I will explain how to
draw lines using the Bresenham's line-drawing algorithm. And then show you the complete line drawing function.
Before we begin on this topic, a revision of the concepts developed earlier like scan conversion methods and
rasterization may be helpful. Once we finish this aspect, we will proceed towards exposition of items listed in the
synopsis. In particular, we will emphasize the following
(a) The working of Bresenham’s algorithm.
(b) Implementation of the Bresenham’s algorithm.

The working of Bresenham’s algorithm

The following is an explanation of how the Bresenham's line-drawing algorithm works, rather than exact

implementation.

Let’s take a look at this image. One thing to note here is that it is impossible to draw the true line that we want because
of the pixel spacing. Putting it in other words, there's no enough precision for drawing true lines on a PC monitor
especially when dealing with low resolutions. The Bresenham's line-drawing algorithm is based on drawing an
approximation of the true line. The true line is indicated in bright color, and its approximation is indicated in black pixels.
In this example the starting point of the line is located exactly at 0, 0 and the ending point of the line is located
exactly at 9, 6. Now let discuss the way in which this algorithm works. First it decides which axis is the major axis and
which is the minor axis. The major axis is longer than the minor axis. On this picture illustrated above the major axis is
the X axis. Each iteration progresses the current value of the major axis (starting from the original position), by exactly
one pixel. Then it decides which pixel on the minor axis is appropriate for the current pixel of the major axis. Now how

VARDHAMAN COLLEGE OF ENGINEERING 4 CSE Department

UNIT 2-Output Primitives

can you approximate the right pixel on the minor axis that matches the pixel on the major axis? - That’s what
Bresenham's line-drawing algorithm is all about. And it does so by checking which pixel's center is closer to the true line.
Now you take a closer look at the picture. The center of each pixel is marked with a dot. The algorithm takes the
coordinates of that dot and compares it to the true line. If the span from the center of the pixel to the true line is less or
equal to 0.5, the pixel is drawn at that location. That span is more generally known as the error term.

You might think of using floating variables but you can see that the whole algorithm is done in straight integer
math with no multiplication or division in the main loops(no fixed point math either). Now how is it possible? Basically,
during each iteration through the main drawing loop the error term is tossed around to identify the right pixel as close
as possible to the true line. Let's consider these two deltas between the length and height of the line: dx = x1 - x0; dy =
y1 - y0; This is a matter of precision and since we're working with integers you will need to scale the deltas by 2
generating two new values: dx2 = dx*2; dy2 = dy*2; These are the values that will be used to change the error term.
Why do you scale the deltas? That’s because the error term must be first initialized to 0.5 and that cannot be done using
an integer. Finally the scaled values must be subtracted by either dx or dy (the original, non-scaled delta values)
depending on what the major axis is (either x or y).

The implementation of Bresenham’s algorithm

The function given below handles all lines and implements the complete Bresenham's algorithm.

function line(x0, x1, y0, y1)

boolean steep := abs(y1 - y0) > abs(x1 - x0)
if steep then
swap(x0, y0)
swap(x1, y1)
if x0 > x1 then
swap(x0, x1)
swap(y0, y1)
int deltax := x1 - x0
int deltay := abs(y1 - y0)
real error := 0
real deltaerr := deltay / deltax
int y := y0
if y0 < y1 then ystep := 1 else ystep := -1
for x from x0 to x1
if steep then plot(y,x) else plot(x,y)
error := error + deltaerr
if error ≥ 0.5
y := y + ystep
error := error - 1.0

Note:-To draw lines with a steeper slope, we take advantage of the fact that a steep line can be reflected across the line
y=x to obtain a line with a small slope. The effect is to switch the x and y variables throughout, including switching the
parameters to plot.

VARDHAMAN COLLEGE OF ENGINEERING 5 CSE Department

UNIT 2-Output Primitives

BRESENHAM’S LINE DRAWING ALGORITHM

1. Input the two line end-points, storing the left end-point in (x0, y0)

2. Plot the point (x0, y0)

3. Calculate the constants Δx, Δy, 2Δy, and (2Δy - 2Δx) and get the first value for the decision parameter as:

p0  2y  x
4. At each xk along the line, starting at k = 0, perform the following test. If pk < 0, the next point to plot is (xk+1, yk )
and:

pk 1  pk  2y
Otherwise, the next point to plot is (xk+1, yk+1) and:

pk 1  pk  2y  2x
5. Repeat step 4 (Δx – 1) times

NOTE: The algorithm and derivation above assumes slopes are less than 1. For other slopes we need to adjust
the algorithm slightly

Scan converting a circle

Circles have the property of being highly symmetrical, which is handy when it comes to drawing them on a display
screen.
 We know that there are 360 degrees in a circle. First we see that a circle is symmetrical about the x axis, so only the
first 180 degrees need to be calculated.
 Next we see that it's also symmetrical about the y axis, so now we only need to calculate the first 90 degrees.
 Finally we see that the circle is also symmetrical about the 45 degree diagonal axis, so we only need to calculate the
first 45 degrees.
 We only need to calculate the values on the border of the circle in the first octant. The other values may be
determined by symmetry.

Bresenham's circle algorithm calculates the locations of the pixels in the first 45 degrees. It assumes that the circle is
centered on the origin. So for every pixel (x, y) it calculates, we draw a pixel in each of the eight octants of the circle. This

VARDHAMAN COLLEGE OF ENGINEERING 6 CSE Department

UNIT 2-Output Primitives

is done till when the value of the y coordinate equals the x coordinate. The pixel positions for determining symmetry are
given in the below algorithm.

 Assume that we have

just plotted point (xk, yk)

 The next point is a

choice between (xk+1, yk)
and (xk+1, yk-1)

 We would like to choose

the point that is nearest to
the actual circle

 So we use decision parameter

here to decide.

Mid point circle algorithm

In midpoint circle algorithm, we sample at unit intervals and determine the closest pixel position to the specified circle
path at each step. For a given radius r and screen center position (xc, yc), this algorithm first calculate pixel positions
around a circle path centered at the coordinate origin (0, 0). Then each calculated position (x, y) is moved to its proper
position by adding xc to x and yc to y. Along the circle section from x = 0 to x = y in the first quadrant, the slope of the
curve varies from 0 to -1. Therefore, we can take steps in the positive x direction over this octant and use a decision
parameter to determine which of the two possible y positions is closer to the circle path at each step. Positions of the
other seven octants are then obtained by symmetry.
f circle (x, y) = x2 + y2 – r2
Any point on the boundary of the circle with radius r satisfies the equation f circle (x, y) = 0. If the point is in the interior of
the circle, the circle function is negative. If the point is outside the circle, the circle function is positive. This test is
performed for the mid positions between pixels near the circle path at each sampling step.

Assuming we have plotted the pixel at (Xk, Yk), we next need to determine whether the pixel at position (Xk +1, Yk -1) is
closer to the circle. For that we calculate the circle function at the midpoint between these points.
Pk = f circle (Xk +1, Yk - ½)
If Pk < 0, this midpoint is inside the circle and the pixel on the scan line Yk, is closer to the circle boundary, and we select
the pixel on the scan line Yk -1. Successive parameters are obtained using incremental calculations. The initial decision
parameter is obtained by evaluating the circle function at the staring position (X0, Y0) = (0, r).
= f circle (1, r – ½)
= 1 +(r – ½)2 - r 2
= 5/4 - r

VARDHAMAN COLLEGE OF ENGINEERING 7 CSE Department

UNIT 2-Output Primitives

Algorithm:
1. Input radius r and circle centre (xc, yc), then set the coordinates for the first point on the circumference of a
circle centred on the origin as:

2. Calculate the initial value of the decision parameter as:

( x0 , y0 )  (0, r )
p0  5  r
4
3. Starting with k = 0 at each position xk, perform the following test. If pk < 0, the next point along the circle centred
on (0, 0) is (xk+1, yk) and:

pk 1  pk  2 xk 1  1

Otherwise the next point along the circle is (xk+1, yk-1) and: pk 1  pk  2 xk 1  1  2 yk 1
4. Determine symmetry points in the other seven octants
5. Move each calculated pixel position (x, y) onto the circular path centred at (xc, yc) to plot the coordinate values:
6. Repeat steps 3 to 5 until x >= y

x  x  xc y  y  yc
Symmetric pixel positions:
 putpixel(xc+x,yc-y,GREEN); //For pixel (x,y)
 putpixel(xc+y,yc-x, GREEN); //For pixel (y,x)
 putpixel(xc+y,yc+x, GREEN); //For pixel (y,-x)
 putpixel(xc+x,yc+y, GREEN); //For pixel (x,-y)
 putpixel(xc-x,yc+y, GREEN); //For pixel (-x,-y)
 putpixel(xc-y,yc+x, GREEN); //For pixel (-y,-x)
 putpixel(xc-y,yc-x, GREEN); //For pixel (-y,x)
 putpixel(xc-x,yc-y, GREEN); //For pixel (-x,y)

VARDHAMAN COLLEGE OF ENGINEERING 8 CSE Department

UNIT 2-Output Primitives

Ellipse Generation Algorithm:

Basic Concept: In Ellipse,
 Symmetry between quadrants exists
 Not symmetric between the two octants of a quadrant
 Thus, we must calculate pixel positions along the elliptical arc through one quadrant and then we
obtain positions in the remaining 3 quadrants by symmetry

The next pixel is chosen based on the decision parameter. The required conditions are given in following
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 parameter in region 1 as

p10  ry2  rx2 ry  14 rx2

3. At each xi position, starting at i = 0, if p1i < 0, the next point along the ellipse centered on (0, 0) is (xi +

p1i 1  p1i  2ry2 xi 1  ry2

1, yi) and

Otherwise, the next point is (xi + 1, yi – 1) and

p1i 1  p1i  2ry2 xi 1  2rx2 yi 1  ry2

and continue until 2ry2 x  2rx2 y
4. (x0, y0) is the last position calculated in region 1. Calculate the initial parameter in region 2 as

p 20  ry2 ( x0  12 )2  rx2 ( y0  1)2  rx2 ry2

VARDHAMAN COLLEGE OF ENGINEERING 9 CSE Department

UNIT 2-Output Primitives

5. At each yi position, starting at i = 0, if p2i > 0, the next point along the ellipse centered on (0, 0) is (xi, yi
– 1) and

p2i 1  p2i  2rx2 yi 1  rx2

Otherwise, the next point is (xi + 1, yi – 1) and p 2i 1  p 2i  2ry2 xi 1  2rx2 yi 1  rx2
Use the same incremental calculations as in region 1. Continue until y = 0.
6. For both regions determine symmetry points in the other three quadrants.

7. 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

VARDHAMAN COLLEGE OF ENGINEERING 10 CSE Department