1.1

Designed and Presented by

Dr. Ayman Elshenawy Elsefy

Dept. of Systems & Computer Eng..

Al-Azhar University

Email : eaymanelshenawy@yahoo.com

eaymanelshenawy.wordpress.com

Lectures on Computer Graphics

Part 1Introduction to Computer Graphics

What is Computer Graphics?• Computer Graphics (CG) is:

• An area of computer science and engineering that

plays an important role in almost every application of

computer software. computer graphics describes any

use of computers to create and manipulate images

through:

• Programming the geometry and appearance of the

contents of the images,

• Displaying the results of that programming on

appropriate devices that support graphical output

and interaction.

• Uses a graphics API’s that supports the necessary

modeling and does most of the detailed work of

rendering the scene that is defined through the

programming.

• Computer GraphicsAPI’s(Application Programming Interface)

• Is a set of tools and functions that:

• Allow a programmer to write applications to use interactive

computer graphics without dealing with system details such as

window handling and interactions.

• Perform a set of related operations such as drawing images and

3D surfaces into windows on the screen.

• Graphics API may be:

• The graphics and user interface toolkits are part of the

programming language (The integrated approach) such as

java.

• The drawing commands are part of a software library tied to a

language such as C++, and the user-interface software is an

independent entity that might vary from system to system

(TDirect3D and OpenGL).

Graphics Pipeline• A special software/hardware subsystem that efficiently draws

3D primitives, and every desktop computer has a powerful 3D

graphics pipeline.

• Contains much machinery for efficiently processing and

composing such matrices and vectors.

• The basic operations in the pipeline map the 3D vertex locations

to 2D screen positions and shade the triangles so that they both

look realistic and appear in proper back-to-front order.

Programmer Role in Computer Graphics

The work of the programmer is to:

• Develop suitable representations for the Image geometric objects.

• Assemble these objects into an appropriate geometric space.

• Specify how scene is to be viewed and displayed on display device.

• Define some animation for the image.

• Design a ways for the user to interact with the presented scene.

How Can Computer Graphics Solve Problems

• Identifying a problem.

• Addressing the problem by building the model.

• Identifying a way to represent the problem geometrically.

• Creating an image from that geometry ( the problem can be seen

visually).

• Use the image to understand the problem or the model and to try to

understand a possible solution.

Computer Graphics Areas• most graphics practitioners would agree on the following major

areas of computer graphics:• Modeling:

• deals with the mathematical specification of shape andappearance ( a coffee mug might be described as a set of ordered3D points along with some rules to connect the points).

• Rendering :• Creation of shaded images from 3D computer models.

• Animation:• is a technique to create an illusion of motion through sequences

of images (uses modeling and rendering but ).• User interaction:

• The interface between input devices and the application.• Virtual reality:

• immerse the user into a 3D virtual world. This typically requires atleast stereo graphics and response to head motion.

Computer Graphics Areas• Virtual reality:

• Attempts to immerse the user into a 3D virtual world. • It requires stereo graphics and response to head motion.

• Visualization:• Convert the complex information into visual display in a way that

easier to understand and take decision.

• Image processing:• manipulates 2D images in both graphics and vision fields.

• 3D scanning:• uses range-finding technology to create measured 3D models.

• Computational photography:• is the use of computer graphics, computer vision, and image

processing methods to enable new ways of photographically capturing objects, scenes, and environments.

Computer Graphics Applications

• Computer Aided Design

• Presentation of graphics

• Computer Art

• Entertainment (movies, video

games, special effects).

• Education And training

• Visualization

• Image Processing

• GUI (interactive installations).

• Science and engineering( scientific

visualization, explanations to the

public ).

• medicine,

• business,

• industry,

• government,

• simulations and graph

presentations.

• Commercial purposes (advertising,

communication, product design).

• Computer graphics were used routinely in such diverse areas as

