CHAPTER -2

GRAPHICS PRIMITIVES

1
 INTRODUCTION
 In graphics, primitives are the basic geometric structures (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.

 In order to draw the primitive objects, one has to first scan convert the object.

 Scan convert: Refers to he operation of finding out the location of pixels to

the intensified and then setting the values of corresponding bits, in the graphic
memory, to the desired intensity code
2
 LINE DRAWING
 Many computer-generated pictures are composed of straight-line segments.

 A line segment is displayed by turning on a set of adjacent pixels.

 To draw a line, you need two points between which you can draw a line.

 The line drawing routine should be accurate, fast, and easy to implement.

 The Cartesian slope-intercept equation for a straight line is

where m is the slope of the line
y=mx+c
and c is the y-intercept
3
Cont’d …

4
 Cont’d…
 Let (, ) and (, ) be the two end point of a line segment then we can calculate m and c as
follows:
m== and C= -m

 For any given x interval along a line ,we can compute the corresponding y

interval as follows:

=m
 For any given y interval along a line ,we can compute the corresponding x

interval as follows:
5

=
 Line Drawing Algorithm
 A line drawing algorithm is a graphical algorithm for approximating a line segment
on discrete graphical media.

 On discrete media, such as pixel-based displays and printers, line drawing requires
such an approximation (in nontrivial cases)

 There are two commonly used line drawings algorithms

1. Digital Differential Analyzer (DDA)

2. Bresenham’s line drawing algorithm

6
 Digital Differential Analyzer (DDA)
 Digital Differential Analyzer (DDA) algorithm is the simple line generation
algorithm which is explained step by step here.
 Step 1: Get the input of two end points (X0, Y0) and (X1, Y1).
 Step 2: Calculate the difference between two end points.
dx = X1 - X0
dy = Y1 - Y0
 Step 3: Based on the calculated difference in step-2, you need to identify the
number of steps to put pixel. If dx > dy, then you need more steps in x coordinate;
otherwise in y coordinate. if(absolute(dx) >
absolute(dy))
steps = absolute(dx);
else 7

steps = absolute(dy);
 Cont’d …
 N.B: step is the total number of pixels required for a line.
 Step 4: Calculate the increment in x coordinate and y coordinate.
Xincrement = dx / (float) steps
Yincrement = dy / (float) steps

 Step 5: Put the pixel by successfully incrementing x and y coordinates

accordingly and complete the drawing of the line.
for( int v=0; v < steps; v++)
{
x = x + Xincrement;
y = y + Yincrement;
putpixel(x,y); }

 Step 6: Finish
 N.B: The round(x) function rounds x to the next integer if the value after decimal
8

is greater than or equal to 0.5 .

 Cont’d …
 Or we can use the following steps to generate the points using DDA Algorithm involves the
following steps- (X0, Y0) to (Xn, Yn)
 Step-1: Calculate ΔX, ΔY and M from the given input.
 These parameters are calculated as-
• ΔX = Xn – X0
• ΔY =Yn – Y0
• M = ΔY / ΔX
 Step-2: Find the number of steps or points in between the starting and ending coordinates.
 if (absolute (ΔX) > absolute (ΔY))
Steps = absolute (ΔX);
 else
Steps = absolute (ΔY);
9
 Cont’d …
 Step-3: Suppose the current point is (Xp, Yp) and the next point is (Xp+1, Yp+1).
 Find the next point by following the below three cases-
1) If M<1,then Xp+1=round off(1+ Xp), Yp+1 = round off(M+ Yp)
2) If M=1, then Xp+1=round off(1+ Xp), Yp+1 = round off(1+ Yp)
3) If M>1, then Xp+1=round off(1/M + Xp), Yp+1 = round off(1+ Yp)
 Step-4: Keep repeating Step-3 until the end point is reached or the number of generated new
points (including the starting and ending points) equals to the steps count.

10
 Cont’d …
 Example: Using DDA line drawing algorithm, generate the points between the end points (5, 6)
