Daniel K

Computer science MSc

DanielKahsu317@gmail.
com

Computer
Graphics
Chapter One

Introduction Interactive Computer

Graphics
Topics Covered
 What is Computer Graphics
 History of Computer Graphics
 Common Uses of Computer Graphics
 Application Area of Computer Graphics
 3D Graphics Techniques and Terminology
 OpenGL to create interactive computer graphics.
 Understand a typical graphics pipeline.
 Have made pictures with their computer.

2 Computer - Graphics -
2024
What is Computer Graphics?
 Computer graphics is an art of drawing pictures on
computer screens with the help of programming. It
involves computations, creation, and manipulation of
data. In other words, we can say that computer
graphics is a rendering tool for the generation and
manipulation of images

3 Computer - Graphics -
2024
What is Computer Graphics?
 Computer graphics is the display, storage &
manipulation of images and data for the visual
representation of a system.
 Computer graphics is an art of drawing pictures, lines,
charts, etc. using computers with the help of
programming.
 Computer graphics refers to the creation, storage and
manipulation of pictures and drawings using a computer.
 Computer graphics is made up of number of pixels.

4 Computer - Graphics -
2024
Cont’d

 Computer Graphics is the creation of pictures with

the help of a computer.
 The end product of the computer graphics is a
picture it may be a
 business graph,
 drawing,
 engineering.
 Etc.…
5 Computer - Graphics -
2024
Cont’d
 The aim of computer graphics is to produce realistic
and/or useful images on a computer.
 For some applications the emphasis will be on realism
(e.g. special effects in films), whereas for others it will
simply be on usefulness (e.g. data visualization).
 Computer graphics provides methods to generate
images using a computer.
 The word “image” should be understood in a more
abstract sense here

6 Computer - Graphics -
2024
Cont’d
 An image can represent a realistic scene from the real

world, but graphics like histograms (statics diagram) or

pie charts as well as the graphical user interface of a

software tool are also considered as images.

 The development of computer graphics has made

computers easier to interact with, and better for

understanding and interpreting many types of data.

7 Computer - Graphics -
2024
 Cont’d
 Developments in computer graphics had a profound
impact on many types of media and have revolutionized
animation, movies and the video game industry.
 The term computer graphics refers to several different
things:
 Representation and manipulation of image data by a
computer
 Various technologies used to create and manipulate
images
 the images so produced, and
 the sub-field of computer science which studies
methods for digitally synthesizing and manipulating
visual content.
8 Computer - Graphics -
2024
Types Of Computer Graphics

 There are two kinds of computer graphics

are

 Interactive Computer Graphics

 Non-Interactive Computer Graphics

9 Computer - Graphics -
2024
Interactive (Active) CoG
 In interactive Computer Graphics user have some

controls over the picture, i.e., the user can make any

change in the produced image

 Interactive Computer Graphics require two-way

communication between the computer and the user.

 A User can see the image and make any change by

sending his command with an input device.

10 Computer - Graphics -
2024
Cont’d

Examples of interactive Computer Graphics:

 Ping-pong game.
 Drawing on touch screens.
 Display weather forecast or other moving
charts/graphs on the screen.
 Animating pictures or graphics in movies.
 Graphics animation in video games.

11 Computer - Graphics -
2024
Characteristics of Interactive
Graphics

1. Real-time responsiveness
 Interactive graphics systems provide
immediate feedback on user inputs, enabling a
seamless and responsive user experience.

2. User Engagement
 Users can actively control and modify the
displayed graphics, fostering a sense of
participation and control over the visual
elements.
12 Computer - Graphics -
2024
Cont’d

3. Dynamic Updates
 Visual content is continuously updated based on
user actions, allowing for dynamic changes in
response to input.

4. Feedback loop
 There is a continuous feedback loop between
the user and the system, with the system
responding to user inputs and the user adjusting
their actions based on the visual feedback.
13 Computer - Graphics -
2024
Components of Interactive graphics

 It consists of three components:

