Line Generation

Algorithms

VECGEN Algorithm
The concept of drawing a line or a curve,
stepping along a row index (y) or a column
index (x) to determine the corresponding
column index or row index respectively is
known as Digital Differential Analyzer (DDA).
The line equation works well for gentle slope
but when the slope is sharp the role of x and
y are interchanged as well as slope m
replaced by 1/m. This method is known as
VECGEN method.

Steps for VECGEN Algorithm

Step 1 : Read the line end points (x1 , y1) and (x2 , y2)
such that they are not equal.
Step 2 : x = x2 x1 and y = y2 y1[find the
difference of end points]
Step 3 : if (x y) then
length = x
else
length = y
end if
Step 4 : x = (x2 x1)/length [Find total intermediate
points]
y = (y2 y1)/length

Steps for VECGEN Algorithm

Step 5 : x = x1 + 0.5
y = y1 + 0.5
(The factor 0.5 makes it possible to round the
values in the integer function rather than truncating
them)
Step 6 : setPixel(x1, y1, 1) [Plot the first point]
Step 7 : x = x + x
y = y + y
setPixel(x, y,1)
[Plot all points]
Step 8 : Repeat Step-7 for length time

VECGEN Algorithm
Advantage :
It is a faster method for calculating pixel
position then simple line algorithm.
It eliminates continues multiplication in
equation y=mx+b so that appropriate
increments are applied on x or y.
Disadvantage :
Round off error in successive additions can
cause the pixel positions to drift away from the
true line path for long line segments.
The rounding operations and floating point
arithmetic are still time consuming.

Bresenhams Algorithm
The line generating algorithm developed by
Bresenham is accurate and faster; which converts
scan lines using incremental integer calculations
that can be used to draw not only lines but also
used to display circles and other curves.

Bresenhams Algorithm
Let us assume that we are
drawing a line y = mx+b that
passes through a point (x0,y0).
Here 0 < m < 1. Let us also
assume that the last pixel
turned on is (xk,yk) and the
decision to be made is for the
next step that is for the vertical
Now let us assume a vertical
distance xk+1
row of pixels which passes
through horizontal distance
xk+1. There are three vertical
points, (xk+1, yk), (xk+1, y) and
(xk+1, yk+1), fall on this

Bresenhams Algorithm
The equation of this vertical line is,
y= m(xk+1) + b
Therefore, d1 = y yk
= m(xk+1) + b yk
d2 = yk +1 y
= yk +1 - (m(xk+1) + b)
= yk +1 - m(xk+1) b
The difference among these two points can be obtained as
d1-d2,
d1 - d2 = [m(xk+1) + b yk] [yk +1 - m(xk+1) b]
= m(xk)+ m + b yk yk 1 + m(xk) + m + b
= 2m( xk) +2m + 2b - 2yk - 1
= 2m(xk + 1) + 2b - 2yk - 1

Bresenhams Algorithm
So,
d1 - d2 = 2m(xk + 1) + 2b - 2yk 1
[after substituting m =dy/dx ]
= 2 (dy/dx)(xk + 1) + 2b - 2yk 1
dx (d1 - d2)
= 2 dy (xk + 1) + 2b dx - 2yk dx
dx
= 2 dy xk + 2 dy + 2b dx - 2yk dx dx
Gk = 2 dy xk - 2yk dx + c
where c = 2 dy + 2b dx dx and it is independent of
the positions of pixel, and Gk is a decision
parameter for the kth step.

Bresenhams Algorithm
If Gk is positive, that is dx(d1 - d2) > 0, and d1 >
d2. Therefore, the upper pixel at position yk + 1 is
closer to the line than the pixel yk, hence the pixel
at position yk + 1 will be activated.
In case of negative Gk, that is dx(d1 - d2) < 0, (d2
> d1) and therefore the pixel at position yk will be
activated.

