Computer Graphics

Dr. Julian Guerrero

August-December 2010
Computer Graphics

Topic 1.2
Graphics Libraries: Definition and visualization
of basic geometric objects, events, color,
lighting and texture
Images

Elements that make up a picture?

Output primitives

Points, lines, polylines, text, filled regions, raster
elements (pixels)

Vector vs. Raster images
Each has attributes: color, width, intensity…

Many images are eventually are displayed as

raster images
Vector Images

Polylines, text, filled regions
Images created with these primitives are defined by a
series of instructions that place each primitive and
specify their attributes

Different primitives may have different attributes

Advantages

May be coded in small programs, saves space

Disadvantages

Limited flexibility for use, as only attributes can be used as
control parameters
Elementary Drawing Tools

We can draw using primitives

For example:
 SetPixel(x, y, color)

Draw a point* at (x,y) using color

Alternate names: putPixel(), SetPixel(),
drawPoint()
 line(x1, x2)

Draw a straight line between point x1 and x2

drawLine(), Line()

* A point does not necessarily mean a pixel

Elementary Drawing Tools

Alternate approach: Introduce the concept

of current position (cp) as in a pen plotter

Elementary drawing functions;
moveTo(x,y)
lineTo(x,y)

Must keep track of cp – update it as we move

and draw
Elementary Drawing Tools

These commands draw an aligned square

Aligned: Each side is parallel to one of the axes

moveto(1,1) 2
lineto(2,1)
lineto(2,2) 1
lineto(1,2)
lineto(1,1)
moveto(0,0) (0,0) 1 2
Elementary Drawing Tools

For any given system, an enthusiastic

programmer (e.g. you) can develop a whole
toolkit of more complex functions using these
elementary tools
Graphics applications can be written using these
Problem?

Each graphic display uses different basic commands, and
has a different collection of tools for producing the
corresponding graphic primitives

Porting the program (converting it from one environment
to another) can become very time-consuming and difficult
Raster Images

Made up of many cells called pixels (picture elements)

Normally, the eye doesn’t see the individual cells

Pixels are stored in an array or matrix, called pixel map

or bitmap
 The size of the matrix per unit length defines the resolution of the
bitmap

Each pixel has an intensity value, which defines the

shades of gray or color (pixel depth)
Raster Images

Advantages
Easily stored and accessed in computers
Discrete representation of data
Fixed (at times large) size

Disadvantages
“Pixelation”

Pixels are too large to represent the smallest features
in the image

Curves are represented as jagged, discontinuous
lines

Questions?
So, what do we need to start drawing?

Environment that allows us to write and execute

programs
Must include hardware to display images

Library of software tools that perform actual

drawing of graphics primitives
Example: OpenGL

SW tool for generating 2D and 3D graphics

Standard, cross platform (device independent)
specification

Application program interface (API)
Graphics API

Interface between the application program

and hardware
Provides instructions and primitives to use, in
this case, graphics libraries
API takes care of lower levels of communication
with HW

Application Graphics
Hardware
Program Library (API)
Graphics Architectures: Pipeline

Display process
Refresh the display continuously

Pipeline renders (rasterization-based) a 2D

scene based on a 3D representation of the
objects in the scene, properties of these objects,
and the order in which instructions are executed

INPUT OUTPUT
Instruction Instruction Instruction
(3D geometry) 1 2 3 (pixels)
Device Independent Programming

When the same code can be compiled and run on a
variety of graphics environments and produce nearly
identical graphical output
 Porting is now simply installing appropriate libraries on a new
machine

 OpenGL is open source (you can contribute too!) and is freely

available

Large number of industrial companies use OpenGL

 OpenGL is most powerful when drawing images of complex 3D

scenes, but works well for 2D drawing too

In this manner, provides a unified approach to graphics
Main OpenGL Libraries

Basic GL: The fundamental OpenGL library. It provides
the functions that are a permanent part of OpenGL.
Functions start with “GL.”

GLUT: GL Utility Toolkit. Used for opening windows,

developing and managing menus, managing events.

GLU: GL Utility Library. High level routines to handle