1. Frame Buffer or Digital Memory

2. A Monitor likes a home T.V. set without the tuning and

receiving electronics.

3. Display Controller or Video Controller:

 It passes the contents of the frame buffer to the monitor.

14 Computer - Graphics -
2024
 Non-interactive (Passive ) CoG
 In non-interactive computer graphics, the picture is produced

on the monitor, and the user does not have any controlled

over the image, i.e., the user cannot make any change in the

rendered image. One example of its Titles shown on T.V.

 Non-interactive Graphics involves only one-way

communication between the computer and the user, User can

see the produced image, and he cannot make any change in

the image.
15 Computer - Graphics -
2024
Characteristics of Non-Interactive CoG

 Static Display
 Non-interactive graphics systems generate
static images that remain unchanged until a
new set of instructions or data is provided.
 Predefined Output
 The visual output is often determined in
advance, and users have limited ability to
modify or influence the displayed content during
runtime.
16 Computer - Graphics -
2024
Cont’d

 Batch Processing
 Non-interactive graphics systems often involve
batch processing, where a series of instructions is
executed sequentially to generate a final output.

17 Computer - Graphics -
2024
History of Computer Graphics
 1950: The first graphic images are
created by Ben Laposky using an
oscilloscope to generate waveform
artwork produced by manipulating the
analog electronic beams.
 1951: Designed to support military
preparedness, Jay Forrester and Robert
Everett of the Massachusetts Institute
of Technology (MIT) produce the
Whirlwind, a mainframe computer with
a
18 CRT to plot blips representing Computer - Graphics -
2024
History of Computer Graphics
 1955: Direct descendant of the Whirlwind, the SAGE
(Semi- Automatic Ground Equipment) air defense system
is designed by Bert Sutherland at MIT.
 It uses simple vector graphics to display on analog CRTs
radar images with a wireframe outline of the region being
scanned, as well as the first light pen as an input device
that operators would use to pinpoint planes flying over
regions of the United States.
 It becomes a key part of the US missile defense system.

19 Computer - Graphics -
2024
 History of Computer Graphics
 1959: General Motors and IBM develop
“DAC-1” (Design Augmented by
Computers), the first industrial CAD
system (Computer-Aided Design) used
to help engineers design cars. It allows
a user to rotate and view a simple
drawings.
 1960: The term “computer graphics” is
coined by William A. Fetter at Boeing to
describe the new design methods for
his
20 human factors cockpit simulations. Computer - Graphics -
2024
History of Computer Graphics
 1961: Spacewar, the first video game, is
developed by MIT student Steve Russell for
the DEC PDP-1 minicomputer.

 1963: For his doctoral thesis at MIT, Ivan

Sutherland develops Sketchpad, the first
Computer-Aided Drafting and Design
(CADD) package allowing shapes to be
interactively drawn on a vector-based
display monitor using a light pen input
device wired into the computer. The light
pen uses a small photoelectric cell in its tip
21 Computer - Graphics -
2024
 History of Computer Graphics
 1963: Larry Roberts develops the first effective
hidden-line removal algorithm, the precursor
to various subsequent hidden-line and hidden-
surface algorithms.

 1963: The mouse is invented by Doug

Englebart at the Stanford Research Institute
(SRI).

 1965: The digital line drawing algorithm for

raster devices developed in 1962 by Jack
Bresenham at IBM is published.

 1966:
22 Ivan Sutherland creates the first head-Computer - Graphics -
2024
History of Computer Graphics
1967: MIT’s Center for Advanced Visual Studies is founded


by Gyorgy Kepes.

1967: Don Greenberg starts a program at Cornell.



1968: Dave Evans joins the computer science department



at the University of Utah and forms a CG group. Sutherland

also joins the University of Utah.

1968: Frustrated by the lack of graphics hardware