Bresenhams Algorithm
Now for the (k + 1)st step,
Gk+1 = 2 dy (xk+1) 2(yk+1) dx + c
Gk+1 - Gk = [2 dy (xk+1) 2(yk+1) dx + c] [2 dy xk 2yk dx + c]
= 2 dy (xk+1) 2(yk+1) dx + c 2 dy xk + 2yk
dx c
= 2 dy (xk+1 - xk) - 2dx (yk+1 - yk)
= 2 dy - 2dx (yk+1 - yk)

[since xk+1 - xk = 1]

Gk+1 - Gk = 2 dy - 2dx (yk+1 - yk)

Gk+1

= Gk + 2 dy - 2dx (yk+1 - yk)

where the value of (yk+1 - yk) will be 0 or 1

Bresenhams Algorithm
At this stage the basic algorithm is defined. We
only need to calculate the initial value for
parameter p0.
G0 = 2 dy x0 2 dx y0 + 2 dy + 2 dx b dx
For the initial point on the line:
y0 = mx0 + b
Therefore,
b = y0 (dy/dx) x0

Bresenhams Algorithm
Substituting the above for b we get:
G0 = 2 dy x0 2 dx y0 + 2 dy + 2 dx [ y0 (dy/dx)
x0 ] dx
= 2 dy x0 2 dx y0 + 2 dy + 2 dx y0 2 dx
(dy/dx) x0 dx
= 2 dy x0 2 dx y0 + 2 dy + 2 dx y0 2 dy x0
dx
= 2 dy x0 2 dy x0 2 dx y0 + 2 dx y0 + 2 dy
dx
= 2 dy dx

Bresenhams Algorithm
Bresenham's Line-Drawing Algorithm for |m|
<1
Step 1: Input the two line endpoints and store the
left endpoint in (x0,y0)
Step 2: Load (x0,y0) into the frame buffer; that is,
plot the first point.
Step 3: Calculate constants dx, dy, 2dy, and 2dy
2dx, and obtain the starting value for the decision
parameter as
G0 = 2dy - dx

Bresenhams Algorithm
Step 4: At each xk along the line, starting at k =
0, perform the following test:
If Gk < 0, the next point to plot is (xk +1, yk)
and
Gk +1 = Gk + 2dy
Otherwise, the next point to plot is (xk +1, yk
+1)
Gk +1 = Gk + 2dy - 2dx
Step 5: Repeat Step 4 dx number of times.

Circle Generation
Algorithms

Circle Generation Algorithm

Properties of Circles
A circle is defined as the set of points
that are all at a given distance r from
a center position (xc, yc).
(x - xc)2 + (y - yc)2 = r2
We could use this equation to
calculate the position of points on a
circle circumference by stepping
along the x axis in unit steps from x c
- r to xc + r and calculating the
corresponding y values at each
position as

Circle Generation Algorithm

Program for circle generation algorithm
using equation of a circle :

Circle Generation Algorithm

Expressing the circle equation in parametric polar
form yields the pair of equations :
x = xc + r cos
y = yc + r sin
Program for circle generation algorithm using
parametric equation of a circle :

Circle Generation Algorithm

Midpoint Circle Algorithm

yi

Midpoin
t

yi-1

x2 + y 2 r 2 = 0

xi xi+1 xi+2
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.
Assuming that we have just plotted the pixels at (xi ,
yi).

Midpoint Circle Algorithm

To apply the midpoint method, we define a circle
function: f circle ( x, y ) x 2 y 2 r 2
Any point ( x , y) on the boundary of the circle
with radius r satisfies the equation fcircle(x, y) = 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.
To summarize, the relative position of any point
(x. v) can be determined by checking the sign of
the circle function:

Midpoint Circle Algorithm

The decision parameter is the circle at the midpoint
between the pixels yi and yi 1.

pi f circle ( xi 1, yi 12 )
( xi 1) 2 ( yi 12 ) 2 r 2
If pi < 0, the midpoint is inside the circle and the
pixel yi is closer to the circle boundary.
If pi 0, the midpoint is outside the circle and the
pixel yi - 1 is closer to the circle boundary.

Midpoint Circle Algorithm

