Computer Graphics Comp565: Chapter - 2 Simple Drawing Algorithms

Computer Graphics
Comp565
Chapter – 2
Simple Drawing Algorithms
Introduction
 Simple drawing is started with point plotting

 Point plotting is accomplished by converting a single
coordinate position furnished by an application
program into an appropriate operation for the
output device in use
Line Drawing Algorithms
 Line drawing is accomplished by calculating intermediate
position along the line path between two specified end points.
 Line or vector is generated by changing the pixels into line.
 Drawing line on a raster grid implicitly involves approximation.
 The process of mapping image plane points to the positions on
the display devices is called rasterization.
2
Line Drawing Algorithms…
The most common line drawing algorithms are:

 DDA line drawing algorithm
 Bresenham’s line drawing algorithm
3
1. DDA line drawing algorithm

 Based on calculating the changes in x & y axes
 Uses floating point arithmetic
 Slow and accurate algorithm
Algorithm:
Steps:
1. Read the end points as (xs, ys) and (xe, ye)
2. Calculate the changes in x-axis and y-axis
∆x = xe – xs
∆y = ye –ys
4
3. If |∆x| > |∆y|, then

step = |∆x|
Else
step = |∆y|
4. Calculate the increments in x and y axes

xinc = ∆x/Step
yinc = ∆Y/Step
5. Initialize x & y coordinates to xs and ys respectively.
x = xs
y= ys
5
6. Plot a point at (x, y) position

putpixel(Round(x), Round(y), color)
7. Calculate the values of x and y for the next
position
x = x + xinc
y = y + yinc
8. Plot a point at (x, y) position
putpixel(Round(x), Round(y), color)
9. Repeat the steps 7 and 8 until x = xe
6
Example: Using DDA algorithm, indicate the

rasterization process when scan converting a line
from screen coordinate (1, 1) to (4, 3)
Solution:
1. let (xs, ys) = (1, 1) and (xe, ye) = (4, 3)
2. ∆x = xe – xs = 4 – 1= 3
∆y = ye –ys = 3 – 1 =2
3. |∆x| > |∆y| =|3| > |2| => 3 > 2, true
step = |∆x| = 3
4. xinc = (|∆x|)/step = 3/3 = 1
yinc = (|∆y|)/step = 2/3
7
5. x = xs = 1
y = ys = 1
6. plot a point at (x, y) position
putpixel(round(x), round(y), 15)
7. increment the values of x and y
x = x + xinc = 1 + 1= 2
y = y+ yinc = 1 + 2/3 = 5/3
8. putpixel(round(x), round(y),15)
x = x + xinc = 2 + 1= 3
y = y+ yinc = 5/3+ 2/3 = 7/3
8
putpixel(round (x), round (y),15)

x = x + xinc = 3 + 1= 4
y = y+ yinc = 7/3+ 2/3 = 3
putpixel(round (x), round (y),15)
since x = xe, stop
9
Procedure:
void lineDDA(float xs, float ys, float xe, float ye)
{
float dx, dy, x, y, xinc, yinc, step;
dx = xe – xs;
dy = ye –Ys;
if (abs(dx) > abs(dy))
step = abs(dx);
else
step = abs(dy);
xinc = dx /step;
yinc = dy /step;
10
x = xs;
y = ys;
putpixel(Round(x),Round(y),15);
for(int i=0; i<=step; i++)
{
x = x+xinc;
y = y+yinc;
putpixel(Round(x),Round(y),15);
}
}
11
2. Bresenham’s Line Drawing Algorithm

 An accurate and efficient raster line generating
algorithm
 Developed by Bresenham based on incremental
integer calculations
 Faster than DDA algorithm.
 The algorithm can be divided into two parts:
 For slope |m| < 1 and
 For slope |m| > = 1
12
Case 1: For slope |m| < 1

Steps:
1. Read (xe, ys) and (xe, ye) as two end points
2. Calculate ∆x and ∆y
∆x = |xe – xs|
∆y = |ye –ys|
p = 2∆y - ∆x // a decision parameter
3. Plot a point at (xs,ys) position
putpixel(xs, ys, color)
13
4. If p < 0
If xs < xe
xs = xs + 1
Else
xs = xs – 1
p = p + 2∆y
Otherwise //If p >= 0
If xs < xe, then
xs = xs + 1
Else
xs = xs – 1
If ys < ye, then
ys = ys + 1
14
Else
ys = ys – 1
p = p + 2(∆y -∆x)
5. Plot the point at the position(xs,ys)
6. Repeat step 4 and 5 until xs = xe
15
Case 2: For slope |m| >= 1