available, Evans & Sutherland then found their own

company.
23 Computer - Graphics -
1968: Intel is founded
 2024
 History of Computer Graphics

 1968: Arthur Appel at IBM introduces ray-casting, a

pre- cursor to ray-tracing which combines a hidden-

surface and shadow algorithm.

 1969: Initiated by Sam Matsa and Andy vanDam,

ACM creates a special interest group on graphics,

SIGGRAPH. The first SIGGRAPH conference held in

Boulder
24 in 1973 counts 1,200 attendeesComputer
versus about-
- Graphics
2024
History of Computer Graphics

 1969: At the Palo Alto Research Center (PARC) of

Xerox, Utah alumni Alan Kay develops the concept of
Graphical User Interface (GUI).

 1969: The first framebuffer (with 3 bits per pixel) is

built at Bell Labs, initiating the transition from vector
graphics, i.e. drawing lines between coordinates, to
raster video displays containing a value for each
pixel on the screen, transforming vector
representations into raster format images.
25 Computer - Graphics -
2024
History of Computer Graphics

 1971: Gouraud shading is developed by Utah

student Henri Gouraud. By interpolating intensity,

visual improvements over flat shading may be

achieved at a marginal cost.

26 Computer - Graphics -
2024
History of Computer Graphics
 1973: The entertainment feature film Westworld
makes the first use of 2D animation, while 3D
wireframe CGI will first be used 3 years later in its
sequel Futureworld..

27 Computer - Graphics -
2024
History of Computer Graphics
1974: Wolfgang Strasser in his dissertation describes
the Z- Buffer, together with Jose Encarnacao he can be
seen as the fathers of CG in Germany
1974: Utah student Edwin (Ed) Catmull (now
president of Walt Disney Animation Studios) develops
both the Z-buffer hidden-surface algorithm as well as
texture mapping.

28 Computer - Graphics -
2024
History of Computer Graphics

29 Computer - Graphics -
2024
History of Computer Graphics

30 Computer - Graphics -
2024
History of Computer Graphics

31 Computer - Graphics -
2024
History of Computer Graphics

32 Computer - Graphics -
2024
History of Computer Graphics

33 Computer - Graphics -
2024
History of Computer Graphics

34 Computer - Graphics -
2024
History of Computer Graphics

35 Computer - Graphics -
2024
History of Computer Graphics

36 Computer - Graphics -
2024
History of Computer Graphics

37 Computer - Graphics -
2024
History of Computer Graphics

38 Computer - Graphics -
2024
History of Computer Graphics

39 Computer - Graphics -
2024
History of Computer Graphics

40 Computer - Graphics -
2024
History of Computer Graphics

41 Computer - Graphics -
2024
History of Computer Graphics

42 Computer - Graphics -
2024
History of Computer Graphics

43 Computer - Graphics -
2024
History of Computer Graphics

44 Computer - Graphics -
2024
History of Computer Graphics

45 Computer - Graphics -
2024
History of Computer Graphics

46 Computer - Graphics -
2024
History of Computer Graphics

47 Computer - Graphics -
2024
History of Computer Graphics

48 Computer - Graphics -
2024
History of Computer Graphics

49 Computer - Graphics -
2024
History of Computer Graphics

50 Computer - Graphics -
2024
History of Computer Graphics

51 Computer - Graphics -
2024
History of Computer Graphics

52 Computer - Graphics -
2024
History of Computer Graphics

53 Computer - Graphics -
2024
History of Computer Graphics

54 Computer - Graphics -
2024
Applications of Computer Graphics

 Computer Aided Design

(CAD)  Computer Art

 Graphics and Charts  Visualization

 Entertainment  Image Processing

 Education & Training  Graphical User Interfaces

55 Computer - Graphics -
2024
1. Computer Aided Design (CAD)
 Used in design of buildings, automobiles, aircraft,
