1

ONE DAY NATIONAL SEMINAR

ON

COMPUTER
GRAPHICS
IES COLLEGE OF ENGINEERING
Adri Jovin J.J.
Assistant Professor
Department of Information Technology
SRI RAMAKRISHNA INSTITUTE OF TECHNOLOGY

OUTLINE

Basics of Computer Graphics

Geometry
+
Principles of Engineering Graphics
+
Mapping with Display Device
Computing Classification System
CCS Computing Methodologies Computer Graphics

What is Computer Graphics

The term computer graphics
describes any use of computers to
create and manipulate images.
can be two- or threedimensional
has a wide range of application

Computer Aided Design

Presentation Graphics

Computer Art

Entertainment

Education and Training

10

Visualization

11

Image Processing

12

Graphical User Interface

13

Graphics Devices and

Output Primitives

14

Raster Scan Displays

15

Architecture

16

Random Scan Displays

17

Architecture

18

Color CRT Monitor

19

Color CRT Monitor

20

Flat Panel Displays

21

Input Devices

22

Trackball

23

Space ball

24

Joystick

25

Image Scanner

26

Touch Panel

27

Light Pen

28

Points and Lines

setpixel(x,y) load a specified color point in the location

specified by x and y
getpixel(x,y) retrieve the current frame buffer intensity

29

Line drawing algorithms

y m.x c
y 2 y1
m
x 2 x1
y
x
m

c y1 m x1

y mx

30

DDA Algorithm
Digital Differential Analyzer
Consider positive slope and the slope
is less than or equal to 1.
We sample at unit x interval
y k 1 y k m

For lines with positive slope, greater

than 1, the roles of x and y are
1
reversed
xk 1 xk
m

31

DDA Algorithm (Contd..)

If the process start from right end
xwe
1have
point,
Therefore

y k 1 y k m

Similarly, for slope greater than 1,

1
xk 1 xk
m

32

Bresenham Line Drawing Algorithm

33

2D Transformation - Translation

34

2D Transformation - Translation

P P T

35

2D Transformation - Rotation

P R.P
cos
R
sin

sin

cos

36

2D Transformation Uniform Scaling

sx
x
y 0

0
.

sy

P S .P

37

2D Transformation Differential
Scaling

38

2D Transformation Reflection

1 0 0
0 1 0

0 0 1

39

2D Transformation Shear

1 sh x
0
1

0
0

x x sh x . y

y y

40

Composite 2D Transformation

41

Line Clipping

42

Line Clipping

43

Polygon Clipping

44

3D Concepts and Object

Representations

45

3D Display Methods
Parallel Projection
Perspective Projection
Depth Cueing
Visible Line and Surface Identification

46

Parallel Projection

47

Perspective Projection

48

Depth Cueing

49

Visible Line and Surface Identification

50

Workstation
Transformation

Device
Coordinates

Viewing and
Projection
Transformation

Projection
Coordinates

Modeling
Transformation

World
Coordinates

Modeling
Coordinates

3D Graphic Packages

51

3D Object Representations
Boundary representations (B-reps)
describe a three-dimensional object as a set
of surfaces that separate the object interior
from the environment.

Space-partitioning representations
used to describe interior properties, by
partitioning the spatial region containing an
object into a set of small, non-overlapping,
contiguous solids (usually cubes).

52

Polygon Surfaces
most commonly used boundary presentation
set of surface polygons enclose the object
interior
Used in most graphics systems
simplifies and speeds up the surface rendering
and display of objects

53

Polygon Tables

54

Plane Equations
Ax + By + Cz + D = 0, where (x,y,z) is any point
on the plane.

1 y1
A 1 y2
1 y3

x1
C x2
x3

z1
z2
z3

y1 1
y2 1
y3 1

x1 1 z1
B x2 1 z 2
x3 1 z 3
x1
D x2

y1
y2

z1
z2

x3

y3

z3

55

Polygon Meshes

56

Quadric Surfaces
Second Degree equations
Sphere

Ellipsoid

57

Quadric Surfaces (Contd.)

Torus

58

Super Quadrics
Super ellipse

59

Super Quadrics
Superellipsoid

60

Blobby Objects
Metaball Model

Soft Object Model

61

Spline Representations
Interpolation Model

Approximation Model

62

Parametric Continuity
Zero-order
Means simply that the curve meets

First order
The first derivatives of two adjoining curve functions are equal (or)
the tangents are shared

