Unit- I

Computer Graphics Basic, OpenGL and Line, Circle Drawing

 Introduction
● Computer graphics is the use of a computer to define, store, manipulate, interrogate and present
pictorial output.
● Computer Graphics is a technology enabling visual content to be drawn, displayed, or manipulated
on computer screens with the help of programming languages.
● Computer prepares and presents stored information to an observer in the form of pictures.
● Computer graphics is study of techniques to improve communication between user and machine
● Computer graphics means pitchers, graphs and scene is drawn with the help of computer
● Interactive computer graphics uses the computer to prepare and presents pictorial material.
 Application of Computer Graphics
1. Computer Art: Using computer graphics we can create fine and commercial art which include animation
packages, paint packages. These packages provide facilities for designing object shapes and specifying
object motion.Cartoon drawing, paintings, logo design can also be done.
2. Computer Aided Drawing: Designing of buildings, automobile, aircraft is done with the help of computer
aided drawing, this helps in providing minute details to the drawing and producing more accurate and sharp
drawings with better specifications.
3. Presentation Graphics: For the preparation of reports or summarising the financial, statistical,
mathematical, scientific, economic data for research reports, managerial reports, moreover creation of bar
graphs, pie charts, time chart, can be done using the tools present in computer graphics.
4. Entertainment: Computer graphics finds a major part of its utility in the movie industry and game industry.
Used for creating motion pictures , music video, television shows, cartoon animation films. In the game
industry where focus and interactivity are the key players, computer graphics helps in providing such
features in the efficient way.
5. Education: Computer generated models are extremely useful for teaching huge number of concepts and
fundamentals in an easy to understand and learn manner. Using computer graphics many educational models
can be created through which more interest can be generated among the students regarding the subject.
 Application of Computer Graphics
6. Training: Specialised system for training like simulators can be used for training the candidates in a way that can be
grasped in a short span of time with better understanding. Creation of training modules using computer graphics is simple
and very useful.

7. Visualisation: Today the need of visualise things have increased drastically, the need of visualisation can be seen in
many advance technologies , data visualisation helps in finding insights of the data , to check and study the behaviour of
processes around us we need appropriate visualisation which can be achieved through proper usage of computer graphics.

8. Image Processing: Various kinds of photographs or images require editing in order to be used in different places.
Processing of existing images into refined ones for better interpretation is one of the many applications of computer
graphics.

9. Machine Drawing: Computer graphics is very frequently used for designing, modifying and creation of various parts of
machine and the whole machine itself, the main reason behind using computer graphics for this purpose is the precision
and clarity we get from such drawing is ultimate and extremely desired for the safe manufacturing of machine using these
drawings.

10.Graphical User Interface: The use of pictures, images, icons, pop-up menus, graphical objects helps in creating a user
friendly environment where working is easy and pleasant, using computer graphics we can create such an atmosphere
where everything can be automated and anyone can get the desired action performed in an easy fashion.
 Graphics Primitives
● Pixel:
○ A pixel is defined as the smallest size object
or color spot that can be displayed and
addressed on a monitor.
○ Pixels are normally arranged in a regular
2-dimensional grid, and are often represented
using dots or squares.
○ Each pixel on the graphics display does not
represent the mathematical point but the
region which theoretically can contain an
infinite number of points.
○ For instance, if we want to display point P1 &
P2 with coordinates (4.2, 3.8) and (4.8, 3.1)
respectively, then points P1 & P2 are
represented by only one pixel (4, 3) as shown
in fig. below. Figure: Pixel display area
○ In general point is represented by Pixel (int
of 6 × 5
(x), int (y)).
 Graphics Primitives
● Resolution:
○ The quality of the images printed or shown on a monitor is referred to as resolution.
The resolution of a display is determined by counting the horizontal and vertical
pixels.
○ Resolution refers to the clarity and sharpness of an image.
○ Resolution is mostly measured in DPI(Dots per Inch).
○ The higher resolution shows best quality image.
○ The most commonly used four resolutions today are:
■ 640 × 480,
■ 1024 × 768,
■ 800 × 600,
■ 1280 × 1024
 Graphics Primitives