and (8, 12).
 Step-1: Calculate ΔX, ΔY and M from the given input. ΔX = Xn – X0 = 8 – 5 = 3, ΔY =Yn – Y0 = 12 – 6 = 6
• M = ΔY / ΔX = 6 / 3 = 2
 Step-2: Calculate the number of steps. As |ΔX| < |ΔY| = 3 < 6, so number of steps = ΔY = 6
 Step-3: As M > 1, so case-03 is satisfied. Now, Step-03 is executed until Step-04 is satisfied.

Xp Yp Xp+1 Yp+1 Round off (Xp+1, Yp+1)

5 6 5.5 7 (6, 7)
6 8 (6, 8)
6.5 9 (7, 9)
7 10 (7, 10)
7.5 11 (8, 11)
8 12 (8, 12) 11
 cont’d …
 Drawback of DDA Algorithm:

 Use of floating point calculation so line is not smooth

 An algorithm based on integer type calculations is likely to be more

efficient

12
 Bresenham’s Line Drawing Algorithm
 Bresenham's algorithm finds the closest integer coordinates to the actual line, using only
integer math.

 Assuming that the slope is positive and less than 1, moving 1 step in the x direction, y either
stays the same, or increases by 1.

 A decision function is required to resolve this choice.

d1 = y – yi

= m * (xi+1)+b – yi

d2 = yi + 1 – y

= yi + 1 – m ( x i + 1 ) – b 13
 Bresenham’s Line Drawing Algorithm
 For m > 1, find out whether you need to increment x while incrementing y each time.
 After solving, the equation for decision parameter pi will be very similar, just the x
 and y in the equation gets interchanged.
 For Example this point: (x1,y1) to (x2,y2)
 First find : dx = abs(x2 - x1)
dy = abs(y2 -y1)
m=dy/dx
 If m>1, x and y in the equation gets interchanged.
 dx, dy = dy, dx
x, y = y, x
x1, y1 = y1, x1 14

x2, y2 = y2, x2
 Cont’d …
pi = dx (d1-d2)
• Let us substitute, m=dy/dx
pi = dx (2m * (xi+1) + 2b – 2yi –1 )
pi = 2dy (xi+1) – 2dx yi + dx (2b–1 )
pi = 2 dy xi – 2 dx yi + k
where k = 2 dy + dx (2b-1)
 Then we can calculate pi+1 in terms of pi without any x i , yi or k .
pi+1 = 2 dy xi+1 – 2 dx yi+1 + k
pi+1 = 2 dy (xi + 1) – 2 dx yi+1 + k since xi+1= xi + 1
pi+1 = 2 dy xi + 2 dy- 2 dx yi+1 + k
 Now subtracting (ii) from (iii), we get • Where, yi+1 – yi is either 0 or 1
depending on the sign of pi
pi+1 – pi = 2 dy – 2 dx (yi+1 – yi )
15

p = p + 2 dy – 2 dx (y –y )
 Cont’d …
 If the next point is: (xi+1,yi) then • Where, yi+1 – yi is either 0 or 1
d1 < d2 => d1 – d2<0 depending on the sign of pi
=> pi<0
=> pi+1 = pi + 2 dy
 If the next point is: (xi+1,yi+1) then
d1>d2 => d1 – d2>0
=> pi>0
=> pi+1= pi + 2 dy – 2 dx

 The pi is our decision variable, and calculated using integer arithmetic from pre-computed constants and its

previous value.

 Now a question is remaining; i.e. how to calculate initial value of pi?

16

 For that, we use equation (i) and put values (x1, y1)
 Cont’d …
pi = 2 dy (x1+1) – 2 dx y1 + dx (2b – 1)
where b = y – m x implies that
pi = 2 dy x1 +2 dy – 2 dx y1 + dx ( 2 (y1 – mx1) – 1)
pi = 2 dy x1 + 2 dy – 2 dx y1 + 2 dx y1 – 2 dy x1 – dx
pi = 2 dy x1 + 2 dy – 2 dx y1 + 2 dx y1 – 2 dy x1 – dx
 There are certain figures that will cancel each other (shown in pairs of different
colour)

