Graphics Output Primitive ch2-2021

Chapter Two
Part one
2-1 Plotting Point
Point is the fundamental element of the picture representation. It is

nothing but the position in a plan defined as either pairs or triplets of
number depending on whether the data are two or three dimensional.
Thus, (x1,y1) or (x1,y1,z1) would represent a point in either two three
dimensional space. Two points would represent a line or edge, and a
collection of three or more points a polygon. The representation of curved
lines is usually accomplished by approximating them by short straight
line segments.
If the two points used to specify a line are (x1,y1) and (x2,y2), then an
equation for the line is given as
Where
and
The above equation is called the slop intercept form of the line. The slope
m is the change in height (y2-y1) divided by the change in the width (x2-
x1) for two points on the line. The intercept b is the height at which the
line crosses the y-axis.
We can determine whether two lines are crossing or parallel. When two
lines cross, they share some point in common. Of course, that point
satisfies equations for the two lines. Let us see how to obtain this point.
Consider two lines having slops m1 and m2 and y-intercepts b1 and b2
respectively. Then we can write the equations for these two lines as,
Line 1 :
Line 2:
If point is shared by both lines, then it should satisfy the last two
equations
and
Equating the above equations gives,
31 (2019-2020 ( ‫قسم علوم الحاسبات‬ ‫ فرح قيس عبد هللا‬.‫ د‬-: ‫مدرسة المادة‬
Substituting this into equation for line 1 or for line 2 gives,
Therefore, the point is the point of

intersection.
If the two lines are parallel, they have the same slope. In the expression
for the point of intersection, m1 = m2. So the denominator becomes
zero. So the expression results in a divide by zero. This means, there is
no point of intersection for the parallel lines.
2-2 Line Drawing Algorithms
The process of ‘turning on’ the pixels for a line segment is called vector
generation or line generation, and the algorithms for them are known as
vector generation algorithms or line drawing algorithms.
Before discussing specific line drawing algorithms it is useful to note the
general requirements for such algorithms. These requirements specify the
desired characteristics of line.
 The line should appear as a straight line and it should start and end
accurately.
 The line should be displayed with constant brightness along its
length independent of its length and orientation.
 The line should be drawn rapidly.
Let us see the different lines drawn in fig bellow,
Figure (2.1)
As shown in the figure, horizontal and vertical lines are straight and
have same width. The 45° line is straight, but its width is not constant.
On the other hand, the line with any other orientation is neither
straight nor has same width. Such cases are due to the finite resolution
of display and we have to accept approximate pixels in such situation.
The brightness of the line is dependent on the orientation of the line.
We can observe that the effective spacing between pixels for the 45°
line is greater than for the vertical and horizontal lines. This will make
the vertical and horizontal lines appear brighter than the 45° line.
Complex calculations are required to provide equal brightness along
lines of varying length and orientation.
2-2-1 Vector Generation/Digital Differential Analyzer (DDA) line

Algorithm
The DDA algorithm generates lines from their differential equations.

We calculate the length of the line in the X direction (number of pointes)
by the equation:
ABS (x2-x1)
And calculate the length of the line in the Y direction (number of pointes)
by the Equation:
ABS (y2-y1)
Where ABS is a function takes the positive of the arguments.
The increment steps (Δ𝑥 and Δ𝑦) are used to increment the x and y
coordinates for the next pointes to be plotted
Δ𝑥 = (𝑥2 − 𝑥1)/𝑙𝑒𝑛𝑔𝑡ℎ , Δ𝑦 = (𝑦2 − 𝑦1)/𝑙𝑒𝑛𝑔𝑡ℎ
Algorithm DDA
1. Read the line end points (𝑥1, y1) and (𝑥2, y2) such that they are not
equal. [If equal then plot that point and exit]
2. Δ𝑥 = |𝑥2 − 𝑥1| and Δ𝑦 = |𝑦2 − 𝑦1|
3. If (Δ𝑥 ≥ Δ𝑦) 𝑡ℎ𝑒𝑛
Length=Δ𝑥
Else
Length=Δ𝑦
End if
4. Δ𝑥 = (𝑥2 − 𝑥1)/𝑙𝑒𝑛𝑔𝑡ℎ
Δ𝑦 = (𝑦2 − 𝑦1)/𝑙𝑒𝑛𝑔𝑡ℎ
[This makes either Δ𝑥 or Δ𝑦 equal to 1 because length is either 𝑥2 − 𝑥1
or 𝑦2− 𝑦1 .Therefore, the incremental value for either x or y is one.]
5. 𝑥 = 𝑥1 + 0.5 sign (Δ𝑥)

𝑌 = 𝑦1 + 0.5 sign (Δ𝑦)
[Here, sign function makes the algorithm work in all quadrants. It
returns -1, 0, 1 depending on whether its argument is <0, =0, >0,
respectively.]
6 . i=1
[begins the loop, in this points are plotted]
While ( i ≤ length)
Begin
Plot (integer (x), integer (y))
𝑥 = 𝑥 + Δ𝑥
𝑦 = 𝑦 + Δ𝑦
𝑖=𝑖+1
End.
Stop
Note :
1- Sign function returns : -1 if its argument is < 0
: 0 if its arguments is = 0
: +1 if its arguments is > 0
Ex. Sign(-10) = -1 , Sign (5) = 1
Using the Sign function makes the algorithm work in all quadrants.
Example 2.1: consider the line from (0,0) to (6,6). Use the simple DDA
algorithm to rasterize this line
Solution:
x1=0 , y1=0 , x2=6 , y2=6

Length = 𝑦2− 𝑦1 = 𝑥2 − 𝑥1 =6
Δ𝑥 = (𝑥2 − 𝑥1)/𝑙𝑒𝑛𝑔𝑡ℎ
= 6/6 = 1 and
=6/6 = 1
Initial value for
𝑥 = 0 + 0.5 (1) =0.5
𝑌 = 0 + 0.5 (1) = 0.5
i plot x y
0.5 0.5
1 (0,0)
1.5 1.5
2 (1,1)
2.5 2.5
3 (2,2)
3.5 3.5
4 (3,3)
4.5 4.5
5 (4,4)
5.5 5.5
6 (5,5)
6.5 6.5
The results are plotted as shown
Example 2.2: consider the line from (23,33) to (29,40) Use the simple
DDA algorithm to rasterize this line
Solution:
x1=23 , y1=33 , x2=29 , y2=40

Δ𝑥 = 𝑥2 − 𝑥1 =6
Length = 𝑦2− 𝑦1=7
Δ𝑥 = (𝑥2 − 𝑥1)/𝑙𝑒𝑛𝑔𝑡ℎ
= 6/7 = 0.85 and
=7/7 = 1
Initial value for
𝑥 = 23 + 0.5 (0.8) =23.5
𝑌 = 33 + 0.5 (1) = 33.5
i x y Plot(x,y)
1. 23.5 33.5 (23,33)
2. 24.3 34.5 (24,34)
3. 25.1 35.5 (25,35)
4. 25.9 36.5 (25, 36)
5. 26.7 37.5 (26, 37)
6. 27.5 38.5 (27, 38)
7. 28.3 39.5 (28, 39)
Example 2.3: consider the line from (0,0) to (4,6). Use the simple DDA
algorithm to rasterize this line
Solution:
x1=0 , y1=0 , x2=4, y2=6

Length = y2− y1 =6
Δ𝑥 = (x2 − x1)/ length = 4/6 and
Δy = (y2 − y1)/ length =6/6 = 1
Initial value for

𝑥 = 0+ 0.5 (4.6)=0.5
𝑌 = 0 + 0.5 (1) = 0.5
Advantages of DDA Algorithm
1. It is the simplest algorithm and it does not require special skills for
implementation.
2. It is a faster method for calculating pixel positions than the direct use of
equation y = mx + b. It eliminates the multiplication in the equation by
making use of raster characteristics, so that appropriate increments are
applied in the x or y direction to find the pixel positions along the line path.
Disadvantages of DDA Algorithm
1. Floating point arithmetic in DDA algorithm is still time-consuming.

2. The algorithm is orientation dependent. So the end point accuracy is
poor.
3. This algorithm assumes the width of line to be zeros.
2-2-2 Bresenham’s Line Algorithm

The basic principle of Bresenham's line algorithm is to select the optimum
raster locations to represent a straight line. To accomplish this algorithm
always increments either x or y by one unit depending on the slope of line. The
increment in the other variable is determined by examining the distance
between the actual line location and the nearest pixel. This distance is called
decision variable or the error. This is illustrated in the Figure below.
Figure (2.2)
As shown in the Fig2.2, the line does not pass through all raster points (pixels).
It passes through raster point (0, 0) and subsequently crosses three pixels. It is
seen that the intercept of line with the line x = 1 is closer to the line y = 0, i.e.
pixel (1, 0) than to the line y = 1 i.e. pixel (1, 1). Hence, in this case, the raster
point at (1, 0) better represents the path of the line than that at (1, 1). The
intercept of the line with the line x = 2 is close to the line y = 1, i.e. pixel (2, 1)
than to the line y = 0, i.e.: pixel (2, 0).
Hence, the raster point at (2, 1) better represents the path of the line, as shown
in the Fig.2.2.
In mathematical terms error or decision variable is defined as
OR
Let us define . Now if e > 0, then it implies that ) i.e.,

the pixel above the line is closer to the true line. If (i.e. e < 0) then
we can say that the pixel below the line is closer to the true line. Thus by
checking only the sign of error term it is possible to determine the better pixel
to represent the line path.
The error is initially set as
Where
, and
Then according to value of e following actions are taken.
While ( )
{
y=y+1
x=x+1
When , error is initialized with . This is continued until

error is negative. In each iteration y is increment by 1. When e<0, error is
initialized to . In both the cases x is incremented by 1. Let us see
the Bresenham’s line drawing algorithm.
Bresenham's Line Algorithm

1. Read the line end points (x1, y1) and (x2 , y2) such that they are not
equal.
[If equal, then plot that point and exit]
2. And
3. [Initialize starting point]

x=x1
y=y1
4.
[Initialize value of decision variable or error to compensate for non
zero intercepts]
5. i=1
[Initialize counter]
6. Plot (x,y)
7. While ( )
{
y=y+1
}
x=x+1
8. i=i+1
9. If (i≤ ) then go to step 6
10. Stop
Example2.2:- Consider the line from (5, 5) to (13, 9), use the Bresenham's
algorithm to rasterize the line.
Solution: Evaluating steps 1 through 4 in the Bresenham's algorithm we

have,
𝚫x = ∣13-5∣=8
𝚫y = l9-5∣=4
x=5 , y=5.
= 2*4-8 =0
Tabulating the results of each iteration in the step 5 through 10
i plot x y e
5 5 0
1 (5,5) 6 6 -16
-8
2 (6,6) 7 6 0
3 (7,6) 8 7 -16
-8
4 (8,7) 9 7 0
5 (9,7) 10 8 -16
-8
6 (10,8) 11 8 0
7 (11,8) 12 9 -16
-8
8 (12,9) 13 9 0
9 (13,9) 14 10 -16
-8
The results are plotted as shown in Fig.2.3
The Bresenham’s algorithm only works for the first octant. The
generalized Bresenhm’s algorithm requires modification for lines lying in
the other octants. Such algorithm can be easily developed by considering
the quadrant in which the line lies and it slope. When the absolute
magnitude of the slope of the line is greater than 1, y is incremented by
one and Bresenham’s decision variable or error is used to determine when
to increment x. The x and y incremental vales depend on the quadrant in
which the line exists. This is illustrated in Fig 2.4.
Fig. 2.4. Conditions for Generalized Bresenham's algorithm
Generalized Bresenham's Algorithm
1. Read the line end points (x1, y1) and (x2, y2) such that they are not
equal.
[If equal then plot that point and exit]
2. and
3. [Initialize starting point]

x=x1
y=y1
4. )
)
5. If then
Begin
T= : = : =T : Interchange=1
End
Else
Interchange =0
End If
6.
[Initialize value of decision variable or error to compensate for non
zero intercepts]
7. i=1
[initialize counter ]
8. Plot (x,y)
9. While ( )
Begin
If (Interchange=1) Then x=x + s1
Else y= y + s2
End If
End while
10. If (Interchange=1), Then y=y + s2