● Aspect ratio:
Resolution Number of Aspect Ratio
○ Itis the ratio of the number of X pixels to the Y Pixels
pixels.
320*200 64000 8:5
○ The standard aspect ratio for PCs is
640*480 307200 4:3
■ 4:3 and
800*600 480000 4:3
■ 5:4.
1024*768 786432 4:3
○ eg. aspect ratio of
1280*1024 1310720 5:4
■ 640*480 display is 16/12 = 4/3.
■ 320*200 display is 320/200=8/5 1600*1200 1920000 4:3
Table: Common resolution, respective
number of pixels and standard aspect
ratios.
 Graphics Primitives
Image:
An image is the rectangular array of dots i.e. pixels.
Types of images:
1. Raster Image:
● It is composed of pixels.
● It is array of pixels of various colours together to form an image.
● Extensions: .JPEG,.BMP,.PNG,.JPG
● If this type of image is scaled(zoom out) then image quality becomes
bad.
Types of images:
2. Vector Image:
● It is composed of paths,lines that are straight or curved.
● Extensions:.SVG(Scalable Vector Graphics),.EPS(Encapsulated
Postscript)
● In this type of image, quality of image is always good.
 Types of computer graphics
Non- interactive/passive/offline computer graphics:
● In this type of computer graphics, the user has no control over picture.
● In this type of graphics there is one way communication.
● For eg., a static website, movies etc.
Interactive/Active/Online computer graphics

● In this type of computer graphics, the user has control over picture.
● For eg., video games, dynamic website, simulators.
● In this type there is two way communication between user and computer.
● User has the control over the graphics, as input given to system depends on system
reacts.
 Components of interactive computer graphics

The interactive system is divided into two parts:

1. The software
2. The hardware
The following elements are the basic components of Interactive Computer Graphic:

● Input device: users are able to interact with graphics by inputting devices such as keyboards, mice, touchscreens, and
game controllers
● Display device: a display device like a monitor or a screen is needed for presenting the graphics to users
● Graphic pipeline: a set of stages such as rasterization, geometric processing, output merging, and pixel shading, used for
rendering graphical data
● Graphic User Interface (GUI): it helps users to interact with the system. Buttons, menus, sliders, and other UI elements
are used to manipulate objects, control the graphics app, and change settings
● Interaction technique: it includes actions such as dragging, clicking, and rotating objects
● Application logic: the algorithms that control the behavior of the Interactive system by determining the way that objects
interact together and the way the graphic systems react and behave in different situations
Display devices

· Display devices are also known as output devices.

· Most commonly used output device in a graphics system

is a video monitor.

Cathode Ray Tubes(CRT) ● CRT stands for Cathode ray

tube.
● It is a technology which is used
in traditional computer
monitor and television.
● Cathode ray tube is a
particular type of vacuum tube
that displays images when an
electron beam collides on the
radiant surface.
 Display Devices
Component of CRT:
■ Electron Gun:
● The electron gun is made up of several elements,
mainly a heating filament (heater) and a cathode.
● The electron gun is a source of electrons focused on
a narrow beam facing the CRT.
■ Focusing & Accelerating Anodes:
● These anodes are used to produce a narrow and
sharply focused beam of electrons.
■ Horizontal & Vertical Deflection Plates:
● These plates are used to guide the path of the
electron the beam.
● The plates produce an electromagnetic field that
bends the electron beam through the area as it
travels.
■ Phosphors-coated Screen:
● The phosphors coated screen is used to produce
bright spots when the high-velocity electron beam
hits it.
 Techniques used for producing images on the CRT screen:
Vector scan/Random scan display:
1. Vector scan display directly traces out only the
desired lines on CRT.
2. If we want line between point p1 & p2 then we
directly drive the beam deflection circuitry which
focus beam directly from point p1 to p2.
3. If we do not want to display line from p1 to p2
and just move then we can blank the beam as
we move it.
4. Display controller is connected as an I/O
peripheral to the CPU.
5. Display buffer stores computer produced display
list or display program.
6. The Program contains point & line plotting
commands with end point co-ordinates as well as
character plotting commands. 9. We know as beam strikes phosphors coated
7. Display controller interprets command and sends screen it emits light but that light decays after few
digital and point co-ordinates to a vector milliseconds and therefore it is necessary to repeat
generator. through the display list to refresh the screen at
8. Vector generator then converts the digital least 30 times per second to avoid flicker.
co-ordinate value to analog voltages for beam
10. As display buffer is used to store display list and
deflection circuits that displace an electron beam
used to refreshing, it is also called refresh buffer.
which points on the CRT's screen.
Raster scan display:
1. Fig. shows the architecture of Raster display. It
consists of display controller, CPU, video controller,
refresh buffer, keyboard, mouse and CRT.
2. The display image is stored in the form of 1's and 0's
in the refresh buffer.
3. The video controller reads this refresh buffer and
produces the actual image on screen.
4. It will scan one line at a time from top to bottom &
then back to the top.
1. In this method the horizontal and vertical deflection
signals are generated to move the beam all over the
screen in a pattern shown in fig. 1.4.
2. Here beam is swept back & forth from left to the right.
3. When beam is moved from left to right it is ON.
4. When beam is moved from right to left it is OFF and
process of moving beam from right to left after
completion of row is known as Horizontal Retrace.
5. When beam is reach at the bottom of the screen. It is
made OFF and rapidly retraced back to the top left to
start again and process of moving back to top is known
as Vertical Retrace.
6. The screen image is maintained by repeatedly scanning
the same image. This process is known as Refreshing of
Screen.
7. In raster scan displays a special area of memory is
dedicated to graphics only. This memory is called Frame
Buffer.
8. Frame buffer holds set of intensity values for all the
screen points.
9. That intensity is retrieved from frame buffer and display
on screen one row at a time.
 DDA Line Drawing Algorithm
● The Digital Differential Analyzer helps us to interpolate the variables on an interval
from one point to another point.
● We can use the digital Differential Analyzer algorithm to perform rasterization on
polygons, lines, and triangles.
● Digital Differential Analyzer algorithm is also known as an incremental
method of scan conversion.
● In this algorithm, we can perform the calculation in a step by step manner.
● We use the previous step result in the next step.
 DDA Line Drawing Algorithm
Algorithm of Digital Differential Analyzer
(DDA) Line Drawing ● Step 6: Now, we have to calculate xincr and
● Step 1: Start. yincr.
● Step 2: We consider Starting point as (x1, xincr = (x2-x1)/length
y1), and ending point (x2, y2).
● Step 3: Now, we have to calculate dx and dy. yincr = (y2-y1)/length
dx = |x2-x1| ● Step 7: Now, we calculate line coordinates
dy = |y2-y1| xi+1=xi+ xincr
yi+1=yi+ yincr
● Step 4: We will repeat step 7 for Length times.
if
● Step 8: Stop.
dx>=dy
then
Length=dx
else
Length=dy
● Step 5: Plot point (x1,y1)
 DDA Line Drawing Algorithm