certain matrix operations, drawing of quadric surfaces
(spheres, cylinders), decomposition of non-convex, non-
simple polygons.
Windows-Based Programming

Modern graphics systems are windows-based,

which manage multiple overlapping windows.

In addition to generating input primitives a

program can process, using a pointing device a
user can:
Move windows
Resize windows
i.e. generate events
Event-Driven Programming

Windows-based programs are mostly event-
driven
Respond to a mouse click, a mouse move, keyboard
input, resizing a window, etc.
Operating system automatically manages an event
queue

Keeps track which events occurred

Keeps track of the order in which they occurred

Event-driven program
Programmer writes callback functions, to be executed
(called) when a certain event occurs
Upon completion, application resumes where it left off
Event-Driven Programming

This is how OpenGL functions

Our program should contain callback functions

for each type of event, not for all events
One function for a keyboard stroke, not a callback
for when “a” is pressed

Event-driven is opposite of sequential

Sequential: do this, then do that, then…
Event-driven: loop, wait, until something happens

Obviously, can be some overlap
Registering Callback Functions

We must associate a type of event with a specific
programmer-defined function, the run main loop
(glutMainLoop())

Examples in OpenGL (GLUT):

 glutDisplayFunc(myDisplay). When the system determines
that a screen window should be redrawn, it issues a redraw
event.

When first opened, when window is exposed..

 glutReshapeFunc(myReshape). Event from when a window is

reshaped.

 glutMouseFunction(myMouse). Related to events generated

when mouse buttons are pushed.
Registering Callback Functions

Other examples in OpenGL:
 glutMotionFunc(myMotionFunc). Generates an event
when the mouse is moved with a button pressed.

 glutPassiveMotionFunc(…). Generates an event

when the mouse is moved (e.g. enters a windows) when
no buttons are pressed.

 glutKeyboardFunc(myKeyboard). This registers the

function myKeyboard() with the event of pressing and
releasing some key on the keyboard. Also, x and y
coordinates of mouse at the time of the event are also
registered.
Basic Structure of OpenGL Program
#includes

init_function(…) {…}

display_callback(…) {
// Drawing happens here
}

keyboard_callback(…) {…}

other_callback(…) {…}

main(…) {
init_function(…)

// Register callbacks

main_loop()
}
Initialization

Every (graphics) program begins with some

initialization
Establish desired display mode
Set up coordinate system

Coordinates measured in pixels

a) Display switched to graphics mode

b), c) Screen windows for graphics
Initialization - Opening a Window

OpenGL does NOT provide window control on specific systems
 Device independent, right?

DOES provide basic commands to open a window on any system
 glutInit(&argc, argv) - Initializes toolkit using standard
arguments for passing command line information.
 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB) -
Specifies how the display should be initialized. In this case, single buffer
using RGB color format (note “or” function).
 glutInitWindowSize(640, 480) - Specifies window size, in
pixels.
 glutInitWindowPosition(100, 150) - Specifies that
window’s upper left corner should be 100 pixels from the left edge and
150 down from the top.
 glutCreateWindow(“Name”) - Opens and displays the
window on-screen, with the title “Name.”
Basic Graphic Primitives in OpenGL

All drawing functions are placed in the callback
associated with a draw or redraw event

Coordinate system must be established

 In example: 640 x 480, (0 to 639, 0 to 479)

(0,479)
Name

(0,0) (639,0)
x
Basic Graphic Primitives in OpenGL

Recall graphic primitives
 Points, lines, polylines, polygons…

Most of these are defined by vertices (corners)

In OpenGL, pass a list of vertices to draw these primitives

 First, call function glBegin()
 List vertices
 Then call function glEnd()

glBegin(GL_POINTS); // draw individual points

glVertex2i(100, 50); // the points
glVertex2i(100, 130);
glVertex2i(150, 130);
glEnd();
Basic Graphic Primitives in OpenGL

Constants built into OpenGL
 GL_POINTS
 GL_LINES
 GL_POLYGON
…

Many functions have variations

 glVertex2i(), glColor3f()

glVertex2i(…)
type of
argument
gl
basic number of
library
command arguments
 OpenGL Data Types