Pi = 2 dy - dx

17
 Bresenham ’s Line Drawing Algorithm Steps

 Now, keeping in mind all the above points and calculations, here is the Bresenham algorithm for slope
m < 1:
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 dy , dx , 2dy, and (2dy- 2dx) and get the first value for the decision parameter
as:
P0 = 2dy– dx
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 dy
Otherwise, the next point to plot is (xk+1, yk+1) and
pk+1 = pk + 2dy– 2dx 18

5. Repeat step 4 (dx) times

 Bresenham’s Line Drawing Example
 To illustrate the algorithm, we digitize the line with endpoints(20,10) and (30, 18).

 This line has a slope of 0.8, with

dx =10, dy = 8

 The initial decision parameter has the value P0 = 2dy– dx = 6

 And the increments for calculation successive decision parameters are:

2dy = 16,
2dy– 2dx = – 4

 We plot the initial point (20, 10) , and determine successive pixel positions along the
19

line path from the decision parameters as:

Bresenham’s Line Drawing Example …

20
Cont’d …

21
 Cont’d …
 Advantage Bresenham’s line Drawing Algorithm:
 It involves only integer arithmetic, so it is simple.

 It avoids the generation of duplicate points.

 It can be implemented using hardware because it does not use multiplication and division.

 It is faster as compared to DDA (Digital Differential Analyzer) because it does not

involve floating point calculations like DDA Algorithm.
 Disadvantage Bresenham’s line Drawing Algorithm :
 This algorithm is meant for basic line drawing only Initializing is not a part of
Bresenham's line algorithm.
 So to draw smooth lines, you should want to look into a different algorithm.
22
 Circle Drawing

 Since the circle is a frequently used component in pictures and graphs, a procedure for
generating either full circles or circular arc is included in most graphics packages.

Direct Algorithm

 The equation for a circle is: x2 + y2 = r2

 Where r is the radius of the circle.

 So, we can write a direct circle drawing algorithm by solving the equation for y at unit x
intervals using: y = (r2 – x2)1/2

23
 Symmetry of Circles in Plotting
 We can improve the efficiency of any circle-drawing algorithm by taking advantage of
the symmetry of circles.

 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

 we can generate a point reflected in the y-axis by negating the x-coordinate;

 we can generate a point reflected in the x-axis by negating the y-coordinate

24
Eight-way symmetry

Quadrant 1:- (x, y) and (y, x)

Quadrant 2:- (-x, y) and (-y, x)
Quadrant 3:- (-x, -y) and (-y, -
x)
Quadrant 4:- (x, -y) and (y, -x)

25
 Midpoint Circle-Drawing Algorithm
 The midpoint algorithm takes advantage of the symmetry property of circles to produce a
more efficient algorithm for drawing circles.

 The algorithm works in a similar way to Bresenham’s line-drawing algorithm,

 In that it formulates a decision variable that can be computed using integer operations only.

 Midpoint algorithm would work with slight modifications whichever octant we chose.

 Notice that in this octant, when we move from one pixel to try to draw the next pixel there
is only a choice of two pixels: A and B, or (xk+1, yk) and (xk+1, yk-1).

26
 Cont’d …
 Therefore we don’t need to calculate a real-valued coordinate and then round to the
nearest pixel
 we just need to make a decision as to which of the two pixels to choose.

 We start by defining a function fcirc as follows:

fcirc(x,y)= + -
27
 Cont’d…
 Based on the result of this function, we can determine the position of any point relative to the
circle boundary:
 For points on circle, fcirc= 0
 For points inside circle, fcirc< 0
 For points outside circle, fcirc> 0

 Now referring again to the figure eight way symmetry of the circle, we note that the position of
the midpoint of the two pixels A and B can be written as:

= (xk+1, yk-0.5)

 Now we can see from the figure eight way symmetry of the circle that if the midpoint lies inside