if
● Example 1: A line has a dx>=dy
starting point (1,7) and then
x1 y1 x1 y1 (x1, y1)
ending point (11,17). Apply Length=dx
the Digital Differential else 1 7 2 8 (2, 8)
Analyzer algorithm to plot a Length=dy
line. Therefore
3 9 (3, 9)
● Solution: We have two Length=10 4 10 (4, 10)
coordinates, • Step 4: Now, we have to 5 11 (5, 11)
○ Step 1: Start calculate Δx and Δy.
Δx = (x2-x1)/length=10/10=1 6 12 (6, 12)
○ Step 2: We consider Starting
point as (x1, y1), and ending Δy = (y2-y1)/length =10/10=1 7 13 (7, 13)
point (x2, y2). • Step 5: Now, we calculate line
Starting Point = (x1, y1) coordinates 8 14 (8, 14)
= (1,7) x1=x1+ Δx=1+1=2 9 15 (9, 15)
Ending Point = (x2, y2)
= (11,17)
y1=y1+ Δy=7+1=8 10 16 (10, 16)
• Step 4: We will repeat step 5 until
○ Step 3: Now, we have to we get the endpoints of the line. 11 17 (11, 17)
calculate dx and dy.
• Step 5: Stop.
dx = | x2 – x1 | = 11-1 = 10
dy = | y2 – y1 | = 17-7 = 10
 DDA Line Drawing Algorithm

● The coordinates of drawn line are-

● P1 = (2, 8)
● P2 = (3, 9)
● P3 = (4, 10)
● P4 = (5, 11)
● P5 = (6, 12)
● P6 = (7, 13)
● P7 = (8, 14)
● P8 = (9, 15)
● P9 = (10, 16)
● P10 = (11, 17)
 Examples on DDA Line Drawing Algorithm

●A line has a starting point (0,0) and ending point (4,6). Apply the
Digital Differential Analyzer algorithm to plot a line.
●A line has a starting point (20,10) and ending point (30,18).
Apply the Digital Differential Analyzer algorithm to plot a line.
●A line has a starting point (0,0) and ending point (-5,-5). Apply
the Digital Differential Analyzer algorithm to plot a line.
●A line has a starting point (5,7) and ending point (10,15). Apply
the Digital Differential Analyzer algorithm to plot a line.
 DDA Line Drawing Algorithm
● Advantages of Digital Differential Analyzer
○ It is a simple algorithm to implement.
○ It is a faster algorithm than the direct line equation.
○ We cannot use the multiplication method in Digital Differential Analyzer.
○ Digital Differential Analyzer algorithm tells us about the overflow of the point when the
point changes its location.

● Disadvantages of Digital Differential Analyzer

○ The floating-point arithmetic implementation of the Digital Differential Analyzer is
time-consuming.
○ The method of round-off is also time-consuming.
○ Sometimes the point position is not accurate.
 Bresenham’s Line Drawing Algorithm
● Case 1: If pk < 0
● Algorithm of Bresenham’s Line Drawing
Algorithm Then
● Step 1: Start. pk+1 =pk +2 Δ y
● Step 2: Now, we consider Starting point as xk+1 = xk +1
(x1, y1) and ending point (x2, y2). yk+1 = yk
● Step 3: Now, we have to calculate Δ x and Δ y. ● Case 2: If pk >= 0
Δ x = |x2-x1| Then
Δ y = |y2-y1| pk+1 =pk +2 Δ y-2 Δ x
if given y2 >y1 if given y1 >y2
● Step 4: Now, we will calculate the decision
parameter pk with following formula. xk+1 =xk +1 xk+1 =xk +1
pk = 2 Δ y- Δ x yk+1 =yk +1
yk+1 =yk -1
● Step 5: The initial coordinates of the line are (xk,
yk), and the next coordinates are (xk+1, yk+1). ● Step 6: We will repeat step 5 until we found the
Now, we are going to calculate two cases ending point of the line and the total number of
for decision parameter pk iterations = Δ x-1.
 Bresenham’s Line Drawing Algorithm
