COMPUTER GRAPHICS AND VISUALIZATION

Module-1
Computer Graphics and OpenGL
Module – 1: Computer Graphics and OpenGL

What is Computer Graphics?

Graphics
Graphics

Computer Graphics

CG

Classification of CG

Based on Type of Object

Based on User Interaction

Based on Applications

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Application of Computer Graphics

Computer-aided drafting and design:

Simulation and animation for scientific visualization and entertainment:

Office automation and electronic publishing:

(Interactive) plotting in business, science and technology:

Cartography:

Process control:

Medical imaging :

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

User interfaces

Define the following terms

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

NonInterlaced

Interlaced display

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Video Display Devices

cathode-ray tube CRT

flat-panel

Refresh Cathode-Ray Tubes

refreshCRT.

heated metal cathode control grid

filament

Figure 1: Basic design of a magnetic-deflection CRT.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Figure 2: illustrates the delta-delta shadow-mask method, commonly used in color CRT systems.

Flat-Panel Displays

flat-panel emissive nonemissive

emissive emitters Plasma panels,
thin-film electroluminescent displays, and light-emitting diodes

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Nonemissive
liquid-crystal device
Plasma panels gas-discharge displays

Figure 3: Basic design of a plasma-panel display device. Figure 4: Basic design of a thin-film electroluminescent display device.

Thin-film electroluminescent displays

light-emitting diode

Liquid-crystal displays

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Random-Scan Displays

Figure 5: A random-scan system draws the component lines of an object in any specified order.

random-scan display

vector displays stroke-writing displays calligraphic displays

displaylist, refresh displayfile, vector file, display program.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Raster-Scan Systems

video controller display controller,

Video Controller

Figure 6: Raster systems. Architecture of a raster system with a fixed portion of the system memory reserved for the
frame buffer

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Figure 7:Basic video-controller refresh operations

Raster-Scan Display Processor

display processor,
graphics controller display coprocessor.

scan
conversion.

Figure 8: Architecture of a raster-graphics system with a display processor

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

(dashed, dotted, or solid),

run-length encoding

cell encoding

Three-Dimensional Viewing Devices

Figure 9: Operation of a three-dimensional display system using a vibrating mirror that changes focal length to match
the depths of points in a scene.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Applications of 3D viewing devices

Input Devices

Keyboards
keyboard

Mouse Devices
mouse

Trackballs and Spaceballs

trackball

spaceball,

Joysticks
Joystick

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

isometric joysticks,

Data Gloves
data glove

Digitizers
digitizer.

graphics tablet data tablet

Image Scanners
image scanner

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Touch Panels
Touch panels

Light Pens
Light pen

Voice Systems

voice system

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

3 GRAPHICS SOFTWARE

computer-graphics application programming interface

CG API

Coordinate Representations

F I G U R E 10 : Coordinate Representations

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Object Coordinates

World coordinates

Eye Coordinates:

Clip coordinates

Normalized device coordinates:

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Window or screen coordinates:

window-to-viewport mapping

Graphics Functions

Graphics output primitives:

Attributes:

Geometric transformations:

Viewing transformations:

Input functions

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Control operations:

Display-Window Management Using GLUT

#include<GL/glut.h>
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
glutInitWindowSize(400, 300);
glutInitWindowPosition(50, 100);
glutCreateWindow("An Example OpenGL Program");
glutDisplayFunc(display);
myinit();
glutMainLoop();
}

F I G U R E 11 : A 400 by 300 display window at position (50, 100) relative to the top-left corner of the video
display.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

argc argv

mode

glutInitDisplayMode GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH

glutInitWindowPosition(50, 100)

glutInitWindowSize (400, 300)

int glutCreateWindow(“An Example OpenGL Program”)

An Example OpenGL Program
glutMainLoop()

func

glutDisplayFunc()

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

A Complete OpenGL Program

#include <GL/glut.h>

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.
}

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.
}

F I G U R E 12: The display window and line segment produced by the example program.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

SPECIFYING A TWO-DIMENSIONAL WORLD-COORDINATE REFERENCE FRAME

IN OpenGL

