1 of 58

Sri Raghavendra Educational Institutions Society (R)

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

Sri Krishna Institute of Technology

www.skit.org.in

Department of Computer Science & Engineering

21CS63-Computer graphics and Fundamental of Image Processing

2 of 58

MODULE-1

� Computer Graphics Software and Hardware, Introduction to OpenGL

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

3 of 58

INTRODUCTION

Computer graphics is an art of drawing pictures, lines, charts, etc. on computer screen by using programming language.

In Computer graphics objects are presented as a collection of discrete picture of elements (Pixels)

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

4 of 58

INTRODUCTION

Fig. A Graphics system

This ability to interpret and represent numerical data in pictures has significantly increased the computer’s ability to present information to the user in a clear and understandable form.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

5 of 58

INTRODUCTION

Advantages of CG :

High quality .
Produce animations.
Using motion dynamics tools.
Using update dynamic tool.
Easy Conversion into graphs.
Produces pictures using tools.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

6 of 58

Applications of CG

Computer graphics user interfaces (GUIs) − A graphic, mouse-oriented paradigm which allows the user to interact with a computer.
Business presentation graphics
Cartography
Weather Maps

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

7 of 58

Applications of CG

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

8 of 58

Video Display Devices

Refresh Cathode-Ray Tubes (CRTs)
Raster-Scan Displays
Random-Scan Displays
Color CRT Monitors
Flat-Panel Displays

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

9 of 58

Cathode-Ray Tube(CRT)

Fig. Refresh cathode ray tube

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

10 of 58

Phosphors

Fluorescence

High persistence cheap and good for text, bad for animation

Low persistence, good for animation, but need high refresh rate.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

11 of 58

Raster-Scan Displays

The Top to bottom approach.
A Raster is a matrix of pixels.

❖ The refreshing rate, called the frame rate.

Fig.2 - A raster-scan system displays an object as a set of discrete points across each scan line.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

12 of 58

Raster-Scan Systems

Simple raster-graphics systems.
Video controller (display controller) is used to control the operation of the display device.

Figure. Organization of a simple raster system

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

13 of 58

Random-Scan Displays/Vector-scan

Calligraphic
The electron beam directly draws the components lines of an object in any order specified.
Higher resolution than raster-scan systems.
Produce smooth line drawing.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

14 of 58

Color CRT Moitors

Cathode Ray Tube(CRT) is the most common display device

— High resolution

— Good color fidelity

— High contrast

— High update rates

Techniques for producing color :

— Beam penetration method

— Shadow mask method

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

15 of 58

Beam Penetration Method

Random scan monitors use the beam penetration method for displaying color picture. In this, the inside of CRT screen is coated two layers of phosphor namely red and green.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

16 of 58

Shadow Masks Method

Raster scan system are use shadow mask methods to produced a much more range of colors than beam penetration method.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

17 of 58

Introduction To OpenGL

What is OpenGL?

A basic library of functions is provided in OpenGL for specifying graphics primitives, attributes, geometric transformations, viewing transformations, and many other operations.

OpenGL is a computer graphics rendering application programming interface,

Generate high-quality color images by rendering with geometric and image primitives
It forms the basis of many interactive applications that include 3D graphics

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

18 of 58

Introduction To OpenGL

OpenGL is a platform-independent API

Easy to use
Close enough to the hardware to get excellent performance
Focus on rendering
Omitted windowing and input to avoid window system dependencies

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

19 of 58

Basic OpenGL Syntax

Function names in the OpenGL library are prefixed with gl.

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,GL_AMBIENT_AND_DIFFUSE.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

20 of 58

OpenGL Interface

Components of the OpenGL Interface

GL :- Core OpenGL function
GLU:-graphics utility library(create objects)
GLUT:-GL Utility toolkit( interface to window system).
GLX:- low level interface to X Windows

Eg:- Apple GL(AGL), Windows-to-OpenGL(WGL), Presentation Manager to OpenGL(PGL), GLX.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

21 of 58

Header Files:

✓ In windows to include OpenGL core libraries and GLU we can use the following header files:-

#include <windows.h> //precedes other header files

for including Microsoft windows ver

of OpenGL libraries

#include<GL/gl.h>

#include <GL/glu.h>

✓ The above lines can be replaced by using GLUT header file which ensures gl.h and glu.h are included correctly,

✓ #include <GL/glut.h> //GL in windows

✓ In Apple OS X systems, the header file inclusion statement will be,

✓ #include <GLUT/glut.h>

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

22 of 58

Coordinate Reference Frames

World coordinate system
A right hand coordinate system
Cartesian coordinates
Label the axes as

