Chapter One

Prepered By:Yeshanew A.
Interactive computer graphics 1

Beginnings of modern interactive graphics attributed to Ivan
Sutherlands doctoral work
presented work at Spring Joint Computer Conference in 1963
in the form of a movie.
He developed the Sketchpad drawing system
Prepered By:Yeshanew A. Interactive computer graphics 2

He formulated the ideas of
display primitives (lines, polygons, arcs, characters)
constraints on primitives
developed algorithms for dragging, rubber banding,
transforming (rotating, scaling, translating)
introduced data structures for storing hierarchies built up via
easy replication of standard components
He is considered to be the founder of the computer
graphics field

PCs in the 80s
costs decrease drastically
built-in raster displays
bitmap graphics used

First graphics standard was GKS (Graphics Kernel System)
(1985)
like Core but 2D
PHIGS (Programmers Hierarchical Interactive Graphics
System) was a 3D extension of GKS became an
ANSI(American National Standards Institute) standard in
1988
OpenGL was introduced by SGI in 1992
OpenGL is the Assembler Language of Computer
Graphics
has portable, interactive 2D and 3D graphics applications
low-level, vendor-neutral software interface
broad platform accessibility in the industry
3D Modeling:
A way to describe the 3D world or scene, which is
composed of mathematical representations of 3D
objects called models.
3D Rendering:
A mechanism responsible for producing a 2D
image from 3D models.

Simple 3D objects can be modeled using
mathematical equations operating in the 3-
dimensional Cartesian coordinate system.
Example:
the equation x2 + y2 + z2 = r2
is a model of a perfect
sphere with radius r.

Computer Aided Design (CAD)
Presentation Graphics
Computer Art
Entertainment (animation, games, )
Education & Training
Visualization (scientific & business)
Image Processing
Weather Maps
Cartography
Simulation and modeling
Graphical User Interfaces

Used in design of buildings, automobiles, aircraft,
watercraft, spacecraft, computers, textiles & many
other products
Objects are displayed in wire frame outline form
Software packages provide multi-window environment
Interactive computer graphics Prepered By:Yeshanew A. 9

Continue
Graphics design package provides standard shapes (useful for
repeated placements)
Animations are also used in CAD applications
Realistic displays of architectural design permits simulated
walk through the rooms (virtual -reality systems)

Used to produce illustrations for reports or generate slides for
use with projectors
Commonly used to summarize financial, statistical,
mathematical, scientific, economic data for research reports,
managerial reports & customer information bulletins
Examples : Bar charts, line graphs, pie charts, surface graphs,
time chart

Used in fine art & commercial art
Includes artists paintbrush programs, paint packages, CAD
packages and animation packages
These packages provides facilities for designing object
shapes & specifying object motions.
Examples : Cartoon drawing, paintings, product
advertisements, logo design

Electronic painting
Picture painted electronically on
a graphics tablet (digitizer) using a stylus
Cordless, pressure sensitive stylus
Morphing
A graphics method in which one object is
transformed into another

Movie Industry
Used in motion pictures, music
videos, and television shows.
Used in making of cartoon
animation films

Game Industry
Focus on interactivity
Cost effective solutions

Computer generated models of physical, financial and
economic systems are used as educational aids.
Models of physical systems, physiological systems, population
trends, or equipment such as color-coded diagram help
trainees understand the operation of the system

Specialized systems used
for training applications
simulators for practice
sessions or training of ship
captains
aircraft pilots
heavy equipment operators
air traffic-control personnel

Flight simulators, computer aided instruction, etc.

Flight simulators, computer aided instruction, education etc.

Scientific Visualization
Producing graphical representations for scientific,
engineering, and medical data sets

Continue
Business Visualization is used in connection with data sets
related to commerce, industry and other non-scientific areas
Techniques used- color coding, contour plots, graphs, charts,
surface renderings & visualizations of volume interiors.
Image processing techniques are combined with computer
graphics to produce many of the data visualizations

CG- Computer is used to create a picture
Image Processing applies techniques to modify or interpret
existing pictures such as photographs and TV scans
Medical applications
Picture enhancements
Tomography(a technique for displaying a cross section
through a human body or other solid object using X-rays or
ultrasound.)
Simulations of operations
Ultrasonics(the science and application of ultrasonic waves)
nuclear medicine scanners
applications of image processing
Improving picture quality
Machine perception of visual information (Robotics)

Continue