Computer Graphics ApplicationsComputer Aided Design (CAD)• used in the design of buildings, automobiles, aircraft, watercraft,

spacecraft, computers, textiles, and many, many other products.

• software packages for electrical, electronic, and logic circuits.

• Example : A circuit board layout

Computer Graphics Applications• Presentation Graphic

• used to summarize financial, statistical, mathematical,

scientific, and economic data for research reports,

managerial reports.

• Example, bar charts, line graphs, surface graphs.

Computer Graphics Applications• Entertainment

• used in making motion pictures, music videos, and television

shows.

• Computer Art

Artists use a variety of computer methods

Computer Graphics Applications

• Education and Training• Models of physical systems, or equipment can help trainees

to understand the operation of the system.

• The simulators for practice sessions or training of ship

captains, aircraft pilots, heavy-equipment operators, and air

traffic control personnel.

Computer Graphics Applications• Visualization of Data

• Scientists, engineers, medical personnel, business analysts,

and others often need to analyze large amounts of

information or to study the behavior of certain processes. By

produce data files containing thousands and even millions of

data values. Similarly, satellite cameras.

Computer Graphics Applications• Image Processing

• modify or interpret existing pictures, such as photographs and TV

scans.

• Medicine

• model and study physical functions, to design artificial

limbs, and to plan and practice surgery.

• Graphical User Interface GUI

Concepts, Terms and Definitions

Basic Graphics System

17

A computer graphics system is a computer system; that have all the

components of a general-purpose computer system.

There are six major elements in our system:

1. Input devices

2. Central Processing Unit

3. Graphics Processing Unit

4. Memory

5. Frame buffer

6. Output devices

Input

devices

Output

device

Image formed in FB

Pixels and the Frame Buffer

18

• Modern graphics systems are raster based.

• raster based Image:• The image displayed on the output device is an array (the raster) of

pixels, each pixel corresponds to a location, or small area, in the image.

• All the pixels are stored in a part of memory called the Frame Buffer

(FB), the number of pixels in the frame buffer determines the detail that

you can see in the image.

• The depth of the FB: is the number of bits that are used to store each

pixel properties, For example,

A 1-bit-deep frame buffer allows only two colors (Monochrome

systems), each Pixel may be ( True or False).

A 8-bit-deep frame buffer allows 28 (0-255) colors (Gray Level).

In full-color systems, there are 24 (or more) bits per pixel (true-

color systems, or RGB-color systems), each pixel are assigned to each of

the three primary colors—red, green, and blue—used in most displays.

36-bit color or more, High dynamic range (HDR) systems use 12 or

more bits for each color component.

• The conversion of geometric entities to pixel colors and locations in the

frame buffer is known as rasterization, or scan conversion.

CPU – Central Processing Unit

19

Simple systems process graphics, Graphically, the CPU take

specifications of graphical primitives (such as lines, circles, and

polygons) generated by application programs and to assign values to the

pixels in the frame buffer that best represent these entities.

the frame buffer was part of the standard memory addressed directly by

the CPU.

Special-purpose GPUs are used to perform specific graphics functions.

The GPU may be on the mother board of the system (built in) or on a

graphics card.

The Frame Buffer is on the same board with the GPU.

GPUs are complex and powerful than CPUs.

Graphics Processing Unit GPU

Graphics Processing Unit GPU

20

All graphics systems are characterized by special-purpose

GPUs customized to carry out specific graphics functions.

The GPU can be either on the mother board of the system (built

in) or on a graphics card.

The frame buffer is accessed through the GPU and usually is

on the same circuit board as the GPU.

GPUs are complex or even more complex than CPUs. They are

characterized by both special-purpose modules.

GPUs are so powerful that they can often be used as mini

supercomputers for general purpose computing.

Display Devices• A display device is an output device for presentation of information

in a visual way. When the input information is supplied as an

electrical signal, the display is called an electronic display.