Else x=x + s1
End If
e = e+ 2
11. i=i+1
12. if (i≤ ) then go to step 8
13. Stop
Example 2.3 : Draw the line from (0,0) to (-8,-4) using General
Bresenham algorithm
Solution : X=0 ; Y=0 ; ΔX=8 ; ΔY=4 ; S1=-1 ; S2=-1
Because ΔX>ΔY then Interchange=0 ; E=0
I Plot E x y
0 0 0
1 (0,0)
-16 0 -1
-8 -1 -1
2 (-1,-1)
0 -2 -1
3 (-2,-1)
-16 -2 -2
-8 -3 -2
4 (-3,-2)
0 -4 -2
5 (-4,-2)
-16 -4 -3
-8 -5
6 (-5,-3)
0 -6 -3
7 (-6,-3)
-16 -6 -4
-8 -7 -4
8 (-7,-4)
0 -8 -4
‫‪Part two‬‬
‫‪Circle ,Ellipse‬‬
‫‪Drawing‬‬
‫‪Algorithms‬‬
‫‪12‬‬ ‫قسم علوم الحاسبات ( ‪(2019-2020‬‬ ‫مدرسة المادة ‪ -:‬د‪ .‬فرح قيس عبد هللا‬
2-1 Circle –Generation Algorithms
Since the circle is a frequently used component in pictures and -graphs, a

procedure for generating either full circles or circular arcs is included in
most graphics packages.
A circle is define as the set of points that are all at a given distance r from
center position . This distance relationship is expressed by the
Cartesian coordinates as:
+ = Circle equation
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 - r) to
+ r) and calculating the corresponding values at each position as:
) Eq.1
The disadvantages of these methods are
Firstly, the resulting circle has large gaps; the spacing between plotted
pixel positions is not uniform.
Secondly, the calculations are not very efficient
◦ The square (multiply) operations
◦ this approach is involves considerable computation at each

