COMPUTER GRAPHICS &

ANIMATION (CEN515)
DR. TIWALADE ODU
MRS. COMFORT LAWAL
COURSE OVERVIEW
• Introduce the basic concepts of computer
graphics.
• Provide the necessary theoretical background
and demonstrate the application of computer
science to graphics.
COURSE OBJECTIVES
• Explain the overall workflow and techniques involved in
computer animation production
• Describe the fundamentals of computer graphics
including graphics pipeline architecture,
transformations, modelling, viewing, shading, and
texture mapping
• Study basic mathematical backgrounds related to
computer graphics including linear algebra and geometry
• Illustrate computer graphic algorithms (such as object
transformation, geometric representation, shading and
illumination model, anti-aliasing and ray tracing)
• Study 3-D curve and surface algorithms, in rendering,
surface and line removal algorithms
• Explain the abstract mathematical model for colour
representation
RECOMMENDED TEXTS
• Sumanta Guha, Computer Graphics through
OpenGL®: From Theory to Experiments, Third
Edition.
• David J. Eck, Introduction to Computer
Graphics, Version 1.4, August 2023
 INTRODUCTION

• Computer Graphics refers to

anything involved in the
creation or manipulation of
images on a computer,
including animated images.
• The focus of this course is three-
dimensional (3D) graphics, where most
of the work goes into producing a 3D
model of a scene. But ultimately, in
almost all cases, the result of a
computer graphics project is a two-
• An image that is presented on the computer
screen is made up of pixels.
• The screen consists of a rectangular grid of
pixels, arranged in rows and columns.
• The pixels are too small to easily see
individually.
• For many very high-resolution displays, they
become essentially invisible. At a given time,
each pixel can show only one colour.
• Most screens these days use 24-bit colour,
where a colour can be specified by three 8-bit
numbers, giving the levels of red, green, and
blue (RGB) in the colour.
Any colour that can be shown on the screen is made up of some
combination of these three “primary” colours.

Other formats are possible, such as grayscale, where each pixel is some
shade of gray and the pixel colour is given by one number that
specifies the level of gray on a black-to-white scale. Typically, 256
shades of gray are used.

Early computer screens used indexed colour, where only a small set of
colours, usually 16 or 256, could be displayed.

For an indexed colour display, there is a numbered list of possible

colours, and the colour of a pixel is specified by an integer giving
the position of the colour in the list.
• In the indexed colour mode, pixels
are not assigned colour values
directly. Instead, the colours
values are stored in a palette, also
known as a CLUT or colour look-up
table, which may contain up to 256
colours.
• Each pixel references a colour (or
swatch) on the palette.
• This is an example of a palette
• In any case, the colour values for all the
pixels on the screen are stored in a large
block of memory known as a frame
buffer.
• To change the image on the screen, the
colour values stored in the frame buffer
must be changed.
• The screen is redrawn many times per
second, so that almost immediately after the
colour values are changed in the frame buffer,
the colours of the pixels on the screen will be
changed to match, and the displayed image
will change.
• A computer screen used in this way is the basic model of raster
graphics.
• The term “raster” technically refers to the mechanism used on
older vacuum tube computer monitors where an electron beam
would move along the rows of pixels, making them glow.
• The beam was moved across the screen by powerful magnets
that would deflect the path of the electrons.
• The stronger the beam, the brighter the glow of the pixel, so the
brightness of the pixels could be controlled by modulating the
intensity of the electron beam.
• The colour values stored in the frame buffer were used to
determine the intensity of the electron beam. (For a colour
screen, each pixel had a red dot, a green dot, and a blue dot,
which were separately illuminated by the beam.)
• A modern flat-screen computer monitor is not a raster in the
same sense.
• There is no moving electron beam.
• The mechanism that controls the colours of the pixels is different for
different types of screen.
• But the screen is still made up of pixels, and the colour values for all
the pixels are still stored in a frame buffer.
• The idea of an image consisting of a grid of pixels, with
numerical colour values for each pixel, defines raster graphics.
• Although images on the computer screen are represented using pixels,
specifying individual pixel colours is not always the best way to create
an image.
• Another way is to specify the basic geometric objects that the image
contains, shapes such as lines, circles, triangles, and rectangles. This
is the idea that defines vector graphics.
• Vector graphics represent an image as a list of the geometric shapes
that it contains.
• The shapes can have attributes, such as the thickness of a line or the
colour that fills a rectangle.
• Not all images can be composed from simple geometric shapes. This
approach certainly wouldn’t work for a picture of a beautiful sunset (or
for most any other photographic image). However, it works well for
many images, such as architectural blueprints and scientific
illustrations.
 connected by lines and curves, like the