Decision Parameters are obtained using
incremental calculations

pi 1 f circle ( xi 1 1, yi 1 )
1
2

OR

Note:
xi+1 = xi +1

( xi 2) 2 ( yi 1 12 ) 2 r 2

where yi+1 is either yi or yi-1 depending on the

sign of pi

Midpoint Circle Algorithm

Initial decision parameter is obtained by
evaluating the circle function at the start
position (x0,y0) = (0, r) :
p0 = circle(1, r )
= 1 + (r - )2 r2
= 5/4 r
If the radius r is specified as an integer, we
can simply round p0 to
p0 = 1 r

Midpoint Circle Algorithm

Step 1 : Initial values:- point(0,r)
x0 = 0
y0 = r

move circle origin at

(0,0) by

x = x xc and y = y yc

Step 2 : Initial decision parameter

p0 = 5/4 r
Step 3 : At each xi position, starting at i = 0,
perform the following test: if pi < 0, the next
point is (xi + 1, yi) and
pi+1 = pi + 2xi+1 + 1
If pi 0, the next point is (xi+1, yi-1) and
pi+1 = pi + 2xi+1 + 1 2yi+1
where 2x

= 2x + 2 and 2y

= 2y 2

Midpoint Circle Algorithm

Step 4 : Determine symmetry points in the other
octants
Step 5 : Move pixel positions (x,y) onto the circular
path centered on (xc, yc) and plot the
coordinates: x = x + xc, y = y + yc
Step 6 : Repeat 3 5 until x y

Plotting co-ordinates using 8-fold

symmetry of circle
void plotpoints(int x, int y)
{
setpixel(xcenter+x, ycenter+y);
setpixel(xcenter-x, ycenter+y);
setpixel(xcenter+x, ycenter-y);
setpixel(xcenter-x, ycenter-y);
setpixel(xcenter+y, ycenter+x);
setpixel(xcenter-y, ycenter+x);
setpixel(xcenter+y, ycenter-x);
setpixel(xcenter-y, ycenter-x);
}

Bresenhams Circle
Algorithm
General Principle
The circle function:

Consider only
45 90

f circle ( x, y ) x 2 y 2 r 2

and
0 if (x,y) is inside the circle boundary

f circle ( x, y ) 0 if (x,y) is on the circle boundary

0 if (x,y) is outside the circle boundary

Bresenhams Circle
Algorithm

After point p1, do we choose p2 or p3?

Bresenhams Circle
Algorithm
Define: D(si) = distance of p3 from circle
D(ti) = distance of p2 from circle
i.e. D(si) = (xi + 1)2 + yi2 r2
[always +ve]
D(ti) = (xi + 1)2 + (yi 1)2 r2 [always -ve]
Decision Parameter pi = D(si) + D(ti)
so, if pi < 0 then the circle is closer to p3 (point
above)
if pi 0 then the circle is closer to p2 (point below)

Bresenhams Circle
Algorithm
x0 = 0
y0 = r
p0 = [12 + r2 r2] + [12 + (r-1)2 r2] = 3 2r
if pi < 0 then
yi+1 = yi
pi+1 = pi + 4xi + 6

xi+1 = xi + 1

else if pi 0 then
yi+1 = yi 1
pi+1 = pi + 4(xi yi) + 10
Stop when xi yi and determine symmetry points in
the other octants

Ellipse Generating Algorithm

Ellipse A modified circle whose radius varies from a
maximum value in one direction (major axis) to a minimum
value in the perpendicular direction (minor axis).

F1

d1

P=(x,y)

F2

d2

The sum of the two distances d1 and d2, between the

fixed positions F1 and F2 (called the foci of the ellipse)
to any point P on the ellipse, is the same value, i.e.

Ellipse Properties
Expressing distances d1 and d2 in terms of the focal
coordinates F1 = (x1, x2) and F2 = (x2, y2), we have:

( x x1 ) 2 ( y y1 ) 2 ( x x2 ) 2 ( y y2 ) 2 constant
ry
rx