Second order
Both the first order and the second order derivatives of two
adjoining curve functions are equal

63

Bezier Surfaces

64

B-Spline Curves and Surfaces

B- Spline Curves

65

B-Spline surfaces

66

NURBS
Non-uniform Rational B-Spline
Use of non-uniform knot-vector
representations for constructing
rational B-splines

67

Color Models

68

RGB Color Model

Based on tristimulus theory of vision
eyes perceive color through the stimulation of three
visual pigments in the cones of the retina
peak sensitivity at wavelengths of about 630 nm (red),
530 nm (green), and 450 nm (blue)

Represented as a unit cube defined on R, G, B

axes
Color Ck = RR + GG + BB

69

RGB Color Model (Contd..)

"Cie Chart with sRGB gamut by spigget" by Spigget - Own

work. Licensed under Creative Commons Attribution-Share
Alike 3.0 via Wikimedia Commons http://commons.wikimedia.org/wiki/File:Cie_Chart_with_sR
GB_gamut_by_spigget.png#mediaviewer/File:Cie_Chart_wi
th_sRGB_gamut_by_spigget.png

70

YIQ Color Model

National Television System Committee (NTSC)
color model for forming the composite video
signal

71

YIQ Color Model (Contd)

"YIQ IQ plane" by Tonyle - Own work. Licensed

under Creative Commons Attribution-Share
Alike 3.0 via Wikimedia Commons http://commons.wikimedia.org/wiki/File:YIQ_IQ
_plane.svg#mediaviewer/File:YIQ_IQ_plane.sv
g

72

CMY Color Model

Defined with the primary colors cyan, magenta,
and yellow
Useful for describing color output to hard-copy
devices

73

CMY Color Model (Contd)

74

HSV Color Model

Color parameters in this model are hue ( H ) ,
saturation( S ) and value( V )
3D representation is derived from RGB Cube.

75

Animations

76

Animation Design Steps

Storyboard Layout
Object Definitions
Keyframe Specification
Generation of in-between frames

77

Storyboard
Storyboard is an outline of the action
Defines the motion sequence as a set of
basic events that are to take place

78

Object Definition
Object definition is given for each participant in
the action
Basic shapes, such as polygons or splines
Associated movements for each object are
specified along with the shape.

79

Keyframe
Keyframe is a detailed drawing of the scene at a
certain time in the animation sequence
Each object is positioned according to the time
for that frame

80

In-betweens
In-betweens are the intermediate frames
between the key frames
Determined by the media to be used to display
the animation
Film : 24 fps
Graphics Terminals : 30 to 60 fps

81

Other Tasks
Motion Verification
Editing and Production
Synchronization of Sound Track

82

General Computer Animation

Some steps in the development of an animation
sequence are well-suited to computer solution.

Object Manipulation and Rendering

Camera Motions ( Zooming, Tilting etc..)
Generation of In-betweens
Store and Manage Object Database

83

Raster Animations
On raster systems, we can generate real-time
animation in limited applications using raster
operations.
Simple 2D/ 3D transformations
Color Table Transformation

84

Key-frame Systems
Morphing
Transformation of object shapes from one form to another

85

Morphing

86

Morphing

87

Graphics Processing Unit

(GPU)

88

Graphics Processing Unit (GPU)

Also known as Visual Processing Unit
Designed to rapidly manipulate and alter memory to
accelerate the creation of images in a frame buffer
intended for output to a display
Used in embedded systems, mobile phones, personal
computers, workstations, and game consoles
Popularized by NVIDIA in 1999, who marketed the
GeForce 256 as "the world's first GPU"

89

Graphics Processing Unit (GPU)

90

91

OpenGL
Developed by Silicon Graphics in early 90s
Most widely-used open graphics standard in
the world
Supports both 2D and 3D Graphics APIs

92

OpenGL (Contd..)
OpenGL applications use the window
systems window, input, and event
mechanism
GLU supports quadrics, NURBS, complex
polygons, matrix utilities, and more

93

Playing the OpenGL Game

glutInit()
Used to initialize the GLUT library
Usage:
void glutInit(int *argcp, char **argv);
Description:
Initialize the GLUT library and negotiate a session with the window
system.

94

Playing the OpenGL Game..

glutInitWindowSize()
Set the initial window size
Usage:
void glutInitWindowSize(int width, int height);
Description:
Windows created by glutCreateWindow will be requested to be
created with the current initial window size.