• They are divided into a lot of small squares called pixels (“PICture

Elements”). Each pixel can be set to black or white (mono-chrome)

(i.e. turned on or off).

• This allows patterns of dots to be created on the screen.

Output Device- Cathode-Ray Tube (CRT)

22

Most Common Display Devices.

The output of the computer is converted, by digital-to-analog converters,

to voltages across the x and y deflection plates. This voltage generate

electrons through electron gun.

The direction of the electrons is controlled by two pairs of deflection

plates.

light is emitted when electrons strike the phosphor coating on the tube.

Such a device is known as the random-scan, calligraphic, or vector

CRT, because the beam can be moved directly from any position to any

other position.

CRT will emit light for only a short time (a few msec’s), For a human to

see a steady, the electron gun sends electrons again, the refresh rate (is

determined by the frequency of the power system, 60 Hertz)

Output Device- Raster Systems

23

In a raster system, the graphics system takes pixels from the frame buffer

and displays them as points on the surface of the display in one of two

fundamental ways.

Non-interlaced Display: pixels are displayed row by row, or scan line by scan line, at the refresh rate.

are becoming more widespread, process pixels twice.

Interlaced display

odd rows and even rows are refreshed alternately.

are used in commercial television.

If the display operating at 60 Hz, the screen is redrawn in only 30 Hz.

Viewers located near the screen, can tell the difference between the

interlaced and non-interlaced displays.

Persistence and Aspect Ratio• Persistence:

• Is defined as the time it takes the emitted light from the screen to

decay to 10% of its original intensity.

• Lower persistence phosphors require higher refresh rates to

maintain a picture on the screen and is useful for animation;

• A high-persistence phosphor is useful for displaying highly

complex, static pictures.

• Aspect Ratio:

• Is the ratio of vertical points to horizontal points necessary to

produce equal-length lines in both directions on the screen without

light overlap ( ratio of horizontal points to vertical points)

• An aspect ratio of 3/4 means that a vertical line plotted with three

pixels has the same length as a horizontal line plotted with four

pixels.

the intensity distribution of a spot on the screen.

Display Device Resolution• Is the number of pixels in each dimension that can be displayed with

out overlap on a CRT monitor.

• is dependent on the type of phosphor, the intensity to be displayed,

and the focusing and deflection systems.

• High resolution systems are often referred to as high-definition

systems.

• It is usually stated as width × height, with the units in pixels: for

example, "1024 × 768" means the width is 1024 pixels and the height

is 768 pixels.

• The screen in this example is composed of 300 pixels arranged in 15

rows of 20. It is said to have a resolution of “20 by 15” (20 x 15).

Screen size• Is The physical size of a graphics monitor and is given as the length

of the screen diagonal, with sizes varying from about 12 inches to

27 inches or more.

• Resolution is NOT the same thing as screen size. Our 20x15 display

may be used for 5cm across (as a mobile phone display), 40cm across

(as a monitor) or 20m (as a projection system) but the resolution

would always be 20x15.

Types of Display systems• Raster Scan Display Systems:

• Picture definition is stored in a memory area called the refresh buffer

or frame buffer, or a bitmap.

• This memory area holds the set of intensity values for all the screen

points.

• Stored intensity values are then retrieved from the refresh buffer and

"painted" on the screen one row (scan line) at a time.

• Random Scan Display Systems:

• Random scan monitors draw a picture one line at a time.

• To display a specified picture, the system cycles through the set of

commands in the display file, drawing each component line in turn.

• After all line drawing commands have been processed, the system

cycles back to the first line command in the list.

Examples of Display Devices

• Raster Display devices:

• A flat-panel computer display or TV has a rectangular

array of small light-emitting pixels that can individually be

set to different colors to create any desired image.

• Laser printers and ink-jet printers are based on scanning.

• A digital camera contains an image sensor comprising a

grid of light-sensitive pixels, each of which records the color

and intensity of light falling on it.

