COMPUTER GRAPHICS AND IMAGE PROCESSING LABORATORY

(21CSL66)

Course Learning Objectives (CLO’s)

1
 COMPUTER GRAPHICS AND IMAGE PROCESSING LABORATORY
(21CSL66)

Course Outcomes (CO’s)

CO1.Use OpenGL /OpenCV for the development of mini projects.

CO2.Analyse the necessity mathematics and design required to demonstrate basic geometric
transformation techniques.
CO3. Demonstrate the ability to design and develop input interactive techniques
C04. Apply the concepts to Develop user friendly applications using Graphics and IP
concepts

2
 COMPUTER GRAPHICS AND IMAGE PROCESSING LABORATORY
(21CSL66)

PART-A

1. Implement Brenham’s line drawing algorithm for all types of slope .

2. Develop a program to demonstrate basic geometric operations on the 2D object .
3. Develop a program to demonstrate basic geometric operations on the 3D object
4. Develop a program to demonstrate 2D transformation on basic objects .
5. Develop a program to demonstrate 3D transformation on 3D objects
6. Develop a program to demonstrate Animation effects on simple objects.

3
 COMPUTER GRAPHICS AND IMAGE PROCESSING LABORATORY
(21CSL66)

PART-A

7.Write a Program to read a digital image. Split and display image into 4 quadrants, up, down, right
and left.
8.Write a program to show rotation, scaling, and translation on an image.
9.Read an image and extract and display low-level features such as edges, textures using filtering
techniques.
10. Write a program to blur and smoothing an image.
11.Write a program to contour an image.
12.Write a program to detect a face/s in an image.

4
 COMPUTER GRAPHICS AND IMAGE PROCESSING LABORATORY
(21CSL66)

PART-B

Student should develop a mini project and it should be demonstrate in the laboratory
examination,
(During the practical exam: the students should demonstrate and answer
Viva-Voce)

5
 OpenGL

What is OpenGL
OpenGL is a software interface to graphics hardware.
Graphics rendering API
Rendering?–converting geometric or
mathematical object descriptions into frame
buffer values.
 high-quality color images composed of geometric
and image primitives
 window system independent
 operating system independent
This interface consists of 150 distinct commands they are
used to specify the object and operations needed to produce
interactive 2D & 3D graphics application.
Currently there are 3 major graphics APIs currently
being used right now.

• OpenGL. OpenGL was first released in 1992, by

Silicon Graphics.
• Direct3D. Microsoft DirectX is an advanced suite of
multimedia APIs built into Microsoft Windows® operating
systems. ...
• Metal. Metal provides near-direct access to the graphics
processing unit (GPU), enabling you to maximize ... Get
sample code to see how Metal APIs are implemented.
 (The OpenGL Interface)
In OpenGL all graphic functions are stored in three Libraries
1. GL (OpenGL in windows)- The functions in this library have names
that begin with letters gl and are stored in library GL
2. GLU (OpenGL Utility Library)- This library uses GL functions and
contains code for generating objects and simplifying views.
Function GLU library begin with “glu". They are used for 1. Setting
up matrices for viewing transformation 2. Rendering surfaces 3.
performing polygon tessellation.
3. GLUT(OpenGL Utility Toolkit)- Used to interface with the window
system and to get input from external devices.
 GLX, Xlib and Xtk are used by x-windows
GLU
OpenGL Frame
GL
Application Buffer
Program Xlib, Xtk
GLUT
8

GLX
 Abstractions
GLUT
Windowing toolkit (key, mouse handler, window events)

GLU
• Viewing –perspective/orthographic
• Image scaling, polygon tessellation
• Sphere, cylinders, quadratic surfaces
GL

• Primitives - points, line, polygons

• Shading and Colour
• Translation, rotation, scaling
• Viewing, Clipping, Texture
• Hidden surface removal
 To define the primitives or objects

glBegin(GL_LINES); // Draw line

glVertex2i(180, 15); // - first point
glVertex2i(10, 145); // - second point
glEnd; // Ready with line
 Definition of the primitives are defined between glBegin and glEnd functions
 Type of the primitive specified as parameter in glBegin
 glEnd doesn’t contain any parameters
 Based on the type of primitives or objects no of vertices are defined within