connect-the-dot activities you may have
done as a kid.
They are resolution-independent because
Vector they are not based on pixels, which
graphics makes them infinitely scalable.
are also Their lines are sharp, without any loss
known as in quality or detail, regardless of
scalable size.
vector They are also device-independent, which
graphics means their quality doesn't depend on
(SVG). the number of dots available on a
printer or the number of pixels on a
screen.
The file size is relatively small
because it consists of lines and anchor
Raster points.
images Pixels appear like the little • The lower the number of pixels,
are made squares on a graph paper when the the lower the resolution.
of Resolution limits the size the
image is zoomed in or enlarged. image can be scaled up to without
pixels
or tiny These images are created by digital being able to see pixels.
dots cameras, scanning images into a • However, a high-resolution image
that use computer or with raster-based printed at a small size will cause
colour software. the pixels to "cram" together and
and tone make the image look as
• Each image can only contain a fixed unprofessional as not having
to number of pixels; the number of
produce enough pixels in a large image.
pixels determines the quality of the
the image. This is known as resolution.
image.
• More pixels result in better quality
• The difference between raster graphics and vector graphics persists in several
areas of computer graphics.
• For example, it can be seen in the two categories of programs that can be used
to create images: painting and drawing programs.
• In a painting program, an image is represented as a grid of pixels, and the user
creates an image by assigning colours to pixels. This might be done by using a
“drawing tool” that acts like a painter’s brush or even by tools that draw
geometric shapes such as lines or rectangles. However, the point of a painting
program is to colour the individual pixels, and only the pixel colours are saved.
• To make this more straightforward, suppose that you use a painting program to
draw a house and then draw a tree in front of the house. If you erase the tree,
you’ll only reveal a blank background, not a house. The image never really
contained a “house” at all—only individually coloured pixels that the viewer
might perceive as making up a picture of a house.
In a drawing program, the user creates an image by adding geometric
shapes, representing the image as a list of those shapes. If a house
shape (or collection of shapes making up a house) is placed in the
image, and you then place a tree shape on top of the house, the
house is still there since it is stored in the list of shapes that
the image contains.

If the tree is deleted, the house will still be in the image, just
as before the tree was added.

Furthermore, you should be able to select one of the shapes in the

image and move it or change its size, so drawing programs offer a
rich set of editing operations that are impossible in painting
programs.
• A practical program for image creation and editing might combine
elements of painting and drawing, although one or the other is
usually dominant.
• Examples:
• A drawing program might allow the user to include a raster-type
image, treating it as one shape.
• A painting program might let the user create “layers,” which are
separate images that can be layered on top of one another to
create the final image. The layers can then be manipulated much
like the shapes in a drawing program (so that you can keep both
your house and your tree in separate layers, even if the image of
the house is in the back of the tree).
• Two well-known graphics programs are Adobe Photoshop and
Adobe Illustrator.
• Photoshop is in the category of painting programs, while
Illustrator is more of a drawing program.
• In the world of free software, the GNU image-processing
program, Gimp, is a good alternative to Photoshop, while
Inkscape is a reasonably capable free drawing program.
The difference between raster and vector graphics also appears in
graphics file formats.

There are many ways to represent an image as data stored in a file. If

the original image is to be recovered from the bits stored in the file,
the representation must follow some exact, known specification. Such a
specification is called a graphics file format.

Some popular graphics file formats include GIF, PNG, JPEG, WebP, and
SVG.