watercraft, spacecraft, computers, textiles & many other
products

 AutoCAD software was the first CAD program.

 Graphics design package provides standard shapes

 Animations are also used in CAD applications

 Realistic displays of architectural design.

56 Computer - Graphics -
2024
2. Graphs and Charts
 Help for making reports

 Summarize financial, statistical, mathematical, scientific,

economic data for research reports, managerial reports

 Presentation Slides

 Bar charts, Line graphs, Pie charts etc.

57 Computer - Graphics -
2024
3. Entertainment
I Movie Industry

 Used in motion pictures, music, videos, and television

shows.

 Used in making of cartoon animation films

 Computer Graphics is about animation (films).

58 Computer - Graphics -
2024
3. Entertainment
II. Game Industry

 Focus on interactivity

 Cost effective solutions

 Avoiding computations and other tricks

59 Computer - Graphics -
2024
 4. Education & Training
 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
60 Computer - Graphics -
2024
Cont’d

61 Computer - Graphics -
2024
Cont’d

62 Computer - Graphics -
2024
Cont’d

63 Computer - Graphics -
2024
Cont’d

64 Computer - Graphics -
2024
Cont’d

65 Computer - Graphics -
2024
Design Graphical User Interface
 Computer graphics is used to design: Menus, icons,
cursors, dialog boxes, scrollbars, valuators, grids, 3D
interface.

 Lay user can easily use the computer with the help of
GUI.

 User don’t have to remember commands.

 More interactive interface.

66 Computer - Graphics -
2024
Common Uses of Computer Graphics
 Entertainment
 Video Games: Real-time graphics to create
immersive, interactive experiences.
 Movies and Animation: CGI for creating visually
stunning effects and animated films.
 Design and Visualization
 Architectural Visualization: 3D models and
renderings to visualize buildings and spaces before
construction.
 Product Design: 3D modeling and rendering for
67
designing and testing products. Computer - Graphics -
2024
Common Uses of Computer Graphics
 Education and Training
 Simulations: Interactive graphics for training in fields
like aviation, medicine, and military.
 Virtual Labs: Educational tools that use graphics to
simulate experiments and phenomena.
 Medical Imaging
 MRI and CT Scans: Visualization of complex data for
diagnosis and treatment planning.
 Surgical Simulations: Interactive 3D models to plan
and practice surgeries
68 Computer - Graphics -
2024
Common Uses of Computer Graphics

 Scientific Research

 Data Visualization: Graphical representation of

complex data to aid in analysis and understanding.

 Molecular Modeling: Visualization of molecular

structures and interactions.

69 Computer - Graphics -
2024
Application Area Computer Graphics
 Virtual Reality (VR) and Augmented Reality (AR)
 VR: Immersive environments for gaming, training, and
virtual tourism.
 AR: Enhancing real-world environments with digital
information for applications like navigation and
maintenance.
 Engineering and Manufacturing
 CAD (Computer-Aided Design): Creation of precision
drawings and technical illustrations.
 CAM (Computer-Aided Manufacturing): Use of graphics
70 Computer - Graphics -
for controlling machinery and manufacturing 2024
Application Area Computer Graphics

 Geographic Information Systems (GIS)

 Mapping and Analysis: Visualization of spatial data
for urban planning, environmental monitoring, and
disaster management.
 Advertising and Marketing
 3D Models and Animations: Engaging visuals for
product advertisements and marketing campaigns.
 Interactive Media: Websites and applications with
interactive graphics to attract and retain
customers.
71 Computer - Graphics -
2024
Application Area Computer Graphics

 Art and Digital Media

 Digital Art: Creation of artworks using

computer graphics software.

 Interactive Installations: Art pieces that

involve viewer interaction and use graphics to

create dynamic experiences.

72 Computer - Graphics -
2024
Graphics Hardware

73 Computer - Graphics -
2024
Cont’d

74 Computer - Graphics -
2024
Cont’d