• A desktop scanner contains a linear array of pixels that is

swept across the page being scanned, making many

measurements per second to produce a grid of pixels.

• Vector display devices

• A pen plotter operates in a similar way and is an example of

a random-scan, hard-copy device.

Output Device- Color CRT

29

Have three different colored phosphors (red, green, and blue), arranged in

small groups.

Have three electron beams, corresponding to the three types of phosphors.

In the shadow-mask CRT , a metal screen with small holes (shadow mask)

ensures that an electron beam excites only phosphors of the proper color.

Output Device- LED and LCD

30

Flat-screen technologies, which are raster based.

Including light-emitting diodes (LEDs), liquid-crystal displays (LCDs),

and plasma panels.

all use a two-dimensional grid to address individual light-emitting elements.

The two outside plates each contain perpendicular parallel grids of wires .

Sending electrical signals to a wire in each grid, generates electrical field at

the intersection of two wires, can control the corresponding element in the

middle plate.

A LED panel contains light-emitting diodes that can be turned on and off by

the electrical signals sent to the grid.

In an LCD display, the electrical field controls the polarization of the liquid

crystals in the middle panel, thus turning on and off the light passing

through the panel.

A plasma panel uses the voltages on the grids to energize gases (becomes

glowing plasma) embedded between the glass panels holding the grids.

Hard-copy devices, such as printers and plotters, are raster based but cannot

be refreshed.

Projection systems raster devices. These systems use a variety of

technologies, including CRTs and digital light projection (DLP).

Output Device- LED and LCD

31

Input Devices

32

Physical Input Devices Input devices are the, keyboard, mouse, the joystick, and the data tablet.

Provides positional information to the system

Is equipped with one or more buttons to provide signals to the processor.

Often called pointing devices,

allow a user to indicate a particular location on the display.

Logical Input Devices characterized by its high-level interface with the user program.

For example, data input and output in C are done through functions such

as printf, scanf, getchar, and putchar, and through input (cin) and output

(cout) streams in C++.

Physical Input Devices

33

Pointing devices

allows the user to indicate a position on the screen, have one or more

buttons to allow the user to send signals to the computer.

The keyboard device

is a device that returns character ASCII codes that assigns a single

unsigned byte to each character.

The mouse and trackball

The motion of the ball is converted to signals sent to the computer by

pairs of encoders inside the device and turned by the motion of the ball.

The encoders measure motion in two orthogonal directions.

Optical detectors may be used rather than mechanical detectors to

measure motion.

Pressure-sensitive devices used in keyboards that perform similar

functions.

Physical Input Devices

34

Data Tablets Has rows and columns of wires embedded under its surface.

Touch-sensitive transparent screens that can be placed over the face of a

CRT have many of the same properties as data tablet.

Small, rectangular, pressure-sensitive touchpads are embedded in the

keyboards of many portable computers.

joystick The motion of the stick in two orthogonal directions is encoded,

interpreted as two velocities, and integrated to identify a screen location.

If the stick is left in its resting position, there is no change in the cursor

position and that the farther the stick is moved from its resting position,

the faster the screen location changes.

Space ball

like a joystick with a ball on the end of the stick;

pressure sensors in the ball measure the forces applied by the user.

The device measures six degrees of freedom values.

Memory Mapping , Video Memory

• Memory mapping:• The status of Each pixel on the screen was stored in a specific

memory address in the computers memory (memory mapped

display).

• Each pixel is numbered sequentially.

• By writing values to the correct locations in memory the

appearance of the screen can be controlled by a programmer.

• a program can find out if a pixel is turned on or off.

• Video Memory:• The portion of memory that is associated with the display. In the

PC architecture, this memory is usually physically located on the

graphics card, which is why you can buy 8Mb graphics cards,

16Mb graphics cards etc.

Monochrome Memory Mapping• In monochrome screens each pixel being

represented by one bit (on or off), color canbe represented in most of today’scomputers.