glBegin and glEnd functions.
OpenGL Command Formats

glVertex3fv( v )

Number of Data Type Vector

components b - byte omit “v” for
ub - unsigned byte
2 - (x,y) scalar form
s - short
3 - (x,y,z)
us - unsigned short
4 - (x,y,z,w) glVertex2f( x, y )
i - int
ui - unsigned int
f - float
d - double
11
 OpenGL Geometric Primitives
 All geometric primitives are specified by vertices

GL_LINES
GL_POLYGON
GL_LINE_STRIP GL_LINE_LOOP
GL_POINTS

GL_TRIANGLES

GL_QUADS
GL_QUAD_STRIP
GL_TRIANGLE_STRIP GL_TRIANGLE_FAN

12
 GL_POINTS each vertex is displayed as one
pixel
GL_LINES  Takes successive pair of
vertices(lines are disconnected)
GL_LINE_STRIP Successive vertices are
connected
GL_LINE_LOOP polyline are closed.
POLYGON
Polygon is an object that has
1.Border that can be describe by line
loop.
2.Defined interiors.
3 properties of a polygon
Simple, Convex, Flat
 If no two edges of a polygon cross each other it’s a
simple polygon.

simple not simple

 An object is convex, a line segment between two
points on the boundary never goes outside the
polygon.

convex non-convex
Data types supported in OpenGL
Suffix Data Type Typical Corresponding C- OpenGL Type
Language Type Definition
b 8-bit integer signed char GLbyte

s 16-bit integer Short GLshort

i 32-bit integer int or long GLint
f 32-bit floating- Float GLfloat
point
d 64-bit floating- Double GLdouble
point
ub 8-bit unsigned unsigned char GLubyte,
integer GLboolean
us 16-bit unsigned unsigned short GLushort
integer
ui 32-bit unsigned unsigned int or unsigned long GLuint,
integer Glbitfield
 Control functions
 Interface between the graphics system and operating system (GLUT)
 Interaction with the window system
 Window displays the content of frame buffer
 Position of window are measured in pixels
1. glutInit(int *argc, char **argv) initializes GLUT and processes any command line arguments
glutInit() should be called before any other GLUT routine.
Eg: glutInit(&argc, argv)
2. glutInitDisplayMode(unsigned int mode)
 specifies whether to use an RGBA or color-index color model.
 specify whether we want a single- or double-buffered window.
 we can use this routine to indicate that we want the window to have an associated depth, stencil,
and/or accumulation buffer.
 Eg: If we want a window with double buffering, the RGBA color model, and a depth buffer, we might
call
3. glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH).
 Eg: Single buffer with RGB glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB). 16
 glutInitWindowPosition(int x, int y) - Specifies the screen location for the upper-left corner of
window.
Eg: glutInitWindowPosition(0,0); // Place window top left on display
 glutInitWindowSize(int width, int size) - Specifies the size in pixels of the window.
Eg: glutInitWindowSize(500,500); //500x500 window
 int glutCreateWindow(char *string) - Creates a window with an OpenGL context. It returns a unique
identifier for the new window. Until glutMainLoop() is called , the window is not yet displayed.
Eg: glutCreateWindow(“Sierpinski Gasket”);
 glutDisplayFunc(void (*func)(void)) - It is the first and most important event callback function .
Whenever GLUT determines the contents of the window need to be redisplayed, the callback
function registered by glutDisplayFunc() is executed. Therefore, we should put all the routines you
need to redraw the scene in the display callback function.
 glutMainLoop(void)- All windows that have been created are now shown, and rendering to those
windows is now effective. Event processing begins, and the registered display callback is triggered.
Once this loop is entered, it is never exited.
Aspect Ratio and View ports: void glViewport(Glint x, Glint y, Glsizei w, Glsizei
17
h)
(x,y)-Lower left corner of view port, w:h is the aspect ratio
 glFlush forces all such buffers to be emptied and the OpenGL functions to be
processed
 This is simply a routine to force execution of our OpenGL functions, which
are stored by computer systems in buffers in different locations, depending on
how OpenGL is implemented. On a busy network, for example, there could
be delays in processing some buffers.
Window size and window position
OpenGL syntax

 Functions:
glFunction: glBegin, glClear, glVertex, …
 Constants:
GL_CONSTANT: GL_2D, GL_LINE
 Datatypes:
GLtype: GLbyte, GLint, GLfloat
Example
glClearColor(1.0,1.0,1.0,0.0);// Background color
glMatrixMode(GL_PROJECTION); // Set transformation
glLoadIdentity;
gluOrtho2D(0, 200, 0, 150);

glClear(GL_COLOR_BUFFER_BIT); // Clear background

glColor3f(1.0, 0.0, 0.0); // Set color to red

glBegin(GL_LINES);
glVertex2i(180, 15);
glVertex2i(10, 145);
glEnd;
glFlush;
// Draw line
// - first point
// - second point
// Ready with line
// Send
Header Files
 In all of our graphics programs, we will need to include the header file for the
OpenGL core library. For most applications we will also need GLU, and on many
systems we will need to include the header file for the window system. For
instance, with Microsoft Windows, the header file that accesses the WGL routines
is windows.h. This header file must be listed before the OpenGL and GLU
 header files because it contains macros needed by the Microsoft Windows
version of the OpenGL libraries. So the source file in this case would begin
with
 #include <windows.h>
 #include <GL/gl.h>
 #include <GL/glu.h>
Header file

 However, if we use GLUT to handle the window-managing operations, we do

not need to include gl.h and glu.h because GLUT ensures that these will be
included correctly. Thus, we can replace the header files for OpenGL and GLU
with
 #include <GL/glut.h>
 (We could include gl.h and glu.h as well, but doing so would be redundant
and could affect program portability.) On some systems, the header files for
OpenGL and GLUT routines are found in different places in the filesystem. For
instance,
 on Apple OS X systems, the header file inclusion statement would be
 #include <GLUT/glut.h
The following is a main program that works for most graphics applications
#include <GL/glut.h>

 void display(void)
 {
 glClear( GL_COLOR_BUFFER_BIT);
 glColor3f(1.0, 0.0, 0.0);
 glBegin(GL_LINES);
 glVertex3f(2.0, 4.0, 0.0);
 glVertex3f(8.0, 4.0, 0.0);
 glEnd();
 glFlush();
 }

24
The following is a main program that works for most graphics applications
#include <GL/glut.h>
void main(int *argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow(“ Sample program”);
glutdisplayFunc(display);
myinit();
glutMainLoop();
}
25
Example
Example 3D

Aim: Draw two rectangular boxes

1. Set up viewing transformation

2. Specify the colors
3. Draw the objects
Example 3D
// Set up viewing transformation

glViewport(0, 0, 500, 500); // Select part of window

glMatrixMode(GL_PROJECTION); // Set projection

glLoadIdentity();
glFrustum(-1.0, 1.0, -1.0, 1.0, 4.0, 20.0);

glMatrixMode(GL_MODELVIEW); // Set camera

glLoadIdentity();
gluLookAt(3.0, 6.0, 5.0, - eye point
1.0, 0.0, 0.0, - center point
0.0, 0.0, 1.0); - up axis
Example 3D
// Clear background

glClearColor(1.0,1.0,1.0,0.0);// Background color

glClear(GL_COLOR_BUFFER_BIT); // Clear background

// Set color

glColor3f(0.0, 0.0, 0.0); // Set color to black

Example 3D

// Draw two rectangular boxes

glutWireCube(1.0); // unit box around origin

glTranslatef(2.0, 0.0, 0.0); // move in x-direction

glRotatef(30, 0.0, 0.0, 1.0); // rotate 30 degrees
around z-axis
glScalef(1.0, 1.0, 2.0); // scale in z-direction

glutWireCube(1.0); // translated, rotated, scaled box

Example 3D

glutWireCube(1.0); // unit box around origin

glTranslatef(3.0, 0.0, 0.0); // move in x-direction

glRotatef(30, 0.0, 0.0, 1.0); // rotate 30 degrees
around z-axis
glScalef(1.0, 1.0, 2.0); // scale in z-direction

glutWireCube(1.0); // translated, rotated, scaled box

Note:
• Objects are drawn in the current local axis-frame;
• With transformations this frame can be changed.