1

COMPUTER
GRAPHICS

Lecture 1 ITSW4111: Computer Graphics

 What is Computer
2
Graphics?
 Computer Graphics is concerned with all
aspects of producing pictures or images
using a computer.
 Images are generated by computer that are
nearly indistinguishable from photographs of
real objects.
 Pilots are trained with simulated airplanes.
 Feature-length movies are made entirely by
computer. They are Successful both critically
and financially.
 Computer Graphic Areas
3

The application of computer graphics is

divided into 4 major areas:
1. Display of Information
2. Design
3. Simulation and Animation
4. User Interfaces
 Display of Information
4
 Computer Graphics is a medium to convey information
among people*
 Computer Graphics is used by architects, mechanical
engineers, and draft people, Statisticians,
Researchers…
 Information visualization allows us to better interpret
data and to understand complex phenomena in
bioinformatics.
 Medical imaging is another area where computer
graphics is heavily used.
 The field of scientific visualization uses computer
graphics. It provides graphical tools that help
researchers interpret the vast data that they generate
allowing them insight into complex processes in fluid
flow, molecular biology, mathematics…
* The human visual system is unrivaled both as a processor of data and as a pattern
recognizer.
 Design
5
 Design is an interactive process: The use of
graphical tools aids architects and engineers to
generate a design, test it, and uses the solution
as a basis for exploring other solutions.
 Example of the use of computer graphic in the
design:
 Computer Aided Design (CAD) used by

architects and engineers to design mechanical

parts.
 The Design of Very Large Scale Integrated

circuits (VLSI)
 Simulation and
6
Animation
 Computer Graphics Systems are capable of
generating sophisticated images in real time.
 Engineers and scientists use computer graphic tools
for simulation:
 Training of pilots
 Education people
 Games
 Animation in Television
 Motion picture
 Advertising
 Create Virtual Reality (VR): An artificial
environment created by computers, in which
people can immerse themselves and feel that this
artificial reality really does exist (used by
astronauts, surgeons..)
 User Interfaces
7

 Our interaction with computers is

dominated by the use of graphical user
interfaces (GUI). Windows, Icons, menus,
pointing devices such as mouse..
 Internet Browsers like Internet Explorer,
NetScape..
 These GUI’s are nothing but computer
graphics.
 Some Graphics
8
Applications
 User Interfaces
 Layout and Design
 Scientific Visualization and Analysis
 Art and Design
 Medicine and Virtual Surgery
 Layout Design & Architectural Simulations
 History and cultural heritage
 Entertainment
 Simulations
 Games
9
10
11
A Graphics System
12
A computer graphics system is a computer
system with the following Key elements:
1. Processor

2. Memory

3. Frame buffer

4. Output devices:

monitor (CRT,LCD)
printer
5. Input Devices:

 keyboard,mouse, joystick, space ball, data
glove, eye tracker.
 A Graphics System
13

Processo Frame
Keyboard r Buffer

Memory
Output Device

Mouse
 Pixels and Frame Buffers
14

Almost all graphics systems are raster based. A picture is

produced as an array –the raster- of picture elements or
pixels.
Within the graphics system:

Each pixel corresponds to a location or small area in the

image.
Collectively, the pixels are stored in a part of memory called

the frame buffer.

The frame buffer is usually implemented with a special type

of memory chips that enable fast redisplay of the contents of

the frame buffer.
In software based systems, the buffer is implemented in the

memory system.
 Pixels and Frame Buffers
15

The frame buffer holds the colored pixels displayed on

the screen, the depth information needed to create
images form 3D data, and other information. Usually,
the frame buffer comprises multiple buffers one of
which is the color buffers that hold the colored pixels.
Today; virtually all graphics systems have a special-

purpose graphics processing unit (GPU) besides the

CPU. It is customized to carry out specific graphics
functions like rasterization. It could be on the mother
board of the system or on a graphics card. The frame
buffer may be included in the GPU as it is frequently
accessed by it.
 Some Useful
16
Terminology
The resolution – the number of pixels in an image
determines the detail you can see in the image. Resolution is
usually stated as dpi (dots per inch) or ppi (pixels per inch).
The depth or precision of an image is the number of bits

used to represent a pixel. The depth determines the number

of colors that can be represented in a given system.
1-bit-deep image allows only two colors, where as an 8-bit

image allows 28 =256 colors. In full-color systems, there are

24 or more bits per pixel. These full color systems are also
called true-color systems or RGB color systems.
In an RGB color system, three groups of bits are assigned to

each of the three primary color – red, green, blue.

 Digital Images
17

A digital image can be an image created from scratch

using a computer program. It can also be an image
such as a slide or photograph that is translated into
electronic data.
A digital image can be be viewed, edited, and

manipulated.

 There are two types of images:

 Bitmap (Raster) images.

 Vector images.
 Bitmap Images
18

Bitmap images are comprised of pixels in a grid.