step
This method is not the best method to generating a circle; therefore we

need a more efficient, more accurate solution
1- A Simple Circle Drawing Algorithm
: integer
For x= :
Begin
Plot(x,y )
Plot(x,y )
End
2- Polar representation
Another way to eliminate the unequal spacing in the previous simple

method is to calculate points along the circular boundary using polar
coordinates r with theta zero. Fig(2.5). Expressing the circle equation in
parametric polar from the equations
Where r: radius of circle : coordinate of circle center
The following algorithm for drawing circle centered at ( by

using the above method
Polar algorithm
(xc, yc) =center of the circle (integer);
r is the radius of the circle (integer);
r=30;
1- t = 0 : 1/r : 2*pi;
2- x = r * cos(t) + xc;
3- y = r * sin(t) + yc;
4- plot(x, y) ; grid Fig(2.5).
5- End
3-Eight-Way Symmetry
The first thing we can notice to make our circle drawing algorithm
more efficient is that circles centred at (0, 0 ) have eight-way
symmetry . If the point is (x,y)is on the circle , then we can trivially
compute seven other points on the circle , as shown in figure above.
Therfore, we need to compute only 45 segment to detrmine the circle
completely .
get point's symmetric complement about these lines by permuting the
indices :
{(x,-y), (-x,y), (-x,-y), (y,x), (y,-x), (-y,x),(-y,-x)}
Eight- way –symmetry circle Algorithm
(xc, yc ) =center of the circle( integer);
r=8;
th = 0 : 1/r : pi/4;
x = r * cos(th);
y = r * sin(th) ;
Plot (round( );
Plot (round( );
Plot (round( );
Plot (round( );
Plot (round( );
Plot (round( );
Plot (round( );
Plot (round( );
End
Bresenham's Circle Drawing Algorithm
The Bresenharn's circle drawing. Algorithm considers the eight-way

synmetry,of the circle to generated it. it ptot 1/8 part of the circle from
i.e. 90 to 45, s shown in the Fig2.6
As circle is drawn from 90 to 45, the x moves in positive x direction
and y moves in the negative direction. To achieve best approximate to
the true circle we we have to select those pixels in the raster that fall
the least distance from the true circle as in Fig 2.6.
Let us observe the 90 to 45 porition of the circle. It
can be noticed that the points are generated from 90
to 45 degree, each point closet to the true circle can
be found by applying either of the two options:
 Increment in positive x direction by one unit
or
 increment in positive x direction and negative y
direction both by one unit.
Fig 2.6: 1/8 part of circle
Fig.2.7:Scan conversion with Bresenham’s Algorithim.
Let us assume point P in Fig. 2.7 as a last scan converted pixel. Now we have two
options either to choose pixel A or pixel B. The closer pixel amongst these two can be
determined as follows:
The distances of pixels A and B from the origin are given as
Now, the distances of pixels A and B from the true circle are given as
However, to avoid square root term in derivation of decision variable, i.e. to simplify
the computation and to make algorithm more efficient the defined as
From Fig.2.7, we can observe that is always positive and always negative.
Therefore, we can define decision variable as
and we can say that if < 0 , i.e. then only x is incremented; otherwise x
is incremented in positive direction and y is incremented in negative direction. In
other words we can write,
For <0
For 0 and
Algorithm to plot 1/8 of the circle
1- Read the radius (r) of the circle.
2- d=3-2r
[Initialize the decision variable]
3- x=0 , y = r
[Initialize starting point ]
4- do
{
Plot (x, y)
If (d < 0) then
d=d+ 4x+6
}
Else
{ d=d+4(x-y) +10
y=y-1
}
x=x+1
} While (x < y)
5- stop
The remaining part of circle can be drawn by reflecting point about y-
axis, x-axis and about origin as shown in Fig-2.7.
Therefore, by adding seven more plot commands after the plot command
in the step4 of the algorithm, the circle can be plotted. The remaining
seven plot commands are:
Plot (y, x)
Plot (y, - x)
Plot (x, - y)
Plot (-x, - y)
Plot (- y, - x)
Plot (- y, x) and
Plot (- x, y)
Example 2.4 :
1- Draw a circle with R=4?
2-5 Ellipse Drawing 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 . If the
distances to the two foci from any point P = (x,y) on the ellipse are
labeled and , then the general equation of an ellipse can be stated as
+ = + = constant
Ellipse equations are greatly simplified if the major and minor axes are
oriented to align with the coordinate axes. In Fig.2.8, we show an ellipse
in "standard position" with major and minor axes oriented parallel to the
x and y-axes. Parameter for this example labels the semi major axis,
and parameter labels the semi minor axis. The equation of the ellipse
can be written in terms of the ellipse center coordinates and parameters

and as
( =1
Using polar coordinates r and θ,we can also describe the ellipse in standard position
with the parametric equations:
x= + cos θ
y= + sin θ
Fig.2.8:Ellipse centered at(xc,yc)with

semi-major axis rx and semi-minor axis ry)
To draw an ellipse using the following algorithm
1. START
2. Get the centre ( , ),x radius ( ) and y radius ( ) of the ellipse.
3. The polar co-ordinates on an ellipse are
x= + cos θ
y= + sin θ
4. Plot the point(x,y) corresponding to the values of θ where 0< = θ < =360
see Fig.(2.9)
5. STOP
Fig(2.9):Ellipse centered at(xc,yc)with semi-major axis rx and semi-

minor axis ry)
2-6 Curve –Generation Algorithms

A curve is an infinitely large set of points. The points in a curve have
a property that any point has two neighbors, except for a small number
of points that have one neighbor (these are the endpoints). Commonly
encountered curves include conics, polynomials, spline function.
Some curves have no endpoints, either because they are infinite (like a
line) or they are closed (loop around and connect to them).
Display of these curves can be generated with methods similar to
those discussed for the circle and ellipse functions.
A- Circle Curve Generation
To draw a circular curve starting at (start_angle) and ending at

(end_angle) we can implement the following procedure:
i.e. we can consider (pi/4)as a start_angle and (3*pi/4) as end_angle
(xc, yc ) =center of the circle( integer);
r=30;
1- t = pi/4 : 1/r : 3*pi/4;
2- x = r * cos(t) + xc;
3- y = r * sin(t) + yc;
4- plot(x, y) ;
5- End
Fig(2.10): Arc of circle plotted with polar

representation method
B- Elliptical Curve Generation

To draw an Elliptical curve starting at (start_angle) and ending at
(end_angle) we can implement the following procedure:
i.e. we can consider (pi/4)as a start_angle and (3*pi/4) as end_angle

(xc, yc ) =center of the ellipse( integer);
t = pi/4 : 1/30 : 3*pi/4;
x= * cos(t) + xc;
3- y = * sin(t) + yc;
4- plot(x, y) ;
5- End
Fig(2.11): Arc of Ellipse circle plotted

with polar representation method

Graphics Output Primitive ch2-2021

Uploaded by

Document Information

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

Graphics Output Primitive ch2-2021

Uploaded by

Copyright:

Available Formats

Chapter Two

Point is the fundamental element of the picture representation. It is

Equating the above equations gives,

Therefore, the point is the point of

2-2 Line Drawing Algorithms

Let us see the different lines drawn in fig bellow,

2-2-1 Vector Generation/Digital Differential Analyzer (DDA) line

The DDA algorithm generates lines from their differential equations.

Δ𝑥 = (𝑥2 − 𝑥1)/𝑙𝑒𝑛𝑔𝑡ℎ , Δ𝑦 = (𝑦2 − 𝑦1)/𝑙𝑒𝑛𝑔𝑡ℎ

2. Δ𝑥 = |𝑥2 − 𝑥1| and Δ𝑦 = |𝑦2 − 𝑦1|

3. If (Δ𝑥 ≥ Δ𝑦) 𝑡ℎ𝑒𝑛

5. 𝑥 = 𝑥1 + 0.5 sign (Δ𝑥)

Ex. Sign(-10) = -1 , Sign (5) = 1

x1=0 , y1=0 , x2=6 , y2=6

The results are plotted as shown

x1=23 , y1=33 , x2=29 , y2=40

x1=0 , y1=0 , x2=4, y2=6

Initial value for

Disadvantages of DDA Algorithm

1. Floating point arithmetic in DDA algorithm is still time-consuming.

2-2-2 Bresenham’s Line Algorithm

In mathematical terms error or decision variable is defined as

Let us define . Now if e > 0, then it implies that ) i.e.,

When , error is initialized with . This is continued until

Bresenham's Line Algorithm

3. [Initialize starting point]

Solution: Evaluating steps 1 through 4 in the Bresenham's algorithm we

Tabulating the results of each iteration in the step 5 through 10

The results are plotted as shown in Fig.2.3

Generalized Bresenham's Algorithm

3. [Initialize starting point]

10. If (Interchange=1), Then y=y + s2

Solution : X=0 ; Y=0 ; ΔX=8 ; ΔY=4 ; S1=-1 ; S2=-1

Because ΔX>ΔY then Interchange=0 ; E=0

Since the circle is a frequently used component in pictures and -graphs, a

We could use this equation to calculate the position of points on a circle

The disadvantages of these methods are

Secondly, the calculations are not very efficient

◦ The square (multiply) operations

◦ this approach is involves considerable computation at each

This method is not the best method to generating a circle; therefore we

Another way to eliminate the unequal spacing in the previous simple

Where r: radius of circle : coordinate of circle center

The following algorithm for drawing circle centered at ( by

Bresenham's Circle Drawing Algorithm

The Bresenharn's circle drawing. Algorithm considers the eight-way

Fig.2.7:Scan conversion with Bresenham’s Algorithim.

1- Draw a circle with R=4?

can be written in terms of the ellipse center coordinates and parameters

Fig.2.8:Ellipse centered at(xc,yc)with

Fig(2.9):Ellipse centered at(xc,yc)with semi-major axis rx and semi-

2-6 Curve –Generation Algorithms

A- Circle Curve Generation

To draw a circular curve starting at (start_angle) and ending at

Fig(2.10): Arc of circle plotted with polar

B- Elliptical Curve Generation

i.e. we can consider (pi/4)as a start_angle and (3*pi/4) as end_angle

Fig(2.11): Arc of Ellipse circle plotted

You might also like