Major component Window manager (multiple-window
areas)
To make a particular window active, click in that window
(using an interactive pointing device)
Interfaces display menus & icons
Icons graphical symbol designed to look like the processing
option it represents
Advantages of icons less screen space, easily understood
Menus contain lists of textual descriptions & icons

A set of libraries that provide programmatically access to some
kind of graphics 2D functions.
Types
GKS-Graphics Kernel System first graphics package
accepted by ISO(International Organization for
Standardization) & ANSI
PHIGS (Programmers Hierarchical Interactive Graphics
Standard)-accepted by ISO & ANSI (American National
Standards Institute)
PHIGS + (Expanded package)
Silicon Graphics GL (Graphics Library)
Open GL
Pixar Render Man interface
Postscript interpreters
Painting, drawing, design packages
The display systems are often referred to as Video Monitor or
Video Display Unit (VDU).
The primary output device in a graphical system is the video
monitor.
The main element of a video monitor is the Cathode Ray Tube
(CRT),
Video Display Devices
Cathode Ray Tube (CRT)
Liquid Crystal Display (LCD)
Plasma panels
Thin-film electroluminescent display
Light-emitting diodes (LED)

Hard-Copy Devices
Ink-jet printer
Laser printer
Film recorder
Electrostatic printer
Pen plotter

Used in small systems, such as calculators, laptop
computers.
Produce a picture by passing polarized light (from the
surrounding or from an internal light source) through a
liquid-crystal material that can be aligned to either block or
transmit the light.
Liquid crystal: These compounds have a crystalline
arrangement of molecules, yet they flow like a liquid.

Two glass plates, each containing a light polarizer at right
angles to the other plate, sandwich the liquid crystal materials.
Rows of horizontal transparent conductor & columns of
vertical conductors (put into glass plates)
Polarized light passing through the material is twisted so that
it will pass through the opposite polarizer.
The light is then reflected back to the viewer.

not twisted.

On State
Off State

The screen is represented by a 2D array of locations called
pixels.
The convention in these notes will follow that of OpenGL,
placing the origin in the lower left corner, with that pixel being
at location (0, 0).
Be aware that placing the origin in the upper left is another
common convention.
Color data is stored in a frame buffer. This is sometimes
called an image map or bitmap.
Frame buffer is a digital storage device
Video screen is analog device
Scan conversion is the process of converting basic, low level

objects into their corresponding
pixel map representations Prepered By:Yeshanew A. Interactive computer graphics 39
The video system which is used to display interactive
computer graphics consists of the following:
A video screen such as the monitor or television which can be
used display both text and graphics
A video adapter which is a special circuit board. This board
functions as a display controller which acts as an intermediate
between the microprocessor and the video unit
A special memory called the video memory or the frame
buffer in which the images are stored as a matrix
The pattern of the image to be displayed on the screen is
stored in frame buffer in digital form
The frame buffer is a portion the computer memory, which
contains the pattern of the picture in a digital form
The picture image is stored in the frame buffer as binary digit
patterns, which is of matrix form
Black and white images are stored as a sequence of 1s and 0s

Output device
Input devices
Image formed in FB

The Open Graphics Language

Provides low level, platform independent graphics
Allows non-standard extensions
Does not provide windowing facilities (we use GLUT for that)
Is a largely an immediate mode graphics library
We would have to write our own higher level retained mode
library

Application Programming Interface (API) for cross-platform
development of 3D graphics applications.
Implementations available for all major Operating Systems
and hardware platforms.
Support for hardware accelerated 3D rendering.

How to define a triangle:
glBegin (GL_TRIANGLES);
glVertex (0,0,0);
glVertex (1,1,0);
glVertex (2,0,0);
glEnd ();

OpenGL uses only a very small number of primitives:
Points,
Lines
Polygons
Bitmaps/images
Three primitives are then passed through:
The lighting/shading algorithms
The 3D viewing algorithms
And finally rasterisation(scan conversion)

Geometric primitives
points, lines and polygons
Image Primitives
images and bitmaps
separate pipeline for images and geometry
linked through texture mapping
Rendering depends on state
colors, materials, light sources, etc.

OpenGL
GL: graphic library
a software interface to graphics hardware.
This interface consists of about 150 distinct
commands.

GLU (OpenGL Utility Library)
GLU is a standard part of every OpenGL
implementation.
A sophisticated library that provides the features could be built
on top of OpenGL.
Provides many modeling features, such as
quadric surfaces and
NURBS (Non-Uniform Rational B-Spline) curves and surfaces.