Steps:
1. Read (xs, ys) and (xe, ye) as two end points
2. Calculate ∆x and ∆y
∆x = |xe – xs|
∆y = |ye –ys|
p = 2∆x - ∆y // a decision parameter
16
4. If p < 0, then
If ys < ye, then
ys = ys + 1
Else
ys = ys – 1
p = p + 2∆x
Otherwise //If p >= 0
If xs < xe, then
xs = xs + 1
Else
xs = xs – 1
17
If ys < ye, then

ys = ys + 1
Else
ys = ys – 1
p = p + 2(∆x -∆y)
5. plot the point at position (xs, ys)
6. Repeat step 3 and 4 until ys = ye
18
Example: Indicate which rasterization would be

chosen by Bresenham’s line drawing algorithm
when scan converting a line from screen
coordinate (1, 1) to (8, 5).
Solution:
1.Let (xs, ys) = (1, 1) and (xe, ye) = (8,5)
2.∆x = |xe – xs| =|8 -1| = 7
∆y = |ye –ys| =|5 -1| = 4
p = 2∆y - ∆x (why? because |m| =4/7 <1)
= 2 x 4 – 7 = 1> 0
putpixel(xs, ys,15);
19
xs = xs +1 = 1 + 1=2
ys = ys +1 = 1 + 1=2
p = p + 2(∆y -∆x)
= 1 + 2(4 – 7) = -5 < 0
putpixel(xs,ys,15);
xs = xs +1 = 2 + 1=3
ys = ys = 2
p = p + 2∆y = -5+2*4=3 > 0
putpixel(xs,ys,15);
20
xs = xs +1 = 3 + 1=4
ys = ys +1 = 2 + 1=3
p = p + 2(∆y -∆x) =3+2(4-7)= -3<0
putpixel(xs,ys,15);

xs = xs +1 = 4 + 1=5
ys = ys = 3
p = p + 2∆y = -3 + 2(4) = 5 > 0
putpixel(xs,ys,15);
21
xs = xs +1 = 5+ 1=6
ys = ys = 3+1=4
p = p + 2(∆y -∆x) = 5 + 2(4-7) = -1< 0
putpixel(xs,ys,15);

xs = xs +1 = 6 + 1=7
ys = ys = 4
p = p + 2∆y = -1 + 2(4) = 7 > 0
putpixel(xs,ys,15);
22
xs = xs +1 = 7+ 1=8
ys = ys = 4+1=5
p = p + 2(∆y -∆x) = 7 + 2(4-7) = 1>0
putpixel(xs,ys,15);
Since xs = 8 = xe (stop)
23
Graphically:
24
Procedure:
void lineBresenham(int xs, int ys, int xe, int ye)
{
int dx, dy,p, p1, p2,x,y,xend;
dx =abs(xe –xs);
dy =abs(ye –ys);
p = 2*dy - dx;
p1 = 2*dy;
p2 = 2*(dy - dx);
25
if(xs > xe)

{
x=xe;
y=ye;
xend = xs;
}
else
{
x=xs;
y=ys;
xend=xe;
}
26
putpixel(x,y,15);
while(x<xend)
{
x++;
if(p<0)
p+=p1;
else
{
y++;
p+=p2;
}
putpixel(x, y,15);
}} 27
Circle Drawing Algorithm
The equation of a circle centre at the origin is given

by:
28
Circle Drawing Algorithm…
The equation of a circle with centre at (xc, yc) is

given by:
r2 = (x-xc) 2+ (y-yc) 2
29
 One can improve the drawing process of a circle by