Each pixel or "bit" in the image contains information
about the color to be displayed.
Bitmap images have a fixed resolution and cannot

be resized without losing image quality. Common

bitmap-based formats are JPEG, GIF, TIFF, PNG,
PICT, and BMP.
Most bitmap images can be converted to other

bitmap-based formats very easily.

Bitmap images tend to have much large file sizes

than vector graphics and they are often compressed

to reduce their size. Although many graphics
formats are bitmap-based, bitmap (BMP) is also a
graphic format.
 Bitmap Image
19
Rows

Picture
Element

Columns
pixel
 Characteristics of
20
Bitmap Images
Bitmap images are resolution dependent.
Because bitmaps are resolution dependent, it's difficult

to increase or decrease their size without sacrificing a

degree of image quality. When you reduce the size of a
bitmap image through your software's resample or
resize command, you must throw away pixels.

When you increase the size of a bitmap image through

your software's resample or resize command, the
software has to create new pixels. When creating pixels,
the software must estimate the color values of the new
pixels based on the surrounding pixels. This process is
called interpolation.
 Example
21

 The icons in this image are 32 by

32 pixels. In other words, there
are 32 dots of color going in each
direction.
 When combined, these tiny dots
form an image. The icon shown in
the upper right corner of this
example is a typical desktop icon
at screen resolution.
 As you can see, when you enlarge
the icon, as I have in this
example, you can clearly see each
individual square dot of color.
 Bitmap Image Formats
22

 Common bitmap formats include: Color data mode

• BMP Bits per pixel

• GIF
TIF RGB - 24 or 48 bits,
• JPEG, JPG Grayscale - 8 or 16 bits,
• PNG Indexed color - 1 to 8 bits,
Line Art (bilevel)- 1 bit
• PICT (Macintosh)
• PCX PNG RGB - 24 or 48 bits,
Grayscale - 8 or 16 bits,
• TIFF Indexed color - 1 to 8 bits,
• PSD (Adobe Photoshop) Line Art (bilevel) - 1 bit

 Popular bitmap editing programs

JPG are:
RGB - 24 bits,
Grayscale - 8 bits
• Microsoft Paint
• Adobe Photoshop GIF Indexed color - 1 to 8 bits
• Corel Photo-Paint
BMP RGB - 24 or 48 bits
• Corel Paint Shop Pro
• The GIMP
 Vector Images
23
Vector graphics are made up of many individual
objects. Each of these objects can be defined by
mathematical statements and has individual
properties assigned to it such as color, fill, and outline.
Vector graphics are resolution independent because
they can be output to the highest quality at any scale.
 Advantages of Vector Images
24

Because they're scalable, vector-based images are

resolution independent. You can increase and decrease
the size of vector images to any degree and your lines
will remain crisp and sharp, both on screen and in
print.
Fonts are a type of vector object.

 Advantages of Vector Images
25
Another advantage of vector
images is that they're not restricted
to a rectangular shape like bitmaps.

Vector objects can be placed over

other objects, and the object below
will show through. See the example
images on next slide. The vector
circle and bitmap circle appear to be
exactly the same when seen on a
white background. But when you
place the bitmap circle over another
color, it has a rectangular box
around it, from the white pixels in
the image.
Disadvantages of Vector images
26

Vector images are unsuitable for producing photo-

realistic imagery: Vector images are usually made
up of solid areas of color or gradients, but they
cannot depict the continuous subtle tones of a
photograph. That's why most of the vector images
you see tend to have a cartoon-like appearance.
Even so, vector graphics are continually becoming
more advanced, and we can do a lot more with
vector drawings now than we could just a few years
ago.
 Interacting with a Graphics
27
Systems
There are numerous ways for the user to
interact with a graphics system.
 Complete-self contained packages such as

the ones used in the CAD community: User

develops images through interaction with
the display unit (ex. Monitor) using input
devices (ex. keyboard or mouse).
 Set of functions residing in a graphics

library that creates an interface between an

application program and a graphics
systems. Such functions are called API’s
 Application Programmer’s
Interface : API
28

A graphics API:
 Is a set of functions that reside in a

graphics library. These functions are used

for handling, graphics, menus, and
windows.
 Specifies the interface between an
application program (ex. a data
visualization application) and a graphics
system
 Is used for creating an interactive
computer graphics.
If speed is critical (i.e. computer games) it
may be tempting to avoid using the API
 Application Programmer’s Model for
Graphics System
29

Application Graphics Drivers

Program Library (API)
 Some Existing APIs
30

1. OpenGL
2. Direct3D
3. Java3D
4. VRML
5. Win32 API

 We will use the WebGL library of functions.

 Based on OpenGL
 Used by many computer graphics programmers
 Relatively platform independent.
 Don't have to recompile for different systems
 Drawback: Not all systems will run it.
 References
31

 Interactive computer graphics: a top-

down approach with WebGL by Edward
Angel. Seventh Edition.