Computer Graphics

COMPUTER
GRAPHICS
Adri Jovin J.J.
Assistant Professor
Department of Information Technology
SRI RAMAKRISHNA INSTITUTE OF TECHNOLOGY
1
ONE DAY NATIONAL SEMINAR
ON
IES COLLEGE OF ENGINEERING

OUTLINE
2
Basics of Computer Graphics
3D Concepts
Color Profiles & Animation
GPU
OpenGL

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

What is Computer Graphics
4
• The term computer graphics describes any
use of computers to create and manipulate
images.
• can be two- or three-dimensional
• has a wide range of application

Graphics Devices and
Output Primitives
13

Points and Lines
28
• 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

Line drawing algorithms
29
cxmy  .
12
12
xx
yy
m


 11 xmyc 
m
y
x

 xmy 

DDA Algorithm
30
• Digital Differential Analyzer
• Consider positive slope and the slope is less
than or equal to 1.
• We sample at unit x interval
• For lines with positive slope, greater than 1,
the roles of x and y are reversed
myy kk 1
m
xx kk
1
1 

DDA Algorithm (Contd..)
31
• If the process start from right end point, we
have
• Therefore
• Similarly, for slope greater than 1,
myy kk 1
1x
m
xx kk
1
1 

Bresenham Line Drawing Algorithm
32

2D Transformation - Translation
33
y
x
P
P

2D Transformation - Translation
34
y
x
y
x
TPP 

2D Transformation - Rotation
35
y
x

P
P
PRP .





 



cossin
sincos
R

2D Transformation – Uniform Scaling
36




















y
x
s
s
y
x
y
x
.
0
0
PSP .

2D Transformation – Differential
Scaling
37

2D Transformation – Reflection
38
x
y
Original Position
Reflected Position
1
2 3
1’
2’ 3’











100
010
001

2D Transformation – Shear
39
x
y
(0,1) (1,1)
(1,0)(0,0) x
y
(1,0)(0,0)
(2,1) (3,1)










100
010
01 xsh yshxx x.
yy 

Composite 2D Transformation
40
(a)
Original Position of the
Object and Pivot Point
(b)
Translation of object to
take the pivot point to
origin
(c)
Rotation about the origin
(d)
Translation of object to
original pivot point

Line Clipping
41
1001 1000 1010
0001
0000
Window
0010
0101 0100 0110

Line Clipping
42
P1
P2
P’2
P’’2
P’1
P4
P3
P’3
Window

Polygon Clipping
43
Original Polygon Clip Left Clip Right
Clip Bottom Clip Top

3D Concepts and Object
Representations
44

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

Visible Line and Surface Identification
49

3D Graphic Packages
50
Modeling
Transformation
Viewing and
Projection
Transformation
Workstation
Transformation
Modeling
Coordinates
World
Coordinates
Projection
Coordinates
Device
Coordinates

3D Object Representations
51
• 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).

Polygon Surfaces
52
• 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

Plane Equations
54
• Ax + By + Cz + D = 0, where (x,y,z) is any point
on the plane.
33
22
11
1
1
1
zx
zx
zx
B 
33
22
11
1
1
1
zy
zy
zy
A 
1
1
1
33
22
11
yx
yx
yx
C 
333
222
111
zyx
zyx
zyx
D 

Quadric Surfaces
56
• Second Degree equations
• Sphere
• Ellipsoid

Quadric Surfaces (Contd.)
57
• Torus

Super Quadrics
58
• Super ellipse

Super Quadrics
59
• Superellipsoid

Blobby Objects
60
• Metaball Model
• Soft Object Model

Spline Representations
61
• Interpolation Model
• Approximation Model

Parametric Continuity
62
• 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

B-Spline Curves and Surfaces
64
• B- Spline Curves

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

RGB Color Model
68
• 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

RGB Color Model (Contd..)
69
"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_sRGB_gamut_
by_spigget.png#mediaviewer/File:Cie_Chart_with_sRGB_gamut_by_spig
get.png

YIQ Color Model
70
• National Television System Committee (NTSC)
color model for forming the composite video
signal

YIQ Color Model (Contd…)
71
"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.s
vg#mediaviewer/File:YIQ_IQ_plane.svg

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

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

Animation Design Steps
76
• Storyboard Layout
• Object Definitions
• Keyframe Specification
• Generation of in-between frames

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

Object Definition
78
• 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.

Keyframe
79
• 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

In-betweens
80
• 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

Other Tasks
81
• Motion Verification
• Editing and Production
• Synchronization of Sound Track

General Computer Animation
82
• 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

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

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

Graphics Processing Unit
(GPU)
87

Graphics Processing Unit (GPU)
88
• 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"

Graphics Processing Unit (GPU)
89

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

OpenGL (Contd..)
92
• OpenGL applications use the window
system’s window, input, and event
mechanism
• GLU supports quadrics, NURBS, complex
polygons, matrix utilities, and more

Playing the OpenGL Game
93
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.

Playing the OpenGL Game..
94
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
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
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
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
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
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
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
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
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
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
glPointSize()
Specify the diameter of rasterized points.
Usage:
void glPointSize(GLfloat size);
Description:
Specifies the rasterized diameter of both aliased and antialiased
points.

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

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

Computer Graphics

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Computer Graphics (20)

More from Adri Jovin (20)

Recently uploaded (20)

Computer Graphics