X (horizontal)
Y (vertical)
Z (in 3D)
Origin is in the lower left

Y Axis

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

23 of 58

Coordinate Reference Frames

A convenient Cartesian coordinate system called the world-coordinate reference frame, which could be either 2D or 3D.

Co-ordinate extents: Co-ordinate extents are the minimum and maximum x, y, and z values for each object.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

24 of 58

Specifying a 2D World-Coordinate RF

➢ The gluOrtho2D command.

➢ Orthogonal projection.

For 2D coordinate frame for the screen display window with the following statements

glMatrixMode (GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (xmin, xmax,

ymin, ymax);

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

25 of 58

OpenGL Functions

Primitives

Points
Line Segments
Polygons

Transformations

Viewing
Modeling

Attributes

Control (GLUT)

Input (GLUT)

Query

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

26 of 58

OpenGL Point Functions

➢ The type within glBegin() specifies the type of the object and its value can be as follows:

GL_POINTS

➢ The default color for primitives is white, and the default point size is equal to the size of a single screen pixel.

Syntax: Case 1:

glBegin (GL_POINTS);

glVertex2i (50, 100);

glVertex2i (75, 150);

glVertex2i (100, 200);

glEnd ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

27 of 58

OpenGL Point Functions

Case 2:

➢ We Specify the coordinate values for the preceding points in arrays such as

int point1 [ ] = {50, 100};

int point2 [ ] = {75, 150};

int point3 [ ] = {100, 200};

and call the OpenGL functions for plotting the three points as

glBegin (GL_POINTS);

glVertex2iv (point1);

glVertex2iv (point2);

glVertex2iv (point3);

glEnd ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

28 of 58

OpenGL Point Functions

Case 3:

➢ specifying two point positions in a three dimensional world reference frame. In this case, we give the coordinates as explicit floating-point values:

glBegin (GL_POINTS);

glVertex3f (-78.05, 909.72, 14.60);

glVertex3f (261.91, -5200.67, 188.33);

glEnd ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

29 of 58

OpenGL LINE FUNCTIONS

Primitive type is GL_LINES

➢ Case 1: Lines

glBegin (GL_LINES);

glVertex2iv (p1);

glVertex2iv (p2);

glVertex2iv (p3);

glVertex2iv (p4);

glVertex2iv (p5);

glEnd ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

30 of 58

OpenGL LINE FUNCTIONS

glBegin (GL_LINES_STRIP);

glVertex2iv (p1);

glVertex2iv (p2);

glVertex2iv (p3);

glVertex2iv (p4);

glVertex2iv (p5);

glEnd ( );

Case 2: GL_LINE_STRIP:

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

31 of 58

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 ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

32 of 58

OpenGL Attributes

Attributes are part of the OpenGL state and determine the appearance of objects

Color (points, lines, polygons)
Size and width (points, lines)
Stipple pattern (lines, polygons)
Polygon mode

Display as filled: solid color or stipple pattern
Display edges
Display vertices

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

33 of 58

Point Attribute

➔ In a state system: The displayed color and size of a point is determined by the current values stored in the attribute list.

➔ For a raster system: Point size is an integer multiple of the pixel size, so that a large point is displayed as a square block of pixels.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

34 of 58

Line Attribute

A straight line segment can be displayed with three basic attributes: color, width and style.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

35 of 58

Curve Attribute

Parameters for curve attributes are the same as those for straight-line segments.
Methods for adapting curve-drawing algorithms to accommodate attribute selections are similar to line drawing.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

36 of 58

➔ Raster curves of various widths can be displayed using the method of horizontal or vertical pixel spans.

Case 1: Where the magnitude of the curve slope |m| <= 1.0, we plot vertical spans

Case 2: when the slope magnitude |m| > 1.0, we plot horizontal spans.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

37 of 58

�OpenGL Point-Attribute Functions �

1.Color:glColor(r,g,b);

2. Size: glPointSize (size);

glPointSize(GLfloat size);

Example : glColor3f ( 1.0, 0.0,0.0);

glBegin(GL_POINTS);

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 ( );

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

38 of 58

OpenGL Line-Attribute Functions

Line Color – glcolor( );
Line Width - glLineWidth(GLfloat width);
Line Style - glLineStipple(repeatFactor, pattern);
Pattern – 16-bit integer

( 0xFFFF with each bit position 1 )

default is a solid line Repeat

factor specifies how many

times each bit in the

pattern is repeated before

the next bit in the pattern

is applied.- Default value is 1

Example:

glEnable(GL_LINE_STIPPLE);

glLineStipple(1, 0x00FF); // Plot dashed double width line

glLineWidth(2.0);

lineplot( ) ; // plot the line

glLineStipple(1, 0x0101); \\Plot dotted triple width line

glLineWidth(3.0);

lineplot();

glDisable(GL_LINE_STIPPLE);

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

39 of 58

Line Drawing Algorithm

The Line drawing algorithm is a graphical algorithm which is used to represent the line segment on discrete graphical media, i.e., printer and pixel-based media.
A line contains two points. The point is an important element of a line
Properties of a Line Drawing Algorithm:

An algorithm should be precise
Finiteness
Easy to understand
Correctness
Effectiveness
Uniqueness
Input & Output

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

40 of 58

Line Drawing Algorithm

Equation of the straight line:
We can define a straight line with the help of the following equation.
y= mx + b

Where,(x, y) = axis of the line.

m= Slope of the line.
b =Interception point on y-axis
If we have two endpoints, (x0, y0)

and (xend, yend), then m and b

can be calculated as:

m = y / x = (yend – y0) / (xend – x0)

b = y0 - m . x0

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

41 of 58

Line Drawing Algorithm

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

42 of 58

Digital Differential Analyzer

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.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

43 of 58

As we know the general equation of the straight line is:

y = mx + c

Here m is the slope of (x1, y1)and (x2, y2)

m = (y2 – y1)/ (x2– x1)

Now, we consider one point (xk , yk ) and(xk+1, yk+1) as the next point

Then the slope m = (yk+1– yk)/ (xk+1– xk )

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

44 of 58

Three cases to find the slope between starting & ending point.

�

m = (y

–

)/ (x

–

)

Now, we consider one point

, y

)

