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.
