Chapter 4

Geometry and Line Generation

1
 outline

► Point and Lines, Bresenham’s Algorithm Generating Circles

► Plotting General Curves
► Line Thickness
►Line Style
► Polygons
►Filling
► Text and Characters

2
 Point

• A Point in geometry is defined as a location in the space that is

uniquely defined by an ordered triplet (x, y, z) in the 3-
Dimensions and by ordered pair (x, y) in the 2-Dimensions
• It is represented using the dot and is named using capital English
alphabets.

3
 Point

o The term pixel is a short form of the picture element. It is also

called a point or dot. It is the smallest picture unit accepted by
display devices.
o In general, a point p (x, y) is represented by the integer part of x
& the integer part of y that is pixels [(INT (x), INT (y).

4
 line
We can define a straight line with the help of the following equation.
y= mx + a Where, (x, y) = axis of the line.
m = Slope of the line.
a = Interception point
 There are two algorithmic rules that are followed while drawing a line on the screen. They are DDA
(Digital Differential Analyser) algorithmic rule and Bresenham line algorithm.
 Both the DDA and Bresenham's algorithm are examples of computational procedures that can be
utilised for the goal of approximating the length of a line segment.

5
 DDA (Digital Differential Analyser)

• The primary purpose of a DDA in computer graphics is to draw

lines, and it use real values while predicting the values of the
following pixel.
• It use multiplication and division in its calculating process.
• floating point is used in the calculation process
• It rounds floating numbers

6
 What is Bresenham’s Algorithm?

• Bresenham's method relies just on addition and subtraction to

complete its tasks.

• Integer point is used in the calculation process

7
 DDA Line Algorithm Bresenham line Algorithm

DDA stands for Digital Differential Analyzer. While it has no full form.

While it is more efficient than DDA

DDA algorithm is less efficient than Bresenham line algorithm.
algorithm.

While the calculation speed of

The calculation speed of DDA algorithm is less than Bresenham line algorithm. Bresenham line algorithm is faster than
DDA algorithm.

While Bresenham line algorithm is

DDA algorithm is costlier than Bresenham line algorithm.
cheaper than DDA algorithm.

DDA algorithm has less precision or accuracy. While it has more precision or accuracy.

While in this, the complexity of

In DDA algorithm, the complexity of calculation is more complex.
calculation is simple.

In DDA algorithm, optimization is not provided. While in this, optimization is provided.

8
 DDA (Digital Differential Analyzer) algorithm
DDA line drawing algorithm can be putpixel(ceil(x),ceil(y))
written as:- i=1
1. Input the two line end points (xa, 4. while (i<=length)
ya) and (xb, yb ) x=x+∆x
2. Calculate dx = xb – xa y=y+∆y
dy = yb - ya If(x<=xb and y<=yb)
3. If abs(dx)>=abs(dy) putpixel(ceil(x),ceil(y))
then Length= abs(dx) i=i+1
else Length= abs(dy) Else
∆x=dx/length break
∆y=dy/length end while
x=xa 5. Finish
y=ya 9
 example
Example: Consider a line from (2,3) to (6,6).
Use DDA algorithm to rasterize this line.
Solutions: Initializations:
(xa, ya) = (2,3) and (xb, yb ) = (6,6)
dx= xb-xa=6-2=4  dx=4
dy= yb-ya=6-3=3 dy=3
Since abs(dx)>=abs(dy),
length=abs(dx)=4 length=4
∆x=dx/length=4/4=1 ∆x=1
∆y=dy/length=3/4=0.75∆y=0.75
x=xa=2 x=2
y=ya=3 y=3

10
 Cont..
Plotting begins: For i=3
First pixel will be plotted at (2,3) x=x+∆x=4+1=5
For i=1 y=y+∆y=4.5+0.75=5.25
x=x+∆x=2+1=3 Next pixel will be plotted at (5,5.25)
y=y+∆y=3+0.75=3.75 =(5,6)
next pixel will be plotted at (3,3.75) For i=4
=(3,4) x=x+∆x=5+1=6
For i=2 y=y+∆y=5.25+0.75=6
x=x+∆x=3+1=4 Next pixel will be plotted at (6,6)
y=y+∆y=3.75+0.75=4.5
Next pixel will be plotted at (4,4.5) =(4,5)

11
 Algorithm of Bresenham’s Line Drawing
Step 1: consider Starting point as (x1, y1) and Case 1: If pk < 0
ending point (x2, y2). Then
Step 2: Now, we have to calculate ▲x and ▲y. pk+1 =pk +2▲y
▲x = x2-x1 xk+1 = xk +1
▲y = y2-y1 yk+1 = yk
m = ▲y/▲x
Step 3: calculate the decision parameter pk with Case 2: If pk >= 0
the formula. Then
pk = 2▲y-▲x pk+1 =pk +2▲y-2▲x
Step 4: Now, we are going to calculate two xk+1 =xk +1
cases for decision parameter pk
yk+1 =yk +1
Step 5: We will repeat step 4 until we found the
ending point of the line and the total number of
iterations =▲x.
12
• Example: A line has a starting point (9,18) and ending point (14,22). Apply the Bresenham’s Line
Drawing algorithm to plot a line.

• Solution: We have two coordinates,

Starting Point = (x1, y1) = (9,18)
Ending Point = (x2, y2) = (14,22)
Step 1: First, we calculate ▲x, ▲y.
▲x = x2 – x1 = 14-9 = 5
▲y = y2 – y1 = 22-18 = 4
Step 2: Now, we are going to calculate the decision parameter (pk)
pk = 2▲y-▲x = 2 x 4 – 5 = 3
The value of pk = 3
Step 3: Now, we will check both the cases.

13
 Cont..
If pk >= 0 Then Case 2 is satisfied.
Thus
pk+1 = pk +2▲y-2▲x =3+ (2 x 4) – (2 x 5) = 1
xk+1 =xk +1 = 9 + 1 = 10
yk+1 =yk +1 = 18 +1 = 19
Step 4: Now move to next step. We will calculate the coordinates until we
reach the end point of the line and the total number of iterations =▲x = 5

14
Case 1: If pk < 0 Case 2: If pk >= 0
Then Then
pk+1 =pk +2▲y pk+1 =pk +2▲y-2▲x
xk+1 = xk +1 xk+1 =xk +1
yk+1 = yk yk+1 =yk +1
15
Example: Bresenham Line Drawing

Example 6-1 Bresenham Line Drawing

16
Example: Bresenham Line Drawing (cont.)

17
Example: Bresenham Line Drawing (cont.)

Pixel positions along the line path between endpoints (20, 10) and (30, 18), plotted with Bresenham’s line
algorithm. 18
 OpenGL Point Drawing Primitives
• The most basic type of primitive is point. To draw point, we use the pair of functions

glBegin … glEnd, using the symbolic constant GL_POINTS to specify how the

vertices in between should be interpreted.

//glPointSize(2.0);
glBegin(GL_POINTS);
glVertex2i (50, 100);
glVertex2i (75, 150);
glVertex2i (100, 200);
glEnd();

19
 Exercise
• Write an OPENGL program which displays four points which have the following

characteristics?

Point 1 (35.5, 56.5), Point 2 (40, 70), Point 3 (45.5, 88), Point 4 (50, 102)

20
 OpenGL Line Functions
• To draw Line, we use the pair of functions glBegin … glEnd, using the symbolic constant GL_LINES
to specify how the vertices in between should be interpreted.
• glLineWidth(3.0);

• glBegin(GL_LINES);

glVertex2f(100.0, 200.0);
glVertex2f(150.0, 200.0);
glVertex2f(150.0, 250.0);
glVertex2f(200.0, 250.0);
• glEnd()

• will draw two separate line segments: one from (100,200) to (150,200) and one from (150,250) to
(200,250).
21
 Cont.
• Two other symbolic constants to draw slightly different types of straight-line
primitive are: GL_LINE_STRIP and GL_LINE_LOOP.
• The following example illustrates the difference between the three types of line
primitive.
• First we define 5 points as arrays of 2 Glint values. Next, we define exactly the same
vertices for each of the three types of line primitive. The images to the right show
how the vertices will be interpreted by each primitive.

Glint p1[ ] = {200,100}; Glint p2[ ] = {50,0}

Glint p3[ ] = {100,200}; Glint p4[ ] = {150,0}; Glint p5[ ] = {0,100};

22
 Cont.
• GL_LINES treats the vertices as pairs of end-points. A start-point with no end-point are ignored.
• glBegin(GL_LINES);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
glEnd();

23
 Cont.
• GL_LINE_STRIP create a connected polyline, in which each vertex is joined to the
one before it and after it. The first and last vertices are only joined to one other
vertex.
• glBegin(GL_LINE_STRIP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
• glEnd();
24
 circle

• The most important thing in drawing a circle is learning how the circle is drawn using
8-way symmetry. It is based on Mirror reflection. If we see Right hand in the mirror we
will see Left hand, Similarly if we see pixel (x,y) in mirror we will see (y,x). So point
P1(x,y) will become P2(y,x) after reflection.

25
 Circle using Bresenham’s Algorithm

• We cannot display a continuous arc on the raster display. Instead, we have to choose the
nearest pixel position to complete the arc.
• From the following illustration, you can see that we have put the pixel at X,Y location
and now need to decide where to put the next pixel − at N (X+1,Y) or at S( X+1,Y−1).
This can be decided by the decision parameter d.
If d <= 0, then N(X+1,Y) is to be chosen as next pixel.
If d > 0, then S(X+1,Y−1) is to be chosen as the next pixel.

26
Cont..

27
 Cont..
Bresenham's Circle Algorithm: putpixel (-x+p, y+q)
Step1: Start Algorithm putpixel (-x+p, -y+q)
Step2: Declare p, q, x, y, r, d variables putpixel (-y+p, -x+q)
p, q are coordinates of the center of the circle putpixel (y+p, -x+q)
r is the radius of the circle putpixel (x+p, -y-q)
Step3: Enter the value of r Step8: Find location of next pixels to be scanned
Step4: Calculate d = 3 - 2r If d < 0
Step5: Initialize x=0 and y= r then d = d + 4x + 6
Step6: Check if the whole circle is scan converted increment x = x + 1
If x > = y If d ≥ 0
Stop then d = d + 4 (x - y) + 10
Step7: Plot eight points by using concepts of eight-way increment x = x + 1
symmetry. The center is at (p, q). Current active pixel is (x, decrement y = y - 1
y). Step9: Go to step 6
putpixel (x+p, y+q) Step10: Stop Algorithm
putpixel (y+p, x+q)

putpixel (-y+p, x+q)

28
 Example
Example: Plot 6 points of circle using Bresenham
Algorithm. When radius of circle is 10 units. The circle Step4: Plot (3, 9) d is > 0 so x = x + 1, y = y - 1
has centre (50, 50). d = d + 4 (x-y) + 10 (∵ d > 0), case 2 is satisfied
Solution: Let r = 10 (Given) = 13 + 4 (3-9) + 10
Step1: Take initial point (0, 10) = 13 + 4 (-6) + 10
d = 3 - 2r = 23-24=-1
d = 3 - 2 * 10 = -17 Step5: Plot (4, 9)
d < 0 ∴ d = d + 4x + 6 d = -1 + 4x + 6, case 1 is satisfied
= -17 + 4 (0) + 6 = -1 + 4 (4) + 6
= -11 = 21
Step2: Plot (1, 10) Step6: Plot (5, 8)
d = d + 4x + 6 (∵ d < 0), case 1 is satisfied d = d + 4 (x-y) + 10 (∵ d > 0), case 1 is satisfied
= -11 + 4 (1) + 6 = 21 + 4 (5-8) + 10
= -1 = 21-12 + 10 = 19 case 1:If d < 0
Step3: Plot (2, 10) So P1 (0,10)⟹(50,60) then d = d + 4x + 6
d = d + 4x + 6 (∵ d < 0), case 1 is satisfied P2 (1,10)⟹(51,60) increment x = x + 1
= -1 + 4 x 2 + 6 P3 (2,10)⟹(52,60) case 2: If d ≥ 0
= 13 P4 (3,9)⟹(53,59) then d = d + 4 (x - y) + 10
P5 (4,9)⟹(54,59) increment x = x + 1
P6 (5,8)⟹(55,58)
decrement y = y - 1
29
Example: The radius of a circle is 8, and center point coordinates are (0, 0).
Apply bresenham’s circle drawing algorithm to plot all points of the circle.
Solution: d0 = -13
Step 1: The given stating points of the Step 4: The value of initial parameter d0 <0.
circle (x1, y1) = (0, 0)
So, case 1 is satisfied.
Radius of the circle (r) = 8 Thus, xk+1 =xk + 1 = 0 + 1 = 1
Step 2: Now, we will assign the starting
yk+1 =yk = 8
point (x1, y1) as follows-
dk+1 = dk + 4xk+1 + 6 = -13 + (4 x 1) + 6 = -3
x1 = 0
Step 5: The center coordinates are
y1 = r (radius) = 8
already (0,0) so we will move to next step.
Step 3: Now, we will calculate the initial case
Step 6: 1:If d < 0step 4 until we get x >= y.
Follow
decision parameter (d0) then d = d + 4x + 6
increment x = x + 1
d0 = 3 – 2 x r case 2: If d ≥ 0
d0 = 3 – 2 x 8 then d = d + 4 (x - y) + 10
increment x = x + 1
decrement y = y - 1 30
Cont..

31
Cont..

32
Cont..

33
 Cont.
Advantages
• It is a simple algorithm.
• It can be implemented easily
• It is totally based on the equation of circle i.e. x2 +y2 =r2
Disadvantages
• There is a problem of accuracy while generating points.
• This algorithm is not suitable for complex and high graphic
images.

34
 Plotting General Curves
• In computer graphics, we often need to draw different types of objects onto the

screen.

• Objects are not flat all the time and we need to draw curves many times to draw an

object.
• Types of Curves
• A curve is an infinitely large set of points. Each point has two neighbours except
endpoints.
• Curves can be broadly classified into three categories − explicit,
implicit, and parametric curves.

35
 Cont.
• Implicit Curve

• It can be expressed as the collection of points which are defined by an

implicit equation to check whether a point is on the curve or not.
• Every implicit curve is defined by an equation of the form f(x,y) = 0.

• This function would give multiple values of x for a single value of y. It is also
known as multivalued function.
• For example, the equation x2+y2=1.
• Line equation Ax + By +C= 0.

36
 Cont.
• Explicit Curve

• An explicit curve is a mathematical function y = fx that can be

plotted as a curve.
• This function would give a single value of x for a single value of
y. So it is also known as a single valued function.
• Examples: y=2X^5+3X^4
y=mx+c
37
 Cont.
• Parametric Curve

• Curves have a parametric form called parametric curves.

• The parametric curve is defined by its corresponding parametric equations: x =

f(t), y= g(t) , within a given interval, where f and g can be different

functions for the x,y coordinates of any point on the curve.
• The variable t is called a parameter and is between 0 and 1 i.e. t=[0,1].

• The relations between x,y,z, and t are called a parametric equation.

38
 Cont.
• Example 1. Let X =2t, Y =t2. Taking some points for t we can
t
plot theXcurve. Y
-2 -4 4
-1 -2 1
0 0 0
1 2 1
2 4 4

39
 Cont.
• We can find the rectangular equation by eliminating the variable t i.e. solving for t.

• X =2t ⇨ t =X/2

Y =t2 ⇨ Y =(X/2)2
⇨ Y =X2/4, this makes drawing the curve easier compared using parametric equation.
Exercise: Eliminate the parameter for the following parametric equations and use the resulting
rectangular equation to graph the plane curve :

A. X=t-5 Y=t2
B. X=t+1 Y=t2+5-1

40
 Polygon:
• Polygon is a representation of the surface. It is primitive which is closed in nature. It is

formed using a collection of lines. It is also called as many-sided figure. The lines combined

to form polygon are called sides or edges. The lines are obtained by combining two vertices.

• Example of Polygon:

• Triangle

• Rectangle

• Hexagon

• Pentagon

41
Cont..

42
 Cont.
• GL_LINE_LOOP is the same as GL_LINE_STRIP except that the last point is joined to the first one to
create a loop.
• glBegin(GL_LINE_LOOP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
• glEnd();

43