● Example 1: A line has a starting point ● Step 3: Now, we will check both the cases.
(9,18) and ending point (14,22). Apply the
Bresenham’s Line Drawing algorithm to If pk >= 0 Then Case 2 is satisfied. Thus
plot a line. pk+1 = pk +2 Δ y-2 Δ x
● Solution: We have two coordinates, =3+( 2 * 4) – (2 * 5) = 1
● Starting Point = (x1, y1) = (9,18) xk+1 =xk +1 = 9 + 1 = 10
● Ending Point = (x2, y2) = (14,22) yk+1 =yk +1 = 18 +1 = 19
● Step 1: First, we calculate Δ x, Δ y. ● Step 4: Now move to next step. We will calculate the
coordinates until we reach the end point of the line.
Δ x = |x2 – x1|= 14-9 = 5
No. of iteration is Δ x -1 = 5 – 1 = 4
Δ y = |y2 – y1|= 22-18 = 4
and use previous pk+1 as pk for next
● Step 2: Now, we are going to calculate the iteration
decision parameter (pk)
● Step 5: Stop.
pk = 2 Δ y- Δ x
= 2 *4 – 5 = 3
The value of pk = 3
 Bresenham’s Line Drawing Algorithm

● The Coordinates of drawn lines are-

Δx Δy pk pk+1 xk+1 yk+1
● P1 = (9, 18)
● P2 = (10, 19) 9 18

● P3 = (11, 20) 3 1 10 19

● P4 = (12, 20) 1 -1 11 20
● P5 = (13, 21) 5 4 -1 7 12 20
● P6 = (14, 22)
7 5 13 21

5 3 14 22
 Bresenham’s Line Drawing Algorithm
● Example 2: A line has a starting point (1,1) and ending point (6,4). Apply the
Bresenham’s Line Drawing algorithm to plot a line.
● Solution:
Δx Δy pk pk+1 xk+1 yk+1
1 1
1 -3 2 2
-3 3 3 2
5 3 3 -1 4 3
-1 5 5 3
5 1 6 4
 Bresenham’s Line Drawing Algorithm
● Example 3: A line has a starting point (4,9) and ending point (7,7).
Apply the Bresenham’s Line Drawing algorithm to plot a line.
● Solution:

Δx Δy pk pk+1 xk+1 yk+1

4 9
1 -1 5 8
3 2 -1 3 6 8
3 1 7 7
 Bresenham’s Line Drawing Algorithm
● Advantages of Bresenham’s Line Drawing Algorithm
○ It is simple to implement because it only contains integers.
○ It is quick and incremental
○ It is fast to apply but not faster than the Digital Differential Analyzer (DDA) algorithm.
○ The pointing accuracy is higher than the DDA algorithm.
● Disadvantages of Bresenham’s Line Drawing Algorithm
○ The Bresenham’s Line drawing algorithm only helps to draw the basic line.
○ The resulted draw line is not smooth.
 Scan Conversion of a Circle

● A circle is an eight-way symmetric shape.

● All quadrants of a circle are the same.
● There are two octants in each quadrant of a circle.
● If we know the value of any point, then we can easily calculate
the values of the remaining seven points by using the eight-way
symmetry method.
● A circle is a shape consist of a line called the circumference.
● All the straight lines drawn from a particular point within the
circle to the circumference are always equal.
● A circle is a round shape that has no corner or sides.
● “A circle can be defined as a combination of points that all
points are at the same distance (radius) from the center
point.”
 Scan Conversion of a Circle
● Example: Let, we have taken a point (4, 6) of
a circle. We will calculate the remaining seven
points by using of reflection method as
follows-
● The seven points are –
● (4, -6),
● (-4, -6),
● (-4, 6),
● (6, 4),
● (6, -4),
● (-6, -4),
● (-6, 4)
 Bresenham’s Circle Drawing Algorithm
● Bresenham’s algorithm is also used for circle drawing.
● It is known as Bresenham’s circle drawing algorithm.
● It helps us to draw a circle.
● The circle generation is more complicated than drawing a line.
● In this algorithm, we will select the closest pixel position to complete the arc.
● We cannot represent the continuous arc in the raster display system.
● The different part of this algorithm is that we only use arithmetic integer.
● We can perform the calculation faster than other algorithms.
 Bresenham’s Circle Drawing Algorithm