y yc
x xc
1

Cartesian coordinates:

rx
ry
Polar coordinates:

x xc rx cos
y yc ry sin

Ellipse Algorithms
Symmetry between quadrants
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
(-x, y)

(x, y)
ry
rx

(-x, -y)

(x, -y)

Ellipse Algorithms
f ellipse ( x, y ) ry2 x 2 rx2 y 2 rx2 ry2
Decision parameter:

0 if ( x, y ) is inside the ellipse

f ellipse ( x, y ) 0 if ( x, y ) is on the ellipse

0 if ( x, y ) is outside the ellipse

Slope = -1
ry

rx

2ry2 x
dy
Slope
2
dx
2rx y

Ellipse Algorithms

Slope = -1
1

ry 2
rx

Starting at (0, ry) we take unit steps in the x

direction until we reach the boundary between
region 1 and region 2. Then we take unit steps in
the y direction over the remainder of the curve in
the first quadrant.
At the boundarydy
2
2

dx

2ry x 2rx y

therefore, we move out2 of region

1 whenever
2
2ry x 2rx y

Midpoint Ellipse Algorithm

yi

Midpoin
t

yi-1

xi

xi+1 xi+2

Assuming that we have just plotted the pixels at

(xi , yi).
p1i f ellipse
( xi 1, yi 12 ) by:
The next position
is determined

ry2 ( xi 1) 2 rx2 ( yi 12 ) 2 rx2 ry2

If p1i < 0 the midpoint is inside the ellipse yi is
closer

Decision Parameter (Region

1)
At the next position [xi+1 + 1 = xi + 2]

p1i 1 f ellipse ( xi 1 1, yi 1 12 )
ry2 ( xi 2) 2 rx2 ( yi 1 12 ) 2 rx2 ry2
OR

p1i 1 p1i 2ry2 ( xi 1) 2 ry2 rx2 ( yi 1 12 ) 2 ( yi 12 ) 2

where yi+1 = yi
or
yi+1 = yi 1

Decision Parameter (Region

1)
Decision parameters are incremented by:

2ry2 xi 1 ry2
increment
2
2
2
2
r
x

2
r

y i 1
y
x yi 1

if p1i 0
if p1i 0

Use only addition and subtraction by obtaining

2ry2 x and 2rx2 y

At initial position (0, ry)

2ry2 x 0
2rx2 y 2rx2 ry
p10 f ellipse (1, ry 12 ) ry2 rx2 (ry 12 ) 2 rx2 ry2
ry2 rx2 ry 14 rx2

Region 2
Over region 2, step in the negative y direction and midpoint
is taken between horizontal pixels at each step.

yi

Midpoin
t

yi-1

xi

xi+1 xi+2

Decision parameter:

p 2i f ellipse ( xi 12 , yi 1)
ry2 ( xi 12 ) 2 rx2 ( yi 1) 2 rx2 ry2

Decision Parameter (Region

2)
At the next position [yi+1 1 = yi 2]

p 2i 1 f ellipse ( xi 1 12 , yi 1 1)
ry2 ( xi 1 12 ) 2 rx2 ( yi 2) 2 rx2 ry2
OR

p 2i 1 p 2i 2rx2 ( yi 1) rx2 ry2 ( xi 1 12 ) 2 ( xi 12 ) 2

where xi+1 = xi
or
xi+1 = xi + 1

Decision Parameter (Region

2)
Decision parameters are incremented by:
2rx2 yi 1 rx2
increment
2
2
2
2
r
x

2
r
y

r
y i 1
x i 1
x

if p 2i 0
if p 2i 0

At initial position (x0, y0) is taken at the last

position selected in region 1

p 20 f ellipse ( x0 12 , y0 1)
ry2 ( x0 12 ) 2 rx2 ( y0 1) 2 rx2 ry2

Midpoint Ellipse 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 p1 i < 0, the next
point along the ellipse centered on (0, 0) is (x i + 1, yi) and

