Department of Computer
Science and Engineering
Computer Graphics & fundamentals of
Image Processing
Code:21CS63
6th SEM
By,
Dr. Deepak N.
A.
Dept of CSE,
RVITM, Bengaluru
Overview: Computer
Graphics hardware and
software and OpenGL
Module -1
Basics of Computer Graphics
⮚ Computer graphics is an art of drawing pictures, lines, charts,
etc. using computers using programs.
⮚ Graphics image is made up of number of pixels.
⮚ Pixel is the smallest addressable graphical unit represented
on the computer screen.
Applications of Computer Graphics
a) Graphs and Charts
3
b) Computer-Aided Design
Video - Introduction to
CAD
Video - What is CAD
c) Virtual-Reality Environments
Video -
What is Virtual reality
Video - About Virtual a
nd Augmented Reality
4
d) Data Visualizations
Video :
What is Data Visualizations
⮚ The representation of information in the form of a chart,
diagram, picture, etc.
e) Education and Training
Video - About Education an
d Training
5
f) Computer Art
Video -
What is Digital Art
⮚ Computer art is any art in which computers
play a role in production or display of the
artwork.
⮚ Such art can be an image, sound,
animation, video, CD-ROM, DVD-ROM, video
g) Entertainment
game, website, algorithm
6
h) Image Processing
Video –
What is Image Processing
The analysis and manipulation of a digitized
image, especially in order to improve its quality.
i) Graphical User Interfaces
Video –
About Graphical User Interface
The graphical user interface is a form of user
interface that allows users to interact with
electronic devices through graphical icons and 7
❑Video Display Devices
✔The primary output device in a graphics system is a video
monitor.
✔Historically, the operation of most video monitors was
based on the standard cathoderay tube (CRT) design, but
several other technologies exist.
✔In recent years, flat-panel displays
❖ A beam haveemitted
of electrons, become
by an electron
significantly more populargun,
duepasses throughreduced
to their focusing and deflection
power
systems that direct the beam toward specified
consumption and thinnerpositions
designs. on the phosphor-coated screen.
⮚Refresh Cathode-Ray Tubes
❖ The phosphor then emits a small spot of light
at each position contacted by the electron
beam and the light emitted by the phosphor
fades very rapidly
Video - Working of Cathode Ray Tubes
8
Raster-Scan Displays and Random Scan Displays
Raster-Scan Displays
❖ The electron beam is swept across the
screen one row at a time from top to
bottom.
❖ As it moves across each row, the beam
intensity is turned on and off to create a
pattern of illuminated spots.
❖ This scanning process is called
refreshing. Each complete scanning of a
screen is normally called a frame.
Video –
❖ The refreshing rate, called the frame Working of Raster & Random Scan
rate, is normally 60 to 80 frames per Display
second, or described as 60 Hz to 80 Hz.
9
Raster-Scan Displays
⮚ Interactive raster-graphics systems typically
employ several processing units.
⮚In addition to the central processing unit (CPU), a
special-purpose processor, called the video
controller or display controller, is used to control
the operation of the display device.
⮚Organization of a simple raster system is shown
below.
10
Random-Scan Displays
✔ When operated as a random-scan
display unit, a CRT has the
electron beam directed only to
those parts of the screen where a
picture is to be displayed.
✔ Pictures are generated as line
drawings, with the electron beam
tracing out the component lines Video –
Working of Raster & Random Scan D
one after the other. isplay
✔ For this reason, random-scan
monitors are also referred to as
11
vector displays (or stroke writing
Difference between Raster scan system and Random scan system
12
⮚Light Emitting Diode (LED)
✔Short for light-emitting diode monitor, an LED monitor or LED
display is a flat screen, flat-panel computer monitor or
television. It has a very short depth and is light in terms of
weight.
Video –
Working of LED Displays
Liquid Crystal Display (LCD)
A liquid crystal display (LCD)
has liquid crystal material
sandwiched between two sheets of Video –
Working of LCD Displays
glass. Without any voltage applied
between transparent electrodes,
13
Input Devices
❑ Graphics workstations make use of various devices for data input. Most
systems have keyboards and mouse,
❑ Some other systems have trackball, space ball, joystick, button boxes, touch
panels, image scanners and voice systems.
14
Introduction To OpenGL
OpenGL basic(core) library :-A basic library of functions is
provided in OpenGL for specifying graphics primitives,
attributes, geometric transformations, viewing
✔ Basic OpenGL Syntax
transformations, and many other operations.
⮚ Function names in the OpenGL basic library (also called
the OpenGL core library) are prefixed with gl. The
component word first letter is capitalized.
For eg:- glBegin, glClear, glCopyPixels, glPolygonMode
⮚ Symbolic constants that are used with certain functions as
parameters are all in capital letters, preceded by “GL”, and
component are separated by underscore.
For eg:-GL_2D,GL_RGB,GL_CCW,GL_POLYGON,
15
⮚To indicate a specific data type, OpenGL uses special built-in, data-type
names, such as GLbyte, GLshort, GLint, GLfloat, GLdouble, Glboolean
❖ Related
Libraries
In addition to OpenGL basic(core)
library(prefixed with gl), there are a number
of associated libraries for handling special
operations
✔OpenGL Utility(GLU):- Prefixed with “glu”. It provides
routines for setting up viewing and projection matrices,
describing complex objects
✔OpenGL Utility Toolkit(GLUT):- provides a library of
❖ Header
functions Files
which acts as interface for interacting with any
device specific screen-windowing
In all graphics system,
programs, we will need thus making
to include our
the header
program device-independent.
file for the OpenGL core library.
#include<GL/gl.h>
#include <GL/glu.h> 16
Example 1: CG Program to display window and line segment
#include <GL/glut.h> // (or others, depending on the system in use)
void init (void)
{
glClearColor (1.0, 1.0, 1.0, 0.0); // Set display-window color to white.
glMatrixMode (GL_PROJECTION); // Set projection parameters.
gluOrtho2D (0.0, 200.0, 0.0, 150.0);
}
void lineSegment (void)
{
glClear (GL_COLOR_BUFFER_BIT); // Clear display window.
glColor3f (0.0, 0.4, 0.2); // Set line segment color to green.
glBegin (GL_LINES);
glVertex2i (180, 15); // Specify line-segment geometry.
glVertex2i (10, 145);
glEnd ( );
glFlush ( ); // Process all OpenGL routines as quickly as possible.
}
17
void main (int argc, char** argv)
{
glutInit (&argc, argv); // Initialize GLUT.
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); // Set display mode.
glutInitWindowPosition (50, 100); // Set top-left display-window position.
glutInitWindowSize (400, 300); // Set display-window width and height.
glutCreateWindow ("An Example OpenGL Program"); // Create display window.
init ( ); // Execute initialization procedure.
glutDisplayFunc (lineSegment); // Send graphics to display window.
glutMainLoop ( ); // Display everything and wait.
}
18
Computer Graphics - Coordinates
❖In a 2-D coordinate system the X axis generally points from left
to right, and the Y axis generally points from bottom to top.
Coordinate Systems
19
World Coordinate and Screen/Window
Coordinates
⮚World coordinate system (WCS) is
the right handed cartesian co-
ordinate system where we define the
picture to be displayed.
⮚A finite region in the WCS is called
the Window. The corresponding
coordinate system on the display
device where the image of the picture
is displayed is called the physical
coordinate system
Coordinate System :
2D on 3D Space
20
OpenGL Functions
❑Geometric Primitives
⮚It includes points, line segments,
polygon etc.
⮚These primitives pass through
geometric pipeline which decides
whether the primitive is visible or
not and also how the primitive
should be visible on the screen etc.
⮚The geometric transformations
such rotation, scaling etc can be
applied on the primitives which are
Geo
displayed on the screen. The metric Primitives
geometric primitives are shown in
the Fig.
• glBegin indicates the beginning of the object that
has to be displayed 21
OpenGL Point Functions
⮚The type within glBegin() specifies
the type of the glBegin (GL_POINTS);
GL_POINTS
glVertex2i (50, 100);
⮚Each vertex is displayed as a point. glVertex2i (75, 150);
⮚The size of the point would be of at glVertex2i (100, 200);
least one pixel. glEnd ( );
⮚Unless we specify other attribute int point1 [ ] = {50, 100};
int point2 [ ] = {75, 150};
values, OpenGL primitives are int point3 [ ] = {100, 200};
displayed with a default size and color. glBegin (GL_POINTS);
⮚The default color for primitives is glVertex2iv (point1);
white, and the default point size is glVertex2iv (point2);
glVertex2iv (point3);
equal to the size of a single screen glEnd ( );
pixel
Open GL Primitives
22
OpenGL LINE FUNCTIONS
✔Primitive type is GL_LINES
✔Successive pairs of vertices are considered as
endpoints and they are connected to form an
individual line segments.
✔we obtain one line segment between the first and
second coordinate positions and another line segment
between the third and fourth positions.
✔if the number of specified endpoints is odd, so the
last coordinate position is ignored.
Case 1: Lines
glBegin (GL_LINES);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
23
glVertex2iv (p5);
OpenGL LINE FUNCTIONS
Case 2: GL_LINE_STRIP:
❑ Successive vertices are connected using line
segments.
❑However, the final vertex is not connected to the
initial vertex.
glBegin (GL_LINES_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );
24
OpenGL LINE FUNCTIONS
Case 3: GL_LINE_LOOP:
Successive vertices are connected using line
segments to form a closed path or loop i.e., final
vertex is connected to the initial vertex.
glBegin (GL_LINES_LOOP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );
25
Point Attributes
❖ Basically, we can set two attributes for points:
color and size
❖ The displayed color and size of a point is
determined by the current values stored in the
attribute list.
❖glColor3f (1.0, 0.0, 0.0);are set with RGB values or an
Color components
index (GL_POINTS);
glBegin into a color table.
glVertex2i (50, 100);
glPointSize (2.0);
glColor3f (0.0, 1.0, 0.0);
glVertex2i (75, 150);
glPointSize (3.0);
glColor3f (0.0, 0.0, 1.0);
glVertex2i (100, 200); glEnd ( );
26
Line Drawing Algorithm
⮚A straight-line segment in a scene is defined by
coordinate positions for the endpoints of the
segment.
⮚The Cartesian slope-intercept
y=m * x +b equation for a
straight line is (1)
where (m) as the slope of the line and (b) as the (y) intercept.
⮚ Given that the two endpoints of a line segment
are specified at positions (x0,y0) and (xend,
yend) ,as shown in fig.
27
Line Drawing Algorithm
⮚ We determine values for the slope m and y
intercept b with the following equations:
m=(yend - y0)/(xend - x0) (2)
b=y0 - m.x0 (3)
⮚ Algorithms for displaying straight line are based
on the line equation (1) and calculations given in
eq(2) and (3).
⮚ Given x interval (δx) along a line, we can compute
the corresponding (y) interval (δy) from eq.(2) as
δy = m. δx (4)
28
Line Drawing Algorithm
⮚Similarly, we can obtain the x interval δx corresponding to a specified δy as
δx=δy/m (5)
These equations form the basis for determining deflection voltages in analog
displays, such as vector-scan system, where arbitrarily small changes in deflection
voltage are possible.
For lines with slope magnitudes
🡺 |m|<1, δx can be set proportional to a small horizontal deflection voltage with
the corresponding vertical deflection voltage set proportional to δy from eq.(4)
🡺 |m|>1, δy can be set proportional to a small vertical deflection voltage with the
corresponding horizontal deflection voltage set proportional to δx from eq.(5)
🡺 |m|=1, δx=δy and the horizontal and vertical deflections voltages are equal
29
DDA Line generation Algorithm
in Computer Graphics
In any 2-Dimensional plane if we connect two points (x0, y0) and
(x1, y1), we get a line segment.
In the case of computer graphics, we can not directly join any
two coordinate points, for that we should calculate intermediate
points’ coordinates and put a pixel for each intermediate point.
Input: For line segment between (2, 2)
and (6, 6) :
we need (3, 3) (4, 4) and (5, 5) as our
intermediate
points.
Input: For line segment between (0, 2)
and (0, 6) : 30
For using graphics functions, the system
output screen is treated as a coordinate
system where the coordinate of the top-left
corner is (0, 0) and as we move down our y-
ordinate increases and as we move right our
x-ordinate increases for any point (x, y).
DDA Algorithm :
Consider one point of the line as (X0,Y0)
and the second point of the line as (X1,Y1).
Working of Digital Deferential Ana
lyzer (DDA)
31
⮚ The DDA is a scan-conversion line algorithm based on
calculating either δy or δx.
⮚ A line is sampled at unit intervals in one coordinate and
the corresponding integer values nearest the line path are
determined for the other coordinate.
// calculate dx , dy
dx = X1 - X0;
dy = Y1 - Y0;
// Depending upon absolute value of dx & dy
// choose number of steps to put pixel as
// steps = abs(dx) > abs(dy) ? abs(dx) : abs(dy)
steps = abs(dx) > abs(dy) ? abs(dx) : abs(dy);
// calculate increment in x & y for each steps
Xinc = dx / (float) steps;
Yinc = dy / (float) steps;
32
// Put pixel for each step
X = X0;
Y = Y0;
For (int i = 0; i <= steps; i++)
{
putpixel (round(X),round(Y),WHITE);
X += Xinc;
Y += Yinc;
}
33
DDA Line generation
Algorithm
Advantages :
❑ It is simple and easy to implement algorithm.
❑ It avoid using multiple operations which have high
time complexities.
❑ It is faster than the direct use of the line equation
because it does not use any floating point
multiplication and it calculates points on the line.
34
DDA Line generation
Algorithm
Disadvantages :
❑It deals with the rounding off operation and floating
point arithmetic so it has high time complexity.
❑As it is orientation dependent, so it has poor
endpoint accuracy.
❑Due to the limited precision in the floating point
representation it produces cumulative error.
35
Bresenham’s Algorithm
⮚Given coordinate of two points A(x1, y1) and B(x2,
y2). The task to find all the intermediate points
required for drawing line AB on the computer screen
of pixels.
Input : A(0,0), B(4,4)
Output : (0,0), (1,1), (2,2), (3,3), (4,4)
Input : A(0,0), B(4,2)
Output : (0,0), (1,0), (2,1), (3,1), (4,2)
36
Assumptions Bresenham’s Algorithm
❑We draw line from left to right.
❑x1 < x2 and y1< y2
❑Slope of the line is between 0 and 1. We draw a
line from lower left to upper right.
void naiveDrawLine(x1, x2, y1, y2)
{
m = (y2 - y1)/(x2 - x1) Algorithm
for (x = x1; x <= x2; x++)
{
// Assuming that the round function finds Bresenham’s
y = round(mx + c); Algorithm with
print(x, y); Example
}
} 37
End of
Module -1
38