the circle boundary the next pixel to be plotted should be pixel A.
28
 Otherwise it should be pixel B.
 Cont’d …
 Therefore we can use the value of fcirc() to make the decision between the two candidate pixels:
 If fcirc() < 0, choose A
 Otherwise choose B
 In order to make this decision quickly and efficiently, we define a decision variable pk, by combining

pk = fcirc(xk+1, yk-0.5) = + -
 An incremental calculation for pk+1 can be derived by subtracting pk from pk+1 and
simplifying – the result is:

Pk+1 = pk + 2xk+1 +1, if pk < 0

Pk+1 = pk + 2xk+1 +1 - 2yk+1 , if pk > 0

 The initial value of the decision variable, p0, is calculated by evaluating it at the starting point (0,r):

p0 = fcirc( 1, r - 0.5) = + - = - r
 If r is an integer, then all increments are integers and we can round to the nearest integer: 29
 Cont’d …
 To summarise, we can express the midpoint circle-drawing algorithm for a circle centred at
the origin as follows:
1. Plot the start-point of the circle (x0,y0) = (0,r)
2. Compute the first decision variable: 4. If the given center point (X0, Y0) is not (0, 0), then
 p0 = 1 – r
3. For each k, starting with k=0: Suppose the do the following and plot the point-
current point is (Xk, Yk) and the next point is Xplot = Xc + X0
•
(Xk+1, Yk+1).
 If pk < 0: • Yplot = Yc + Y0
• (Xk+1, Yk+1) is respectively (xk+1, yk)
• Here, (Xc, Yc) denotes the current value of X
• Pk+1 = pk + 2xk+1 +1
 Else pk > 0 : and Y coordinates.
• (Xk+1, Yk+1) is respectively (xk+1, yk -1) 5. Repeat step 3 and step 4 until X > Y
• Pk+1 = pk + 2xk+1 +1 - 2yk+1

30
 Example-1
 For example, given a circle of radius r=10, centered at the origin, use midpoint circle-drawing
algorithm.
 The steps are:
 First, Plot the start-point of the circle (x0, y0) = (0,r)=(0,10)
 Compute the initial decision variable:
p0 = 1 – r =>1-10 = -9
 Iteration 0:
 p0 < 0, so

 Plot (x1, y1) = (x0 +1, y0) = (1,10)

 P1 = p0 + 2x1 +1 = -9 +3= -6
 Iteration 1:
 p1 < 0, so
 Plot (x2, y2) = (x1+1, y1) = (2,10) 31

 P = p + 2x +1 = -6+5= -1
 Cont’d …
 Iteration 2:
 p2 < 0, so
 Iteration 5 :
 Plot (x3, y3) = (x2+1, y2) = (3,10)
 p5 > 0, so
 P3 = p2 + 2x3 +1 = -1 +7= 6
 Plot (x6, y6) = (x5+1, y5 -1) = (6,8)
 Iteration 3 :
 p3 > 0, so  P6=p5 + 2x6+1 – 2y6 = 8 + 12 +1 -16= 5
 Iteration 6 :
 Plot (x4, y4) = (x3+1, y3 -1) = (4,9)
 P4 = p3 + 2x4+1 – 2y4 = 6 + 8 +1 -18= -3  p6 > 0, so

 Iteration 4 :  Plot (x7, y7) = (x6+1, y6 -1) = (7,7)

 p4 < 0, so  P7= p6 + 2x7+1 – 2y7 = 5 + 14 +1 -14= 6

 Plot (x5, y5) = (x4+1, y4) = (5,9)

 P5= p4 + 2x5+1 = -3+10+1= 8 32
 Example-2

 Given the center point coordinates (4, 4) and radius as 10, generate all the points to form a
circle use midpoint circle-drawing algorithm .
 Given-Centre Coordinates of Circle (X0, Y0) = (4, 4)

 Radius of Circle = 10

 As stated in the algorithm, We first calculate the points assuming the center coordinates is (0, 0).

 At the end, we translate the circle.

 Step-1, Step-2 and Step-3 are already completed in Example 1.

 Now, we find the values of Xplot and Yplot using the formula given in Step-4 of the main algorithm.

 The following table shows the generation of points for Quadrant-1-