Specific data types defined for internal OpenGL functions
 Variations in data types exist between systems

e.g. 16 bit or 32 bit integers

e.g. no standard size for float or double

Suffix Data Type Typical C++ Type OpenGL Type Name

b 8 bit integer signed char GLbyte
s 16 bit integer short GLshort
i 32 bit integer int or long GLint, GLsizei
f 32 bit floating point float GLfloat, GLclampf
d 64 bit floating point double GLdouble, GLclampd
ub 8 bit unsigned number unsigned char GLubyte,GLboolean
us 16 bit unsigned number unsigned short GLushort
ui 32 bit unsigned number unsigned int/long GLuint, GLenum, GLbitfield
OpenGL State Variables - Attributes

Current point size
 glPointSize(float)
 e.g. float = 3.0, point is square with 3 pixels on a side

Current color of drawing

 glColor3f(red, green, blue)
 Background color set using:

glClearColor(red, green, blue, alpha)

Call glClear(GL_COLOR_BUFFER_BIT) to clear entire window

Current screen window size

…
Line Drawings

Simple OpenGL constant

glBegin(GL_LINES);
glVertex2i(40, 100);
glVertex2i(200, 97);
glEnd();

We can write our own line function, e.g.

void drawLine(GLint x1, GLint y1, GLint x2, GLint y2){

glBegin(GL_LINES);
glVertex2i( x1, y1 );
glVertex2i( x2, y2 );
glEnd();
}
Line Drawings

If more than two vertices are specified between
glBegin(GL_LINES) and glEnd(), lines are formed
between pairs

glBegin(GL_LINES);
glVertex2i( 10, 20 ); // first line
glVertex2i( 40, 20 ); // first line
glVertex2i( 20, 10 ); // second line
glVertex2i( 20, 40 ); // second line
glEnd();

Attributes – called BEFORE glBegin(…)

 Color: glColor3f()
 Line width: glLineWidth( float)
Polylines

What is a polyline?
 Multiple lines, a collection of lines segments, joined end to end

OpenGL calls this a “line strip”

glBegin(GL_LINE_STRIP);
glVertex2i( 20, 10 );
glVertex2i( 50, 10 ); GL_LINE_STRIP
glVertex2i( 20, 80 );
glVertex2i( 50, 80 );
glEnd();
glFlush();

Can replace GL_LINE_STRIP with

GL_LINE_LOOP and this will GL_LINE_LOOP
generate a polygon
 This cannot, however, generate a filled polygon
Polygons

For general polygons: GL_POLYGON
Can generate general polygons using
glBegin(), glEnd() and this type
Can fill these polygons

Restrictions
• Polygons must be simple
• Polygons must be convex

Convex Polygon: A polygon is convex if it

contains every line segment delimited by any
two points on its boundary
Other Graphic Primitives

GL_TRIANGLE
 Takes vertices 3 at a time, separate
triangle for each
 Vertices ordered counterclockwise

GL_QUADS
 Takes vertices 4 at a time,
counterclockwise

 GL_TRIANGLE_STRIP
 Draws triangles based on triplets of
vertices
 v0, v1, v2; v2, v1, v3; v2, v3, v4; …
 All traversed in same order
(counterclockwise)

 glRecti(GLint x1, GLint y1,

GLint x2, GLint y2)
 Draw a rectangle with opposite
corners (x1, y1) and (x2, y2)
 Special polygon case
Other Graphic Primitives

GL_TRIANGLE_FAN
 Draws triangles based on
triplets of vertices
 v0, v1, v2; v0, v2, v3; v0, v3,
v4; …
 All traversed in same order
(counterclockwise)

GL_QUAD_STRIP
 Draws quads based on
foursomes of vertices
 v0, v1, v3, v2; v2, v3, v5, v4;
v4, v5, v7, v6; …
 All traversed in same order
(counterclockwise)

Questions?
In-Class Exercise

Implement a basic OpenGL C++ program

(Handout)

When finished, replace the teapot with a cube

constructed with GL_QUADS commands, using
different colors
glColor3f(…)
glBegin(…), glEnd(…)
glVertex3f(…)