75 Computer - Graphics -
2024
Video Display Device
Video Display Devices
•The primary output device in a graphical system is the video
monitor

CRT MONITOR
LCD MONITOR

76 Computer - Graphics -
2024
Video Display Device
Video Display Devices
•The primary output device in a graphical system is the video
monitor

CRT MONITOR
LCD MONITOR

77 Computer - Graphics -
2024
Video Display Device
• CRT stands for Cathode Ray Tube. CRT is a
technology used in traditional computer
monitors and televisions. The image on CRT
display is created by firing electrons from the back
of the tube of phosphorus located towards the
front of the screen.

78 Computer - Graphics -
2024
Components of CRT:

1. Electron Gun: Electron gun consisting of a series of

elements, primarily a heating filament (heater) and a
cathode. The electron gun creates a source of electrons
which are focused into a narrow beam directed at the
face of the CRT.
2. Control Electrode: It is used to turn the electron
beam on and off.
3. Focusing system: It is used to create a clear
picture by focusing the electrons into a
narrow
79 beam. Computer - Graphics -
2024
Components of CRT:

4. Deflection Yoke: It is used to control the direction of the

electron beam. It creates an electric or magnetic field which will

bend the electron beam as it passes through the area. In a

conventional CRT, the yoke is linked to a sweep or scan

generator. The deflection yoke which is connected to the sweep

generator creates a fluctuating electric or magnetic potential.

80 Computer - Graphics -
2024
Components of CRT:

5. Phosphorus-coated screen: The inside front surface of every

CRT is coated with phosphors. Phosphors glow when a high-

energy electron beam hits them. Phosphorescence is the term

used to characterize the light given off by a phosphor after it has

been exposed to an electron beam.

81 Computer - Graphics -
2024
Raster Scan Displays

 Raster: A rectangular array of points or dots.

 Almost all graphics systems are raster-based.

 Pixel: One dot or picture element of the raster.

 Its intensity range for pixels depends on capability of the system.

 A picture is produced as an array- the raster- of picture elements.

82 Computer - Graphics -
2024
Cont’d

 This elements are called Pixels or Pels (Picture Elements).

 A pixel corresponds to a location, or small area, in the image.

 Collectively, the pixels are stored in a part of memory called the

refresh buffer or frame buffer.

83 Computer - Graphics -
2024
 Cont’d

 Most common monitor that comes with PC is the Raster Scan

type.

 Every display system has three basic parts:

 Display adapter that creates and holds video information,

 Monitor which displays that information, and

 Cable that carries image data between display adapter and

84
monitor Computer - Graphics -
2024
 Three properties of images
Resolution
The maximum number of points that can be displayed without
overlap on a screen is referred to as resolution.
Image resolution refers to the pixel spacing, i.e., the distance from
one pixel to the next pixel
A full screen image with resolution 800 × 600 means that there are
800 columns of pixels, each column comprising 600 pixels, i.e., a
total of 800 × 600 = 480000 pixels in the image area.

85 Computer - Graphics -
2024
Three properties of images

Pixel

Pixel (also known as picture element) is the fundamental building

block of all computer images or color spot that can be displayed and

addressed on a monitor.

Image displayed on the monitor is made up of thousands of pixels.

Each pixel has particular color and brightness value.

86 Computer - Graphics -
2024
 Three properties of images
Aspect Ratio
The aspect ratio of an image is the ratio of the number of X pixels to
the number of Y pixels.
The standard aspect ratio for PCs is 4:3 and some resolutions even
use a ratio of 5:4.
Image displayed using 5:4 aspect ratio will cause the image to
appear somewhat distorted.

87 Computer - Graphics -
2024
3D graphics techniques and
terminology

 The term three-dimensional, or 3D, means that

an object being described or displayed has
three dimensions of measurement:
 Width,
 Height, and
 Depth.

Fig 1.1 2D and 3D image