95

Playing the OpenGL Game..

glutInitWindowPosition()
Set the initial window position
Usage:
void glutInitWindowPosition(int x, int y);
Description:
Windows created by glutCreateWindow will be requested to be
created with the current initial window position.

96

Playing the OpenGL Game..

glutInitDisplayMode()
Set the initial window display mode.
Usage:
void glutInitDisplayMode(unsigned int mode);
mode - Display mode, normally the bitwise OR-ing of GLUT
display mode bit masks
Description:
Used when creating top-level windows, subwindows, and overlays
to determine the OpenGL display mode for the to-be-created
window or overlay.

97

Playing the OpenGL Game..

glutCreateWindow()
Creates a top-level window.
Usage:
int glutCreateWindow(char *name);
Description:
Creates a top-level window. The intent is that the window system will
label the window with the name.

98

Playing the OpenGL Game..

glutDisplayFunc()
Sets the display callback for the current window.
Usage:
void glutDisplayFunc(void (*func)(void));
Description:
Sets the display callback for the current window.
When GLUT determines that the normal plane for the window needs
to be redisplayed, the display callback for the window is called.
Before the callback, the current window is set to the window
needing to be redisplayed and (if no overlay display callback is
registered) the layer in use is set to the normal plane. The display
callback is called with no parameters.

99

Playing the OpenGL Game..

glutMainLoop()
Enters the GLUT event processing loop.
Usage:
void glutMainLoop(void);
Description:
Enters the GLUT event processing loop.
This routine should be called at most once in a GLUT program.
Once called, this routine will never return.

100

Playing the OpenGL Game..

glClearColor()
Specify clear values for the color buffers.
Usage:
void glClearColor(GLclampf red, GLclampf green, GLclampf blue,
GLclampf alpha);
Description:
Specifies the red, green, blue, and alpha values used by glClear to
clear the color buffers

101

Playing the OpenGL Game..

glClearColor()
Specify which matrix is the current matrix.
Usage:
void glMatrixMode(GLenum mode);
Description:
Sets the current matrix mode. mode can assume one of four
values:
GL_MODELVIEW
GL_PROJECTION
GL_TEXTURE
GL_COLOR

102

Playing the OpenGL Game..

glClear()
Clear buffers to preset values.
Usage:
void glClear(GLbitfield mask);
Description:
sets the bitplane area of the window to values previously selected
by glClearColor, glClearIndex, glClearDepth, glClearStencil, and
glClearAccum. Multiple color buffers can be cleared simultaneously
by selecting more than one buffer at a time using glDrawBuffer.

103

Playing the OpenGL Game..

glColor3f()
Set the current color.
Usage:
void glColor3f(GLfloat red, GLfloat green, GLfloat blue);
Description:
Current color values are stored in floating-point format, with
unspecified mantissa and exponent sizes.

104

Playing the OpenGL Game..

glPointSize()
Specify the diameter of rasterized points.
Usage:
void glPointSize(GLfloat size);
Description:
Specifies the rasterized diameter of both aliased and antialiased
points.

105

Playing the OpenGL Game..

glFlush()
Force execution of GL commands in finite time.
Usage:
void glFlush( void);
Description:
Empties all of these buffers, causing all issued commands to be
executed as quickly as they are accepted by the actual rendering
engine.

106

Playing the OpenGL Game..

glBegin() and glEnd()
Delimit the vertices of a primitive or a group of like primitives.
Usage:
void glBegin(GLenum mode);
void glEnd( void);
Description:
delimit the vertices that define a primitive or a group of like
primitives.

107

Simple OpenGL with C++

#include <GL/glut.h>
int main(int argc, char **argv)
#include <iostream>
{
#include <conio.h>
glutInit(&argc,argv);
void sample()
glutInitWindowSize(400,400);
{
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glClearColor(1.0,1.0,1.0,0.0);
glutInitWindowPosition(0,0);
glMatrixMode(GL_PROJECTION);
glutCreateWindow(Sample Window");
gluOrtho2D(0,300,0,300);
glutDisplayFunc(sample);
glClear(GL_COLOR_BUFFER_BIT); glutMainLoop();
glColor3f(1.0,1.0,0.0);
return 0;
glPointSize(20);
}
glBegin(GL_POINTS);
glVertex2i(10,20);
glEnd();
glFlush();
}

108

Thank you!!!

109

???