Color Representation - RGB System• The basic idea of RGB color space is that any color is displayed

by mixing three primary lights: red, green, and blue.

• Have 3-byte, each byte represents a number between 0 and

255 represent the degree of one primary color

• In color screens each pixel being represented by 3bytes, each byte have a value from 0 to 255, one byterepresent the Red Color, one represents the greencolor, and one for representing the Blue color.

Color Memory Mapping

Coordinates• It is much more convenient

for us to think in terms of

coordinates and leave it to

the computer to convert

the coordinates to memory

location itself.

• A file that contains graphics data;

for example, a GIF or PNG file.

• By knowing the height and depth of

the image, and values that

represent the color of each pixel, a

picture can be saved onto disk and

this is the approach taken by all the

common graphical formats such as

.gif’s, .jpeg’s, etc.

Image File

Image Storage• Most RGB image formats use 24 bits for each pixel. An image of

million-pixel need 3MB of raw information storage.

• Compression methods are used to reduce the storage requirement,

There are two types of compression methods:

• Lossless compression: No information is discarded.

• Lossy compression: some information is lost.• Popular image storage formats include:

• Jpeg format. This Lossy format compresses image blocks based

on thresholds in the human visual system. This format works well

for natural images.

• Tiff format. This format is most commonly used to hold binary

images or lossless compressed 8- or 16-bit RGB although many

other options exist.

• Ppm format. a lossless, uncompressed format is most often used

for 8-bit RGB images although many options exist.

• Png format . This is a set of lossless formats with a good set of

open source management tools.

Image Storage Methods – Raster Image• Raster Image:

• The images is considered as rectangular arrays of pixels, each pixel have

different colors stored as three numbers, for red, green, and blue.

• In a Monochrome system [black-and-white], each screen point is either

on (a bit value of 1) or off (a bit value of 0), so only one bit per pixel is

needed to store the intensity of screen positions.

• A system with 24 bits per pixel and a screen resolution of 1024 by 1024

requires 3 megabytes of storage for the frame buffer.

• Vector Image:

• The image is stored as a set of instructions (set of line drawing

instructions) for displaying the image (lines , shapes, areas) rather than

the pixels needed to display it.

• Are often used for text, diagrams, mechanical drawings.

• Advantage:

• Resolution independent and can be displayed well on very high

resolution devices.

• Disadvantage:

• They must be rasterized before they can be displayed.

2D drawings – Point and Line• 2D drawing are made up of Points, Lines and shapes.

• Shapes are made up of points

and lines

Exercise 1• Consider three different raster systems with resolutions of 640 by 480, 1280

by 1024, and 2560 by 2048. What size frame buffer (in bytes) is needed for

each of these systems to store 12 bits per pixel? How much storage is

required for each system if 24 bits per pixel are to be stored?

Answer:

• Frame-buffer size for each of the systems is

• 640 × 480 × 12 bits ÷ 8 bits per byte = 450 KB

• 1280 × 1024 × 12 bits ÷ 8 bits per byte = 1920 KB

• 2560 × 2048 × 12 bits ÷ 8 bits per byte = 7680 KB

• For 24 bits of storage per pixel, each of the above values is doubled.

900 KB & 3840 KB & 15360 KB

Suppose an RGB raster system is to be designed using an 8-inch by 10-inch

screen with a resolution of 100 pixels per inch in each direction. If we want to

store 6 bits per pixel in the frame buffer, how much storage (in bytes) do we

need for the frame buffer?

Answer

The size of frame buffer is (8 x 10 x 100 x 100 x 6)/ 8= 600000bytes

Exercise 2

Exercise 2

Suppose an RGB raster system is to be designed using an 8-inch by 10-inch screen with a

resolution of 100 pixels per inch in each direction. If we want to store 6 bits per pixel in the frame

buffer, how much storage (in bytes) do we need for the frame buffer?

Answer