GLUT (OpenGL Utility Toolkit)
a window system independent toolkit for writing
OpenGL programs.
It implements a simple windowing application
programming interface (API) for OpenGL.
GLUT makes it much easier to learn about and
explore OpenGL Programming.
Controlling the IO layer
input: mouse and keyboard
output: visual windows

For all OpenGL applications, we need to include
the gl.h header file in every file.
Almost all OpenGL applications use GLU, which
requires inclusion of the glu.h header file. So

almost every OpenGL source file begins with
#include <GL/gl.h>
#include <GL/glu.h>
If we are using GLUT for managing our window
manager tasks, we should include

#include <GL/glut.h>
Note that glut.h includes gl.h and glu.h
automatically

Take a look at main.cpp.
include directives for OpenGL appear after the #include
directives for the normal C++ include files.
CORRECT ERROR

OpenGL Utilities Toolkit
Provides us with a basic window and interaction
management system
glutInit(&argc, argv): initialise GLUT
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB):
allows us to set up the way OpenGL will run
Can create and position, size and name a window
Callbacks provide event(interrupt) driven interaction with
keyboard, mouse, display and resizing
Callback functions must receive the specified parameters

The basic command is glVertex#@
# defines the number of coordinates we will give
generally 2, 3, or 4
@ defines what type the arguments are. The most
common type
i for int (GLint)
f for float (GLfloat)
d for double (GLdouble)
Other OpenGL commands such as glColor#@,
glRasterPos#@, glNormal#@ also have this syntax
An additional v may be specified at the end if we want to
pass an array (vector)

The way the primitives are drawn on screen is determined by
the drawing mode
glBegin(mode); and glEnd(); must always enclose calls to
glVertex#@
Glflush() causes OpenGL to flush to the screen buffer draw
the image
The drawing mode can be
GL_POINTS
GL_LINES
GL_LINE_STRIP
GL_TRIANGLES
GL_QUADS
GL_POLYGON

Before drawing, clear the screen buffer using glClear with
option GL_COLOR_BUFFER_BIT
Set the background colour using glClearColor(0.0, 0.0, 0.0,
0.0)
Set the color of the vertices using glColor#@ - note each
vertex can be a different colour
We always use RGB colours, for different types we have
f and d take 0.0 to 1.0
ub takes 0 to 255

The way polygons are drawn can be set using glPolygonMode
which applies to either face(GL_FRONT or GL_BACK) and
can be:
GL_POINT
GL_LINE
GL_FILL

Lines can be styled using glLineWidth(Glfloat width), and
glLineStipple(Glint factor, Glushort pattern)
Points can be changed in size using glPointSize(Glfloat size)
This is really for basic 2D drawing

Points
Attributes: Size, Color.
Setting point size: glPointSize(p);

Specifying a set of points: glBegin(GL_POINTS);
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glEnd();

Lines
Attributes: Color, Thickness, Type
Setting line thickness: glLineWidth(p);

Specifying a set of lines: glBegin(GL_LINES);
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glEnd();

Polylines (open)
A set of line segments joined end to end.
Setting line thickness: glLineWidth(p);

An open polyline: glBegin(GL_LINE_STRIP);
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glEnd();

Polylines (closed)
A polyline with the last point connected to the first
point .
Note: A closed polyline cannot be filled.
A closed polyline: glBegin(GL_LINE_LOOP);

glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glEnd();

Polygons
A set of line segments joined end to end.
Attributes: Fill color, Thickness, Fill pattern
Note: Polygons can be filled.
A Polygon: glBegin(GL_POLYGON);
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glEnd();

Headers Files
#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
Libraries
Enumerated Types
OpenGL defines numerous types for compatibility
GLfloat, GLint, GLenum, etc.

Application Structure
Configure and open window
Initialize OpenGL state
Register input callback functions
render
resize
input: keyboard, mouse, etc.
Enter event processing loop

void main( int argc, char** argv )
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutCreateWindow( argv[0] );
init();
glutDisplayFunc( display );
glutReshapeFunc( resize );
glutKeyboardFunc( key );
glutIdleFunc( idle );
glutMainLoop();
}

Routine to call when something happens
window resize or redraw
user input
animation
Register callbacks with GLUT
glutIdleFunc( idle );
glutKeyboardFunc( keyboard );

Do all of your drawing here
void display( void )
{
glClear( GL_COLOR_BUFFER_BIT );
glBegin( GL_TRIANGLE_STRIP );
glVertex3fv( v[0] );
glEnd();
glutSwapBuffers();
}