p1i 1 p1i 2ry2 xi 1 ry2

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

p1i 1 p1i 2ry2 xi 1 2rx2 yi 1 ry2

and continue until2ry2 x 2 rx2 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

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

p 2i 1 p 2i 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

Line Styles
Solid lines, dashed lines, dotted lines and
thick lines are used as different line styles
in graphics applications.
A dashed line can be generated by interdash spaces between the dashes.
Dashes and inter-dash spaces are equal in
length whereas a dotted line can be
generated by very short length dashes.

Thick Lines
If you need such a line segment with a
thickness of three pixels, you need to put
there a vertical span of three pixels for
each value of .
Thus, a line with any width , can be
generated just by putting a vertical span
of (w/2) pixels on both the sides of the
central line.

Thick Lines
Let P1(x1,y1) and P2(x2,y2) be the end points of a
line segment with width , which is to be drawn.
Here two parallel line segments will be drawn
from a central line(x1,y1) and (x2,y2) at a
distance(w/2).
The coordinates of end points of the upper and
lower line boundaries are [(x1,y1 + wy), (x2,y2 +
wy)] and [(x1,y1 - wy), (x2,y2 - wy)] respectively.
Where the wy is as below:

Thick Lines
When the slope is steep that is greater
than 1, the role of x and y in the above
equation will get change and the equation
would be written as follows:

Line Caps
There are three basic techniques or caps
which are used in graphics applications:
butt cap, round cap, and projecting square
cap.

Line Caps
In the projecting square cap, the portion of
line segment is just extended to give a line
segment an effect of square.
In the round cap, the upper and lower line
boundaries are joined by a circular arc with
a semi-circle of the diameter of the width of
the thick line segment.
In the butt cap the end positions of the thick
lines are adjusted in such a way that the line
segment appears with square ends.

Thick Line Joints

When two thick line segments are connected with each
other, they create problems at the joining end points.
Joint of two such lines is shown in the figure besides:

Thick Line Joints

There are three joints:
Miter Joint
The miter joint is one in which the exterior boundaries of two
thick line segments are extended up to their intersection point
the point where these two line segments meet each other, if
they are extended.

Round Joint
In the round joint, the exterior boundaries are connected with a
circular arch with a diameter of total thickness of two thick
lines, which are joined.

Bevel Joint
The bevel joint is one where butt cap is used to draw line
segment and the little triangle that is created at the joint is
filled with color of these two line segments.

Thick Line Joints

Character Generation
Three methods for generating
character:
1. Stroke method

This method creates characters out of

a series of line segments, like strokes
of a pen.

2. Bitmap method

In this characters are represented by

an array of dots. This array is like a
small frame buffer. The dots are the
pixels for this small array.
The dots patterns for all characters
are stored in the hardware device
called a character generator chip. The
character generator chip accepts
address for the character and gives
the bit pattern for that character as an
output.

Stroke
Method

Bitmap

Character Generation
3. Stardust method

In this method, a fix pattern of line segments are used

to generate characters.
In this example, there are 24 line segments out of
which, segments required to display for particular
character are highlighted.
This method of character generation is called starbust
because of its characteristic appearance.

Aliasing
The effect created when rasterization is
performed over a discrete series of pixels.
In particular, when lines or edges do not
necessarily align directly with a row or
column of pixels, that line may appear
unsmooth and have a stair-step edge
appearance.
Anti aliasing utilizes blending techniques
to blur the edges of the lines and provide
the viewer with the illusion of a smoother
line.

Aliasing

Antialiasing
The process of removing one or more of
the unwanted artifact is called antialiasing or smoothing.

Antialiasing

Two general approaches: Area sampling and

super-sampling
Area sampling approaches sample primitives with
a box (or Gaussian, or whatever) rather than
spikes
1. Requires primitives that have area (lines with
width)
2. Sometimes referred to as pre-filtering
Super-sampling samples at higher resolution,
then filters down the resulting image
i. Sometimes called post-filtering
ii. The prevalent form of anti-aliasing in
hardware