and

k+1

, y

k+1

)

as the next point

Then the slope

m = (y

k+1

–

)/ (x

k+1

–

)

Now, we have to find the slope between the starting point and ending point. There can be following three cases todiscuss:

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

45 of 58

Algorithm of (DDA) Line Drawing

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

46 of 58

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.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

47 of 58

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.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

48 of 58

Bresenham’s Algorithm

This algorithm was introduced by “Jack Elton Bresenham” in 1962.

This algorithm helps us to perform scan conversion of a line. It is a powerful, useful, and accurate method.

We use incremental integer calculations to draw a line. The integer calculations include ‘+’, ‘-’, and ’x’.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

49 of 58

Bresenham’s Algorithm

we have to calculate the slope (m) between the starting point and the ending point. As shown in the above figure let, we have initial coordinates of a line = (xk , yk).

The next coordinates of a line = (xk+1,yk+1).

The intersection point between yk and yk+1=y.

Let we assume that the distance between y and yk= d

1.The distance between y and yk+1= d

2. Now, we have to decide which point is nearest to the intersection point.

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

50 of 58

If m < 1, then x=xk+1 {Unit Interval}

y=yk +1{Unit Interval}

As we know the equation of a line- y = mx +b

Now we put the value of x into the line equation, then

y = m(xk +1) +b …………. (1)

The value of d1= y – yk

Now we put the value of d1 in equation (1).

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

51 of 58

Bresenham’s Algorithm

Line eq:

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

52 of 58

Bresenham’s Algorithm

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

53 of 58

Bresenham’s Algorithm

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

54 of 58

Bresenham’s Algorithm

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

55 of 58

Bresenham’s Algorithm Steps

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

56 of 58

Advantages of Bresenham’s Line Drawing Algorithm

It is simple to implement because it only contains integers.

It is fast to apply but not faster than the Digital Differential Analyzer (DDA) algorithm.

It is quick and incremental

The pointing accuracy is higher than the DDA algorithm.

�

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

57 of 58

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

Sri Krishna Institute of Technology

(Approved by AICTE, Accredited by NAAC, Affiliated to VTU, Karnataka)

/skit.org.in

1 of 58

2 of 58

3 of 58

4 of 58

5 of 58

6 of 58

7 of 58

8 of 58

9 of 58

10 of 58

11 of 58

12 of 58

13 of 58

14 of 58

15 of 58

16 of 58

17 of 58

18 of 58

19 of 58

20 of 58

21 of 58

22 of 58

23 of 58

24 of 58

25 of 58

26 of 58

27 of 58

28 of 58

29 of 58

30 of 58

31 of 58

32 of 58

33 of 58

34 of 58

35 of 58

36 of 58

37 of 58

38 of 58

39 of 58

40 of 58

41 of 58

42 of 58

43 of 58

44 of 58

45 of 58

46 of 58

47 of 58

48 of 58

49 of 58

50 of 58

51 of 58

52 of 58

53 of 58

54 of 58

55 of 58

56 of 58

57 of 58

58 of 58