taking advantage of eight-point symmetry in a
circle.
Example:
30
Circle Drawing Algorithm
Algorithm: Bresenham’s Circle Drawing Algorithm
Steps:
1. Read the radius of a circle
2. Initialize the variables
x=0
y=r
p = 3 – 2 * r (Decision parameter)
3. If p < 0 then
x = x+1
p=p+4*x+6
Otherwise//p>=0
y=y-1
x=x+1
p = p + 4(x - y) + 10
4. Plot point at (x,y) position
putpixel(x,y,color)
5. Repeat steps 3 & 4 until x<=y
32
Procedure
void bresenCircle(int xc, yc,int r)
{
int x,y,p;
x=0;
y=r;
p=3-2*r;
while(x<=y)
{
if(p<0)
p=p+(4*x+6);
33
else
{
y=y-1;
p=p+4*(x-y)+10;
}
plot(xc,yc,x,y);
x=x+1;
}
}
34
void plot(int xc,int yc,int x,int y)

{ putpixel(xc+x,yc+y,15);
putpixel(xc-x,yc+y,15);
putpixel(xc+x,yc-y,15);
putpixel(xc-x,yc-y,15);
putpixel(xc+y,yc+x,15);
putpixel(xc-y,yc+x,15);
putpixel(xc+y,yc-x,15);
putpixel(xc-y,yc-x,15);
} 35
Ellipse Drawing Algorithm…
An ellipse is the set of all points P in a plane.
36
Algorithm
Steps:
1. Get the centre point as (xc, yc)
2. Get the lengths of semi-major and semi-minor
axes as r1 & r2
3. Calculate the value of t
t=PI/180
4. Initialize i to zero (i=0)
5. Compute the value for d
d=i*t
37
6. Compute the values for x and y

x=xc+r1*sin(d)
y=yc+r2*cos(d)
7. plot a point at (x,y) position
8. Increment the value of i
i=i+1
9. Repeat steps (5) to (8) until i<360
38
Procedure:
void ellipseDraw(float xc,float yc,float r1,float r2)
{
float x,y,t,d, i;
t=3.14/180;
for(i=0;i<360;i++)
{
d=i*t;
x=xc+ceil(r1*sin(d));
y=yc+ceil(r2*cos(d));
putpixel(x,y,15);
}}
39
Character Generation and Attributes
The most common character’s attributes are:

 Color of a text/character
 Font is the specific (print or display) style of characters
and special symbols provided in a keyword.
 Character size, i.e. the height and width of each character
or its bounding box, depending on the font.
 Character spacing –individual characters can be spread
apart or packed closely depending on the font and visual
aesthetics.
 Character path - sequence of characters can be displayed
along four common paths. They are right to left, left to
right (both horizontal), bottom up, and top down (both
vertical). The situation becomes complicated with the
display of text along a slanted axis.
40
Character Generation and Attributes…
There are three basic methods to generate

characters:
 Hardware-based
 Vector-based and
 Bitmap-based methods
In hardware-based method, the logic for
generation of characters is built into the graphics
terminal. the character font type and style are
much limited due to restrictions in the hardware.
41
Character Generation and Attributes…
The vector-based method provides the widest

possibilities in character styles and sizes. A set of
polylines, even complex curve like splines,
contribute to shaping up of vector-based character
scaling, rotations, and slanted printing.
The bitmap-based character representation takes
the help of small rectangular bitmap, the smallest
addressable elements of which are pixels.
42
END
THE END!
43

Computer Graphics Comp565: Chapter - 2 Simple Drawing Algorithms

Uploaded by

Copyright:

Available Formats

Computer Graphics Comp565: Chapter - 2 Simple Drawing Algorithms

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Computer Graphics Comp565: Chapter - 2 Simple Drawing Algorithms

Uploaded by

Copyright:

Available Formats

Computer Graphics

 Simple drawing is started with point plotting

The most common line drawing algorithms are:

1. DDA line drawing algorithm

3. If |∆x| > |∆y|, then

4. Calculate the increments in x and y axes

6. Plot a point at (x, y) position

Example: Using DDA algorithm, indicate the

putpixel(round (x), round (y),15)

2. Bresenham’s Line Drawing Algorithm

Case 1: For slope |m| < 1

Case 2: For slope |m| >= 1

If ys < ye, then

Example: Indicate which rasterization would be

if(xs > xe)

The equation of a circle centre at the origin is given

The equation of a circle with centre at (xc, yc) is

 One can improve the drawing process of a circle by

void plot(int xc,int yc,int x,int y)

An ellipse is the set of all points P in a plane.

6. Compute the values for x and y

The most common character’s attributes are:

There are three basic methods to generate

The vector-based method provides the widest

You might also like