The size of frame buffer is (8 x 10 x 100 x 100 x 6)/ 8= 600000bytes

How long would it take to load a 640-by-480 frame buffer with 12 bits per pixel, if 105

bits can be transferred per second? How long would it take to load a 24-bit-per-pixel

frame buffer with a resolution of 1280 by 1024 using this same transfer rate?

Answer

• Let X the time that will be taken to load a 640-by-480 frame buffer with 12 bits per

pixel.

Number of bits = 640 * 480 * 12 = 3686400 bits

1 sec 105 bits and X sec(s) 3686400 bits

Then X = 3686400/105 = 36.864 second

• Let X the time that will be taken to load a 1280 by 1024 frame buffer with 24 bits

per pixel.

Number of bits = 1280 * 1024 * 24= 31457280 bits

1 sec 105 bits and X sec(s) 31457280 bits

Then X = 31457280/ 105 = 314.5728 second

Exercise 3

Exercise 3How long would it take to load a 640-by-480 frame buffer with 12 bits per pixel, if 105

bits can be transferred per second? How long would it take to load a 24-bit-per-pixel

frame buffer with a resolution of 1280 by 1024 using this same transfer rate?

Answer

• Let X the time that will be taken to load a 640-by-480 frame buffer with 12 bits per

pixel.

Number of bits = 640 * 480 * 12 = 3686400 bits

1 sec 105 bits

X sec(s) 3686400 bits

Then X = 3686400/105 = 36.864 second

• Let X the time that will be taken to load a 1280 by 1024 frame buffer with 24 bits

per pixel.

Number of bits = 1280 * 1024 * 24= 31457280 bits

1 sec 105 bits

X sec(s) 31457280 bits

Then X = 31457280/ 105 = 314.5728 second

Exercise 4

Exercise 5

Exercise 6

Exercise 7

Exercise 8

Sheet 1 1. What is the computer graphics?2. What is meant by Computer Graphics API’s?3. What can the programmer do in CG’s?4. How can we use CG’s in solving Problems?5. What are the most common computer graphics applications?6. What are the most common computer graphics areas?7. Describe the difference between size and resolution?8. What is the graphics pipeline?9. Give an example of memory mapping for 10 X 10 resolution display device in case of

monochrome system?10. Give an example of memory mapping for 10 X 10 resolution display device in case of

color system?11. What is the location in memory for the pixel with the coordinates 3, 12 in a display

device with a 20 X 20 resolution?12. What is the memory size required for storing image of height 7 and depth 10 in case of:

(a) Monochrome display system (b) Color display system? 13. What are the common methods for storing and processing Images? 14. What are the popular image storage formats?15. Find out the size, resolution and color depth of the display you are using.16. Describe the difference between size and resolution?17. Give an example of memory mapping for 10 X 20 resolution display device in case of

monochrome and color?

Sheet 1

18. What the difference between mathematical point and computer graphics point? And

Mathematical line , computer graphics line?

19. What steps must a computer take to plot a point (22.25,10.4)?

20. What is the location in memory for the pixel with the coordinates 3 , 12 in a display

device with a 10 X 20 resolution?

21. What is the memory size required for storing colored image of height 7 and depth 10?

22. List the operating characteristics for the video display systems based on the CRT

technology.

23. List the operating characteristics for the following raster-scan display and random scan

display.

24. Define the resolution and the aspect ratio.

25. What the difference between mathematical point and computer graphics point? And

Mathematical line , computer graphics line?

26. What steps must a computer take to plot a point (22.25,10.4)?

27. What is the location in memory for the pixel with the coordinates 3 , 12 in a display

device with a 10 X 20 resolution?

28. What is the memory size required for storing colored image of height 7 and depth 10?

29. List the operating characteristics for the video display systems based on the CRT

technology.

30. List the operating characteristics for the following raster-scan display and random scan

display.

31. Define the resolution and the aspect ratio.