Geometric Primitives
Managing OpenGL State
OpenGL Buffers

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
void drawRhombus( GLfloat color[] )
{
glBegin( GL_QUADS );
glColor3fv( color );
glVertex2f( 0.0, 0.0 );
glVertex2f( 1.0, 0.0 );
glVertex2f( 1.5, 1.118 );
glVertex2f( 0.5, 1.118 );
glEnd();
}

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


Chapter One

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter One

Uploaded by

Copyright:

Available Formats

Prepered By:Yeshanew A.

Interactive computer graphics 1

Prepered By:Yeshanew A. Interactive computer graphics 2

Prepered By:Yeshanew A. Interactive computer graphics 3

Prepered By:Yeshanew A. Interactive computer graphics 4

Prepered By:Yeshanew A. Interactive computer graphics 6

Prepered By:Yeshanew A. Interactive computer graphics 7

Prepered By:Yeshanew A. Interactive computer graphics 8

Interactive computer graphics Prepered By:Yeshanew A. 9

Prepered By:Yeshanew A. Interactive computer graphics 11

Prepered By:Yeshanew A. Interactive computer graphics 12

Prepered By:Yeshanew A. Interactive computer graphics 14

Interactive computer graphics Prepered By:Yeshanew A. 16

Prepered By:Yeshanew A. Interactive computer graphics 18

Prepered By:Yeshanew A. Interactive computer graphics 20

Prepered By:Yeshanew A. Interactive computer graphics 21

Interactive computer graphics Prepered By:Yeshanew A. 22

Prepered By:Yeshanew A. Interactive computer graphics 23

Prepered By:Yeshanew A. Interactive computer graphics 24

Prepered By:Yeshanew A. Interactive computer graphics 25

Prepered By:Yeshanew A. Interactive computer graphics 26

Prepered By:Yeshanew A. Interactive computer graphics 27

Prepered By:Yeshanew A. Interactive computer graphics 28

Prepered By:Yeshanew A. Interactive computer graphics 29

Prepered By:Yeshanew A. Interactive computer graphics 32

Prepered By:Yeshanew A. Interactive computer graphics 33

Interactive computer graphics Prepered By:Yeshanew A. 34

Interactive computer graphics Prepered By:Yeshanew A. 35

Interactive computer graphics Prepered By:Yeshanew A. 36

Prepered By:Yeshanew A. Interactive computer graphics 37

Video screen is analog device

Scan conversion is the process of converting basic, low level

Prepered By:Yeshanew A. Interactive computer graphics 41

Prepered By:Yeshanew A. Interactive computer graphics 42

Prepered By:Yeshanew A. Interactive computer graphics 43

Prepered By:Yeshanew A. Interactive computer graphics 44

Prepered By:Yeshanew A. Interactive computer graphics 45

Prepered By:Yeshanew A. Interactive computer graphics 46

Prepered By:Yeshanew A. Interactive computer graphics 47

Prepered By:Yeshanew A. Interactive computer graphics 48

Prepered By:Yeshanew A. Interactive computer graphics 49

Prepered By:Yeshanew A. Interactive computer graphics 50

Prepered By:Yeshanew A. Interactive computer graphics 51

requires inclusion of the glu.h header file. So

manager tasks, we should include

Prepered By:Yeshanew A. Interactive computer graphics 52

Prepered By:Yeshanew A. Interactive computer graphics 54

Prepered By:Yeshanew A. Interactive computer graphics 55

Prepered By:Yeshanew A. Interactive computer graphics 56

Prepered By:Yeshanew A. Interactive computer graphics 57

Prepered By:Yeshanew A. Interactive computer graphics 58

Prepered By:Yeshanew A. Interactive computer graphics 59

Prepered By:Yeshanew A. Interactive computer graphics 60

Setting point size: glPointSize(p);

Prepered By:Yeshanew A. Interactive computer graphics 61

Setting line thickness: glLineWidth(p);

Prepered By:Yeshanew A. Interactive computer graphics 62

Setting line thickness: glLineWidth(p);

Prepered By:Yeshanew A. Interactive computer graphics 63

Note: A closed polyline cannot be filled.

A closed polyline: glBegin(GL_LINE_LOOP);

Prepered By:Yeshanew A. Interactive computer graphics 64

Note: Polygons can be filled.

Prepered By:Yeshanew A. Interactive computer graphics 65