88 Computer - Graphics -
2024
3D graphics techniques and
terminology

 The process by which mathematical and image data is

transformed into a 3D dimensional image is called

rendering.

 When used as a verb, it is the process that your

computer goes through to create the three dimensional

image.

 Rendering is also used as a noun, simply to refer to the

89 Computer - Graphics -
final image produced. 2024
3D graphics techniques and
terminology

Transformations and Projections

The following Figure shows the initial output

of the BLOCK example program, which
shows a line drawing of a cube on a table or
platform.

The points themselves are called

vertices(or vertex in the singular)

3D wireframe cube
90 Computer - Graphics -
2024
3D graphics techniques and
terminology

 3D Modeling :

o A way to describe the 3D world or scene,

which is composed of mathematical
representations of 3D objects called models.
 3D Rendering :

o A mechanism responsible for producing a 2D

image from 3D models.

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

92 Computer - Graphics -
2024
3D graphics techniques and
terminology

Transformations and Projections

 By moving the points around, and drawing lines

between them we can produce the illusion of a

3D world on a flat 2D screen.

 The earliest flight simulators employed

technology no more sophisticated than this.

93 Computer - Graphics -
2024
3D graphics techniques and
terminology

Transformations and Projections

 By moving the points around, and drawing lines

between them we can produce the illusion of a

3D world on a flat 2D screen.

 The earliest flight simulators employed

technology no more sophisticated than this.

94 Computer - Graphics -
2024
3D graphics techniques and
terminology

Transformations and Projections

A projection matrix takes care of the

mathematics necessary to turn our 3D
coordinates into two-dimensional screen
coordinates, where the final line drawing
actually takes place.
Rasterization

The actual drawing, or filling in of the pixels

95 between each Computer - Graphics -
2024
3D graphics techniques and
terminology

key concepts and terms

Vertex: In 3D graphics, a vertex (plural: vertices)
is a point in space with three-dimensional
coordinates (x, y, z).

Vertices are the building blocks of 3D models and

are

connected to form edges andPoints

faces.

96 Computer - Graphics -
2024
3D graphics techniques and
terminology

key concepts and terms

Edge: An edge is a line segment connecting two vertices and
define the shape of a 3D model and determine its overall
structure.
edge
( )
vertex
edge

97 Computer - Graphics -
2024
3D graphics techniques and
terminology
key concepts and terms
Face: A face is a flat polygon defined by three or
more vertices.
Faces create the visible surfaces of a 3D model,
and their arrangement determines the shape of the
object.

98 Computer - Graphics -
2024
3D graphics techniques and
terminology

key concepts and terms

Rendering: The process of generating a 2D image

from a 3D scene.

It involves calculating the color, shading, and

lighting of objects

in the scene to create a realistic or stylized

99 Computer - Graphics -
representation. 2024
3D graphics techniques and
terminology

key concepts and terms

Polygon: A polygon is a closed two-dimensional shape formed

by connecting multiple vertices with edges.

Triangles and quads (four-sided polygons) are the most

common types used in 3D modeling.

100 Computer - Graphics -

2024
3D graphics techniques and
terminology
key concepts and terms
Texture Mapping: Applying a 2D image (texture) to the
surface of a 3D model.
Texture mapping adds details, color, and texture to
objects, enhancing their visual realism.
models are often described not only by geometry, but by
textures as well.
To each point of an object, we can associate some
property (surface color is a common one), and this
property is then used in rendering the object.
101 Computer - Graphics -
2024
3D graphics techniques and
terminology

key concepts and terms

Shading: Determining the appearance of surfaces
by calculating how light interacts with them.

Shading techniques include flat shading (each

face has a single color), Gouraud shading
(smoothly interpolated colors across vertices), and
Phong shading (smoothly interpolated normal for
more realistic lighting).

102 Computer - Graphics -

2024
 End of chapter one

103 Computer - Graphics -

2024