Most images used on the Web are GIF, PNG, or JPEG, but most browsers
also support SVG images and the newer WebP format.
GIF, PNG, JPEG, and WebP are raster graphics formats;
an image is specified by storing a colour value for
each pixel.

GIF is an older file format, which PNG has

superseded, but you can still find GIF images online.
(The GIF format supports animated images, so GIFs are
often used for simple animations on Web pages.)
GIF uses an indexed colour model with a maximum of
256 colours. PNG can be used as an indexed or full
24-bit colour, while JPEG is meant for full-colour
images.
The data required to represent a raster image can be quite large.

However, the data usually contains a lot of redundancy, and the data can be “compressed” to
reduce its size.

GIF and PNG use lossless data compression, meaning the original image can be recovered
perfectly from the compressed data.

JPEG uses a lossy data compression algorithm, meaning that the image recovered from a JPEG
file is not exactly the same as the original image; some information has been lost.

This might not sound like a good idea, but in fact, the difference is often not very
noticeable, and using lossy compression usually permits a greater reduction in the size of the
compressed data.

JPEG generally works well for photographic images, but not as well for images that have sharp
edges between different colours.

It is especially bad for line drawings and images that contain text; PNG is the preferred
format for such images.

WebP can use both lossless and lossy compression.

• SVG is fundamentally a vector graphics format (although SVG images can
include raster images).
• SVG is an XML-based language for describing two-dimensional vector graphics
images.
• “SVG” stands for “Scalable Vector Graphics,” and the term “scalable” indicates
one of the advantages of vector graphics: There is no loss of quality when the
size of the image is increased.
• A line between two points can be represented at any scale, and it is still the same
perfect geometric line. If you try to significantly increase the size of a raster
image, on the other hand, you will find that you don’t have enough colour values
for all the pixels in the new image; each pixel from the original image will be
expanded to cover a rectangle of pixels in the scaled image, and you will get
multi-pixel blocks of uniform colour.
• The scalable nature of SVG images makes them a good choice for web browsers
and graphical elements on the computer’s desktop. And indeed, some desktop
environments are now using SVG images for their desktop icons.
A digital image, no matter its format, is specified
using a coordinate system.

A coordinate system sets up a correspondence between

numbers and geometric points.

In two dimensions, each point is assigned a pair of

numbers called the coordinates of the point.

The two coordinates of a point are often called its x-

coordinate and y-coordinate.
• A raster image is a two-dimensional grid of pixels arranged into
rows and columns.
• So, it has a natural coordinate system in which each pixel
corresponds to a pair of integers, giving the number of the row
and the number of the column that contains the pixel.
Overview of a Graphics System
• The operation of a typical graphics system can be split into a three-part sequence:

Input Processing Output

• An example is what happens when a thumbnail is clicked on say, YouTube.

 The click action is the input.
 The PC responds to this input by downloading the file and running it though
the HTML5 video player.
 The output video frames are displayed on the monitor.
 Overview of a Graphics
System (Contd.)
• There are two types of graphics systems:
• Interactive
• The use of Adobe Illustrator is interactive.
• The output reacts to the input through the processor.
• Non-interactive
• The playing of the YouTube video is non-interactive.
• After clicking the thumbnail to play the video, little or
no further input is required from the user for the
process.
• I/O or Peripheral devices are particularly important in interactive
systems because they determine the scope of interactions possible
with the system.
• A race car game would require an input device that functions
like a steering wheel.
• A flight simulator would require an input device like a joystick.
Input
Devices
Output
Devices
 OpenGL is a cross-platform 3D
graphics API. It consists of a
library of over 500 commands to
perform 3D tasks, which can be
accessed from programs written in
various languages.

OpenGL ES is a popular API for

programming 3D graphics on small
devices.
OpenGL

WebGL – OpenGL for the web is

based on OpenGL ES and is
currently supported by almost all
browsers, making possible real-
time interactive CGI via the web.
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_POINTS);
for(int i = 0; i < 10; i++)
{
glVertex3i(i, 2*i, 0);
}
glEnd();

• There are calls in the OpenGL library to draw straight

lines, triangles, create light sources, apply textures,
move and rotate objects, maneuver the camera, etc.