• Xplot = Xc + X0 = 4 + X0
33

• Yplot = Yc + Y0 = 4 + Y0
 Example-2

 The generation of points for Quadrant-1: (Xk+1, Yk+1) (Xplot, Yplot)

• Xplot = Xc + X0 = 4 + X0 (0, 10) (4, 14)
(1, 10) (5, 14)
• Yplot = Yc + Y0 = 4 + Y0
(2, 10) (6, 14)
(3, 10) (7, 14)
(X, Y)
(4, 9) (8, 13)
(5, 9) (9, 13)
(6, 8) (10, 12)
(7,7) (11,11)
(8, 6) (12, 10)
(9, 5) (13, 9)
(Y, X) (9, 4) (13, 8)
(10, 3) (14, 7)
(10, 2) (14, 6)
(10, 1) (14, 5)
(10, 0) (14, 4) 34
 Cont’d …
 Advantages of Mid Point Circle Drawing Algorithm:
 It is a powerful and efficient algorithm.
 The entire algorithm is based on the simple equation of circle X 2 + Y2 = R2.
 It is easy to implement from the programmer’s perspective.
 This algorithm is used to generate curves on raster displays.
 Disadvantages of Mid Point Circle Drawing Algorithm:
 Accuracy of the generating points is an issue in this algorithm.

 The circle generated by this algorithm is not smooth.

 This algorithm is time consuming.

35
 Bresenham Circle-Drawing Algorithm
 Given the center point and radius of circle,
 Bresenham Circle Drawing Algorithm attempts to generate the points of one octant.
 The points for other octants are generated using the eight symmetry property.
 Given- Centre point of Circle = (X0, Y0), Radius of Circle = R
 The points generation using Bresenham Circle Drawing Algorithm involves the following steps-
1: Assign the starting point coordinates (X0, Y0) as-
• X0 = 0
• Y0 = R
2: Calculate the value of initial decision parameter P0 as-
• P0 = 3 – 2R

36
 Bresenham Circle-Drawing Algorithm
3: Suppose the current point is (Xk, Yk) and the next point is (Xk+1, Yk+1).
Find the next point of the first octant depending on the value of decision parameter Pk.
 If pk < 0:
• (Xk+1, Yk+1) is respectively (xk+1, yk)
• Pk+1 = pk + 4xk+1 +6
 Otherwise:
• (Xk+1, Yk+1) is respectively (xk+1, yk -1)
• Pk+1 = pk + 4(xk+1 - yk+1)+10
4: If the given center point (X0, Y0) is not (0, 0), then do the following and plot the point-
• Xplot = Xc + X0
• Yplot = Yc + Y0
• Here, (Xc, Yc) denotes the current value of X and Y coordinates. 37
 Example-1
 Given the center point coordinates (0, 0) and radius as 8, generate all the points to form a circle. Use
Bresenham Circle-Drawing algorithm.
 Given- Centre Coordinates of Circle (X0, Y0) = (0, 0), Radius of Circle = 8
Step-1: Assign the starting point coordinates (X0, Y0) as- X0 = 0, Y0 = R = 8 Pk+1 (Xk+1, Yk+1)

Step-2: Calculate the value of initial decision parameter P0 as- -13 (0, 8)
-3 (1, 8)
 P0 = 3 – 2R, P0 = 3 – 2 x 8, P0 = -13