● Algorithm of Bresenham’s Circle ● Step 5: Now, we follow two cases-
Drawing
Case 1: If d< 0 then
● Step 1: Start.
x=x+1 and y =y
● Step 2: First, we allot the starting
coordinates (x, y) as follows- d= d + 4x + 6
x=0 Case 2: If d >= 0 then
y =r x=x+ 1 and y =y –1
● Step 3: Now, we calculate the initial d = d + 4(x – y)+ 10
decision parameter d
• Step 6: plot the new calculated x and y pixel using 8 way
d= 3 – 2 r symmetry.
● Step 4: Assume, the initial coordinates • Step 7: We repeat step 5 and 6 while x<=y.
are (x, y)
• Step 8: Stop.

Now, we will find the next point of the first

octant according to the value of the decision
parameter (d).
 Bresenham’s Circle Drawing Algorithm
● Example: The radius of a circle is 8, and ● Step 4: The value of initial parameter d < 0. So, case 1 is
center point coordinates are (0, 0). Apply
bresenham’s circle drawing algorithm to satisfied.
plot all points of the circle. ● Thus,
● Solution: ● x =x+ 1 = 0 + 1 = 1
● Step 1: The given starting points of the ● y=y= 8
circle (x, y) = (0, 0)
● Radius of the circle (r) = 8 ● d = d+ 4x + 6 = –13 + (4 * 1) + 6 = –3

● Step 2: Now, we will assign the starting ● Step 5: The center coordinates are already (0, 0) so we
point (x,y) as follows- will move to next step.
● x= 0 ● Step 6: Follow step 4 until while x <= y.
● y = r (radius) = 8
● Step 3: Now, we will calculate the initial
decision parameter (d)
● d= 3 – 2 * r
● d=3–2*8
● d = -13
 Bresenham’s Circle Drawing Algorithm

• Table for all points of octant 1 ● Thus, we will calculate all points of the circle with respect to octant 1

dk Quadrant 1 (x, Quadrant 2 (-x, Quadrant 3 (-x, Quadrant 4 (x,

dk+1 (xk+1,yk+1)
y) y) -y) -y)
(
(0, 8) (0, 8) (0, -8) (0, -8)
0, 8)
(1, 8) (-1, 8) (-1, -8) (1, -8)
(
(2, 8) (-2, 8) (-2, -8) (2, -8)
-13 -3 1, 8)
(3, 7) (-3, 7) (-3, -7) (3, -7)
-3 11 (2, 8) (4, 6) (-4, 6) (-4, -6) (4, -6)
(5, 5) (-5, 5) (-5, -5) (5, -5)
11 5 (3, 7) (6, 4) (-6, 4) (-6, -4) (6, -4)
(7, 3) (-7, 3) (-7, -3) (7, -3)
5 7 (4, 6) (8, 2) (-8, 2) (-8, -2) (8, -2)
(8, 1) (-8, 1) (-8, -1) (8, -1)
7 (5, 5) (8, 0) (-8, 0) (-8, 0) (8, 0)
 Bresenham’s Circle Drawing Algorithm
● Advantages of Bresenham’s Circle Drawing Algorithm
○ It is simple and easy to implement.
○ The algorithm is based on simple equation x2 + y2 = r2.
● Disadvantages of Bresenham’s Circle Drawing Algorithm
○ The plotted points are less accurate than the midpoint circle drawing.
○ It is not so good for complex images and high graphics images.
Character generation methods: stroke, starburst, bitmap
 Introduction to OpenGL
• OpenGL is a computer graphics rendering application programming
interface (API)
• With it, you can generate high-quality color images by rendering with
geometric and image primitives
• It forms the basis of many interactive applications that include 3D graphics
• By using OpenGL, the graphics part of your application can be
• operating system independent
 OpenGL’s Geometric Primitives
• All primitives are specified by vertices

GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP

GL_TRIANGLES GL_TRIANGLE_F
GL_TRIANGLE_STRIP AN