FIGURE 1 glOrtho2D

gluOrtho2D
x y
gluOrtho2D

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

xmin ymin
xmax ymax

OpenGL POINT FUNCTIONS

glVertex* ( );

glVertex

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

glBegin glEnd glBegin

glEnd
glBegin GL POINTS

glBegin (GL_POINTS);
glVertex* ( );
glEnd ( );

glVertex
homogeneous-coordinate
homogeneous parameter h

x y
x y h

glVertex i s f
d

glVertex

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

FIGURE 14 glBegin (GL POINTS)

int point1 [ ] = {50, 100};

int point2 [ ] = {75, 150};
int point3 [ ] = {100, 200};

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

glBegin (GL_POINTS);
glVertex2iv (point1);
glVertex2iv (point2);
glVertex2iv (point3);
glEnd ( );

glBegin (GL_POINTS);
glVertex3f (-78.05, 909.72, 14.60);
glVertex3f (261.91, -5200.67, 188.33);
glEnd ( );
struct

class wcPt2D {
public:
GLfloat x, y;
};

wcPt2D pointPos;
pointPos.x = 120.75;
pointPos.y = 45.30;
glBegin (GL_POINTS);
glVertex2f (pointPos.x, pointPos.y);
glEnd ( );

OpenGL LINE FUNCTIONS

GL LINES

p1 p5

glBegin (GL_LINES);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

FIGURE 15
GL LINES
GL LINE STRIP
GL LINE LOOP

GL LINE STRIP polyline.

glBegin (GL_LINE_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );
GL LINE LOOP closed polyline.

glBegin (GL_LINE_LOOP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

OpenGL CURVE FUNCTIONS

FIGURE 3-15

OpenGL POINT-ATTRIBUTE FUNCTIONS

glColor glIndex

glPointSize (size) and

size
size

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

glBegin glEnd

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

OpenGL LINE-ATTRIBUTE FUNCTIONS

OpenGL Line-Width Function

glLineWidth (width);
width

OpenGL Line-Style Function

glLineStipple (repeatFactor, pattern);

pattern
on off

repeatFactor

pattern

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

glEnable (GL_LINE_STIPPLE);

glDisable (GL_LINE_STIPPLE);

FIGURE 16

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Digital Differential Analyzer (DDA) Algorithm

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

DDA Line Algorithm

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Bresenham’s Line Algorithm

F I G U R E 17: A section of the screen showing a pixel in column xk on the scanline yk to be plotted along a line segment
slope 0<m<1

F I G U R E 18: Vertical distances between pixel position and the line y coordinate at sampling position xk+1

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Bresenham’s line Drawing Algorithm for |m| < 1

Implementation of Bresenham Line drawing Algorithm

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

= 2 * dy - dx;

– 4 = 6 -

dy - dx

dy - dx

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Midpoint circle Algorithm

F I G U R E 19: Midpoint between candidate pixels at sampling position between along circular path

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Midpoint circle Algorithm

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

1 10 = -9 + 2(1) + 0 – 0 +1 = -6
2 10 = -6 + 2(2) + 0 – 0 +1 = -1
3 10 = -1 + 2(3) + 0 – 0 +1 = 6
4 9 = 6 + 2(4) + (9*9 – 10*10) – (9 - 10) +1 = -3
5 9 = -3 + 2(5) + 0 – 0 +1 = 8
6 8 = 8 + 2(6) + (8*8 – 9*9) –(8 – 9) +1 = 5
7 7 Algorithm terminate since (

Plot all the generated pixels positions with centre as (xc, yc) = (3, 4)

(x +xc, y+yc) (-x +xc, -y+yc) (-x +xc, y+yc) (x +xc, -y+yc)

(y +xc, x+yc) (-y +xc, -x+yc) (-y +xc, x+yc) (y +xc, -x+yc)

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

Implementation of Midpoint Circle Algorithm

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.

Module – 1: Computer Graphics and OpenGL

1.

2.

3.

4.

5.

6.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

C.K.SRINIVASA, Asso. Prof. Dept Of CS&E, BITM, BALLARI.