11 (2, 8)
Step-3: As Pinitial < 0, so case-1 is satisfied.
5 (3, 7)
• Xk+1 = Xk + 1 = 0 + 1 = 1
7 (4, 6)
• Yk+1 = Yk = 8
(5, 5)
• Pk+1 = Pk + 4 x Xk+1 + 6 = -13 + (4 x 1) + 6 = -3
Step-4: This step is not applicable here as the given center point coordinates is (0, 0).
Step-5: Step-3 is executed similarly until Xk+1 >= Yk+1 as follows-
38
 Cont’d …
 Advantages of Bresenham Circle Drawing Algorithm:
 The entire algorithm is based on the simple equation of circle X 2 + Y2 = R2.
 It is easy to implement.
 Disadvantages of Bresenham Circle Drawing Algorithm:
 Like Mid Point Algorithm, Accuracy of the generating points is an issue in this algorithm.

 This algorithm suffers when used to generate complex and high graphical images.

 There is no significant enhancement with respect to performance.

39
 Ellipse-Drawing Algorithms
 Some graphics packages may provide routines for drawing ellipses, although ellipses cannot be drawn as
efficiently as circles.

 The equation for a 2-D ellipse in Cartesian coordinates is:

+=1
 ellipses have two radius parameters: (major axis)and (minor axis).

40
 Cont’d…
 The most efficient algorithm for drawing ellipses is an adaptation of the midpoint algorithm for circle-
drawing.

 Recall that in the midpoint algorithm for circles we first had to define a term whose sign indicates whether a
point is inside or outside the circle boundary.

Two-Way Symmetry of Ellipses

41
 Midpoint Ellipse-Drawing Algorithm
 Midpoint ellipse algorithm plots(finds) points of an ellipse on the first quadrant by dividing the quadrant into
two regions.

 Each point(x, y) is then projected into other three quadrants (-x, y), (x, -y), (-x, -y) i.e. it uses 4-way
symmetry.
 Function of ellipse:
 fellipse(x, y)=ry2x2+rx2y2-rx2ry2
 fellipse(x, y)<0 then (x, y) is inside the
ellipse.
 fellipse(x, y)>0 then (x, y) is outside
the ellipse.
 fellipse(x, y)=0 then (x, y) is on the
ellipse.
42

Two-Way Symmetry of Ellipses

 Midpoint Ellipse-Drawing Algorithm
 Decision parameter:

 Initially, we have two decision parameters p10 in region 1 and p20 in region 2.

These parameters are defined as : p10 in region 1 is given as : p10=ry2+1/4rx2-rx2ry

 Mid-Point Ellipse Algorithm :

1. Take input radius along x-axis and y-axis and obtain center of ellipse.

2. Initially, we assume ellipse to be centered at origin and the first point as : (x, y0)= (0, ry).

3. Obtain the initial decision parameter for region 1 as: p10=ry2+1/4rx2-rx 2ry

4. For every xk position in region 1 :

 If p1k<0, then the next point along the is (xk+1, yk) and p1k+1=p1k+2ry2xk+1+ry2

 Else, the next point is (xk+1, yk-1) and p1k+1=p1k+2ry2xk+1 – 2rx2yk+1+ry2

43
 Cont.
 Mid-Point Ellipse Algorithm :
5. Obtain the initial value in region 2 using the last point (x0, y0) of region 1 as:

p20=ry2(x0+1/2)2+rx2 (y0-1)2-rx2ry2

6. At each yk in region 2 starting at k =0 perform the following task.

 If p2k>0 the next point is (xk, yk-1) and p2k+1=p2k-2rx2yk+1+rx2

 Else, the next point is (xk+1, yk-1) and p2k+1=p2k+2ry2xk+1 -2rx2yk+1+rx2

7. Now obtain the symmetric points in the three quadrants and plot the coordinate value as: x=x+xc, y=y+yc

8. Repeat the steps for region 1 until 2ry2x >=2rx2y

44
 Example-1

 Given the center point coordinates (0, 0) and major axis(r x)=8, minor axis(ry)=6, generate all the points to
form a ellipse. Using Midpoint Ellipse-Drawing algorithm.
 Solution: initial decision parameter, p01=-332

45
 Example-1

 The point (7,3) will be the initial point of Region 2: initial decision parameter, p02=-23

46
Example-1

47
T HANK YOU!
Q U E ST IO NS?
ANY

48