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.
