Download Computer Graphics

UNIT – I
BASIC CONCEPTS AND DEVICES
COMPUTER GRAPHICS
 Computer Graphics - refers creation, storage and manipulation
of pictures and images using digital computer.
 “A picture is worth than a thousand words “
 The term computer graphics was coined in 1960 by William
Fetter.
 The term Computer Graphics has been used in broad sense
to describe “ almost everything on computers that is not
Text or Sound”
 Typically Computer Graphics refers several different
things –
- The representation and manipulation of image data by
computer.
- The various technologies used to create and manipulate
images.
-The images so produced.
COMPUTER GRAPHICS APPLICATIONS









Graphs and charts
Computer Aided Design (CAD)
Virtual Reality Environments
Data visualizations
Education &Training
Computer Art
Entertainment
Image processing
Graphical User Interfaces
APPLICATIONS
 Early Applications of Computer Graphics
1. DataVisualization
 Charts and Graphs
2. Computer Aided Design (CAD) allows better conceptualization,
interaction, transfer of ideas
Entertainment
1. Films
2. Games
Virtual Reality Environments
Scientific Visualisation
COMPUTER ART
CG used in fine art and commercial art applications.
Computer Art
 GUI – Graphical User Interface Typical
Components Used:
• Menus
• Icons
• Cursors
• Dialog Boxes
• Scroll Bars
• Buttons
• Grids
• Sketching
• 3-D Interface
INPUT AND OUTPUT DEVICES
 Input, Output and Secondary Storage Devices are collectively
known as peripherals
Input Device
Computer
Output
Device
INPUT DEVICES
 Input devices are all those hardware
equipment that are
 used to enter data into the computer.
 Keyboard
 This is the most common and widely
used input device. There are different
types of keyboards. keyboard has:
- A Numeric Keypad
- Navigation Keys
- Function Keys
 Mouse or Trackball: The mouse helps the user to
point and access items on the computer. Its main
function is to control the cursor or pointer on the
computer’s screen. The mouse can have 2 or 3
buttons, used according to the software
application being used.
 Light Pen: It is a pen shaped device used to
select objects on a display screen. It is quite like the
mouse (in its functionality) but uses a light pen to
move the pointer and select any object on the screen
by pointing to the object or draw pic on screen.
Users of Computer Aided Design (CAD)
applications
commonly use the light pens to
directly draw on screen.
 Trackball : The trackball has the same basic
functions of the mouse. The only difference is that the
trackball is stationary and one doesn’t need to move
it on a mouse pad. In order to navigate with the
pointer, the user must move a ball situated at the
top of the device. Similar to the mouse, the
trackball has 2 or 3 buttons used to select items
from the screen.
 Touchpad: This is a small sensitive pad used on
portable computers(laptops). The touch pad is
used as a pointing device. The pointer is moved on
screen by touching the touch pad with the finger.
 Joystick : This device is mainly used for playing
computer games. As the name implies, it is like a
stick connected to a platform, which can be
moved in all directions. These movements in turn
will move something on screen depending on the
game. Usually joysticks have buttons also called
triggers.
20
OUTPUT DEVICES
O/p as
Soft Copy
Input
Process
O/p as
Hard Copy
VISUAL DISPLAY UNIT (VDU)
Features :
1. Resolution
2. Refresh Rate
3. Screen Size

VISUAL DISPLAY UNIT - MONITOR
 Pixel : pel / picture element. Smallest addressable unit of screen.
It has intensity information.
 Resolution: max. number of points that can be displayed without
overlap.
 This term refers to clarity or sharpness of display screen. The
more pixels there are per square inch .
 The greater number of points / pixels , higher the resolution.
Eg. 640 X 480, 1024 X 768, 1366 X 768.
 Refresh Rate: Refresh rate indicates how often a
displayed image is updated or redrawn on the monitor.
 Most monitors operate at a rate of 75 Hz which means
that the monitor is redrawn 75 times each second.
 Images displayed on monitors with refresh rates lower
than 75 Hz appear to flicker and can cause eye strain.
 The faster the refresh rate (the more frequently images
are redrawn), the better the quality of images
displayed)
24
 Aspect Ratio : The ratio of width to height of an object.
Gives the relationship of one side to the other, it is widely
used to describe the shape of aTV or computer screen.
 For example, the aspect ratio of a standard-definition (SD)
screen is 4:3 (means "4 to 3” ), which is a relatively
square rectangle.
 High-definition TV (HDTV) has a 16:9 ratio, which is a
wide rectangle. HD screens have resolution 1920X1880
pixels
16:9
4:3
Problem :Viewing 16:9 content on 4:3 screen. It is
called letterbox effect.
Problem :Viewing 4:3 content on 16:9 screen.
pillerboxing :able to see black stripes on left and
right.
The Video Monitors
 Video monitors are based on different
technologies like CRT, LCD , Plasma panel .
CATHODE RAY TUBE
 Electron gun generates a beam of electrons.
 That beam passes through focusing and deflection
system and strikes on specified position on phosphor
coated screen.
 When electron beam strikes phosphor that
phosphor spot emits light and thus the point on
screen is visible.
 Focusing system makes electron beam extremely
finely focused and makes highly concentrated small
spot.
2
DISPLAY TECHNIQUES
 CRT monitors have two
1.
2.
display methods :
Raster Scan Display
Vector Display / Random Scan displays
 These are based on the scan technology that is used
to control the electron beam while generating
graphics on the screen.
RASTER SCAN
A raster scan CRT works much like a television set.
 Light occurs when an electron beam stimulates a
phosphor.
 In raster scan, the electron beam from electron gun is
swept horizontally across the phosphor.
 After each horizontal sweep the beam is moved.
 After the bottom line is swept, the beam returns to the
top and the sweep process begins again

RASTER SCAN
RASTER SCAN
The lines numbered as 0, 1, 2, 3, 4, 5, …, 10 represent lines that the
electrons beam is “painting” on the screen from left to right.
 When the beam reaches the right side of the bottom line, it has to move
back to the upper left corner of the screen.
 Horizontal Retracing: At the end of each scan line, the electron beam
returns to the left side of the screen to begin displaying the next scan
line. The return to the left of the screen, after refreshing each scan line is
called the horizontal retrace.
i.e. It is used to refer to the beam moving back to the left at the end of
each line.
 Vertical Retracing: At the end of each frame, the electron beam returns
to the top left corner of the screen to begin the next frame is called the
vertical retrace.
i.e. Refer to the movement from bottom to top.

RASTER SCAN
Interlacing: It is the method of incrementally displaying a
visual on a CRT. On some raster scan systems, each frame is
displayed in two passes using an interlaced refresh procedure.
 In the first pass, the beam sweeps across every other scan line
from top to bottom. Then after the vertical retrace, the beam
sweeps out the remaining scan lines.
 The screen is painted 60 times per second but only half of the
lines are painted per frame.

BASIC GRAPHICS SYSTEM
Output device
Input devices
Image formed in FB
35
FRAME BUFFER
 Framebuffer -A frame buffer is large contiguous piece of
computer memory which is used to store the display image
(intensity ).
 Pixel – one element of the frame buffer.
 The different kinds of memory used for frame buffers are disk, IC
shift registers, drums etc.
 To display a pixel on raster display, minimum 1 bit is used in frame
buffer.
 When 1 bit is used to generate a pixel, the picture will be Black
and white(0 & 1) i.e monochrome.
 A frame buffer stores information in digital form while raster display
requires voltage to generate pixel.
 Bit Planes or Bit Depth is the number of bits corresponding to
each pixel.
39
 A single bit frame buffer raster CRT display is as following
Bitmap :
It is the frame buffer which used in a monochrome
system with one bit per pixel.
3-BIT COLOR DISPLAY
3
red
green
blue
COLOR: black
red
green blue
yellow
cyan
magenta
white
R
0
1
0
0
1
0
1
1
G
B
0
0
0
0
1
0
0
1
1
0
1
1
0
1
1
1
True Color Display
24 bitplanes, 8 bits per color gun. 224 = 16,777,216 colors
8
8
8
Red
Green
Blue
Pixmap :
It is the frame buffer which used for systems with multiple bits
per pixel.
RANDOM SCAN DISPLAYS
 In this, a CRT has the electron beam directed only to the parts
of the screen where a picture is to be drawn.
 It displays picture one line at a time called vector display, e.g.
of this is pen plotters.
 Picture definition is stored as a set line drawing commands in
the memory area called refresh display file or refresh buffer.
 Refresh rate depends upon no. of line to be displayed and all
component lines are drawn 30 – 60 times per second.
 More suited for line drawing applications such as
architecture and manufacturing.
 Display file :in vector refresh display only line commands
necessary to make picture are stored. These line
commands are stored in file is called display file. Picture
image is firstly stored in display file in form of commands.
 Display file interpreter: program executes commands
in Display File and convert these commands in to
actual picture is called display file interpreter, and it
serves as interface between graphics program and display
device.
DISPLAY FILE STRUCTURE
Commands in DF are made up of two parts asi) Operation code(op code) :- Op code identifies what
type of command it is
ii) Operands : provide co-ordinates of point(x,y) to process
command. We consider here only two commands LINE and
MOVE. Lets define OP code 1 for MOVE and 2 for LINE.
DF_OP
DF_X
DF_Y
1
3
3
2
3
10
2
10
10
2
10
3
COMPARISON : RASTER VS. RANDOM
• Random Scan :
1. The picture image is created using a complex series of dots or
pixels.
2. Raster stores the colour of each pixel in memory, and thus
one needs a lot more memory than if using vector.
3. Raster pictures can be enlarged but they tend to lose
quality.
4. Raster images are also known as bitmap images. (These type
of images use bits (1 or 0)to describe each pixel’s attributes
such as colour. )
5. The quality of a raster image depends entirely on
the image resolution
9
• Vector Scan / Random Scan:
1. Vector – pictured are composed of mathematically defined
geometric shapes such as points , line, arcs and other
geometric figures.
2. Requires intelligent electron beam i.e. processor controlled
.
3. If the picture or diagram is enlarged, it does not affect the
quality.
4. Vectors are best used where high contrast and color is
needed such as the design of logos and geographical
maps.
5. Vector images have many advantages, but primary
disadvantage is they are unsuitable for producing photo
realistic images
50
Base of
Difference
Raster Scan System
Random Scan System
The electron beam is swept
The electron beam is directed
Electron
across the screen, one row
only to the parts of screen where
Beam
at a time, from top to
a picture is to be drawn.
bottom.
Its resolution is poorIts resolution is good because
because raster system inthis system produces smooth
Resolution contrast produces zig-zaglines drawings because CRT
lines that are plotted asbeam directly follows the line
discrete point sets.
path.
Picture definition is stored
as a set of intensity valuesPicture definition is stored as a
Picture
for all screen points, calledset of line drawing instructions
Definition
pixels in a refresh bufferin a display file.
area.
Base of
Difference
Realistic
Display
Draw an
Image
Raster Scan System
The capability of this system to
store intensity values for pixel
makes it well suited for the
realistic display of scenes
contain shadow and color
pattern.
Screen points/pixels are used to
draw an image.
Random Scan System
These systems are designed
for line-drawing and can’t
display realistic shaded
scenes.
Mathematical functions are
used to draw an image.
Drawbacks of CRT Technology:
 They are bulky. In order to increase the screen width in a
CRT set, you also have to increase the length of the tube (to
give the scanning electron gun room to reach all parts of
the screen).
FLAT PANEL DISPLAYS
Class of video devices that have
• Low volume,
• Low weight
• Less power requirement as compared to CRT.
• Thinner than CRT.
Examples: wall frames, pocket notepads, laptop computer screens.
Two Types:
1. Emissive displays (emitters) : are the displays that converts the
electrical energy into light. e.g. Plasma panels, thin – film
electroluminescent displays and light emitted diodes.
2. Non-emissive displays (non emitters): Use optic effects to
converts sunlight or light from other sources into graphics
pattern. e.g. : Liquid Crystal Device
EMISSIVE DISPLAYS
1.
Plasma Panels: Gas Discharge Displays
 Constructed by filling the region between two glass plates
with a mixture of gases that usually includes neon.
 A series of vertical conducting ribbons is placed on one glass
panel and set of horizontal ribbons is built into other glass
panel.
• Firing voltage is applied to a pair of horizontal and
vertical conductors cause the gas at intersection of two
conductors to break down into a glowing plasma of
electrons and ions
• Picture is stored in a refresh buffer.
• The firing voltages are applied to refresh the pixel
positions 60 times per second.
• Disadvantage : They were strictly monochromatic
devices, but systems have been developed that are now
capable of displaying color and gray scale.
EMISSIVE DISPLAY
2. Thin – film Electroluminescent Displays:
• Similar in construction to a plasma panel.
• Difference is that the region between the glass plates is
filled with a phosphor, such as zinc sulphide doped with
manganese, instead of a gas.
• Electroluminescent displays require more power than
plasma panels.
• Good color and gray scale displays are hard to achieve.
EMISSIVE DISPLAY
3. Light Emitting Diode (LED)
• A matrix of diodes is arranged to form the pixel positions
in the display, and picture definition is stored in a refresh
buffer.
• As scan line refreshing of a CRT, information is read from
the refresh buffer and converted to voltage levels that are
applied to the diodes to produce the light patterns in the
display.
NON EMISSIVE DISPLAY
• Liquid Crystal Display (LCD):
A Liquid crystal display is a passive device, which means it
doesn’t produce any light to display characters, images, video
and animations. But it simply alters the light travelling through
it.
LIQUID CRYSTAL DISPLAY
 “Liquid Crystal” is actually a combination of two states of




55
matter – the solid and the liquid. They have both the properties
of solids and liquids. Liquid crystals are more heat sensitive
than usual liquids.
The main principle behind liquid crystal molecules is
that when an electric current is applied to them, they tend to
untwist.
Produces a picture by passing polarized light from the
surroundings or from an internal light source through a liquidcrystal material that can either block or transmit the light.
The intersection of the two conductors defines a pixel position.
Polarized light is twisted as it passes through the opposite
polarizer. The light is then reflected back to the viewer.
 To turn off the pixel, voltage is applied to the two
intersecting conductors to align the molecules so that the
light is not twisted
 An LCD is made of two pieces of polarized glass that
contain a liquid crystal material between them.
 A backlight creates light that passes through the first piece
of glass. This light source knows nothing about the
image information.
 At the same time, electrical currents cause the liquid
crystal molecules to align to allow varying levels of light to
pass through the second piece of glass and create the images
you see.
• Advantages of an LCD’s:
1. LCD’s consumes less amount of power compared to CRT and
LED
2. LCD’s are consist of some microwatts for display in
comparison to some mill watts for LED’s
3. LCDs are of low cost.
4. Provides excellent contrast.
5. LCD’s are thinner and lighter when compared to cathode ray
tube and LED.
• Disadvantages of an LCD’s:
1. Require additional light sources.
2. Range of temperature is limited for operation (0 to 60 ° C).
3. Low reliability.
4. Speed is very low.
INTERACTIVE DEVICES
•

Input Devices
• Keyboards , Mouse/3D mouse , Digitizer
• Trackball and Space ball , Joysticks, Image scanner
• Data Glove , Touch panels, Light pens
Output Devices
• Color graphics display/Head mounted display
• Printer
• Film recorder
• Video output (Video tape, LD recorder)
• Pen plotter
• Input Devices:
1. To enable the user to interact.
2. Two classes. Locators and Selectors.
• Locators:
1. give position information.
2. The computer receives from a Locater the coordinates
for a point.
3. It can indicate a position on the screen.
e.g. Joystick
• Selector Device:
1. To select a particular graphical object.
2. It may pick a particular item.
e.g. Touch panels, Light Pen
INTERACTIVE DEVICES
• Touch panels:
1. Allows displayed objects or screen positions to be
selected with the touch of a finger.
2. For the selection of processing options that are
represented with graphical icons.
3. Examples : Plasma panels designed with touch
screens. Touch input can be recorded using three
methods.
• Types of Touch Panels:
1. Optical touch panels
2. Electrical touch panels
3. Acoustical touch panels
• Optical touch panels:
1. Employ a line of infrared light emitting diodes
(LEDs) along one vertical edge and along one
horizontal edge of the frame.
2. The opposite vertical and horizontal edges contain
light detectors.
3. These detectors are used to record which beams are
interrupted when the panel is touched.
4. The two crossing beam that are interrupted identify
the horizontal and vertical coordinates of the screen
position selected.
5. Positions can be selected with an accuracy of about ¼
inch.
• Electrical Touch Panels
1. Constructed with two transparent plates separated
by a small distance.
2. One of the plates is coated with a conducting
material and the other plate is coated with a
resistive material.
3. When the outer plate is touched, it is forced into
contact with the inner plate.
4. This contact creates a voltage drop across the
resistive plate that is converted to the coordinate
values of the selected screen position.
• Acoustical touch panels:
1. In these high frequency sound waves are generated in
the horizontal and vertical directions across a glass
plate.
2. Touching the screen causes part of each wave to be
reflected from the finger to the emitters.
3. The screen position at the point of contact is
calculated from a measurement of the time interval
between the transmission of each wave and its
reflection to the emitter.
• Light Pen
1. A photocell mounted in a penlike case.
2. It may be pointed at the screen on a refresh display.
3. The pen will send a pulse whenever the phosphor
below it is illuminated.
4. The light pen can easily determine the time at which
phosphor is illuminated.
5. Since there is only one electron beam on the refresh
display, only one line segment can be drawn at a time
and no two segments are drawn simultaneously.
6. The light pen tells us which display file instruction
was being executed in order to illuminate the
phosphor at which it was pointing.
DATA GENERATING DEVICES
• Scanners :
1. Drawings, graphs, color and black & white
photos or text
2. By passing an optical scanning mechanism over
the information.
3. The gradations of gray scale or color are then
recorded and stored in an array.
4. We can apply transformations to rotate, scale or
crop the picture.
5. Editing operations can be performed on the
stored documents.
• Digitizer:
1. A device for drawing, painting or interactively
selecting co‐ordinate positions on an object.
2. To input co‐ordinate values in either a 2D or 3D
space.
3. Discrete co‐ordinate positions can be joined with
straight line segments to approximate the curve or
surface shapes.
4. 3D digitizers use sonic or electromagnetic
transmissions to record positions.
Video1
Video2
• Printer :
1. Output devices that transfer the output of the
computer on paper (hardcopy)
2. Two types:
a. Impact – refers to all those printers whose
printing heads touch the paper. e.g. Dot matrix
printer.
b. Non impact – are all those printers whose printing
heads do not touch paper
e.g. Laser or an Ink-Jet printer
DATA COMPRESSION TECHNIQUES
• Lossy Compression:
Discards some information
Reduces Color resolution
• Lossless Compression
No information loss
 File Types:
1.
2.
3.
4.
BMP
JPEG
GIF
TIFF
Tagged Image File Format (TIFF)
 Widely




used
file
format
also
designed for
printing.
A bitmap image format.
TIFF supports lossless LZW compression which also makes
it a good format for Photoshop documents.
TIFF files are commonly used in print design and desktop
publishing because they can store large, high quality
images such as photos. Often, printers will prefer or
requireTIFF files over JPG images or other formats.
TIFF files are raster images and platform independent,
meaning they will work on various operating systems such as
Mac andWindows.
Logical organization of a TIFF file
File Organization
 TIFF files are organized into three sections: the
Image File Header (IFH),
2. The Image File Directory (IFD),
3. Bitmap data.
 Each IFD contains one or more data structures called tags
 Image File Header (IFH):
 The TIFF IFH contains three fields of information and is a
total of only eight bytes in length
1.
 Image File Directory (IFD):
 IFD consists of 2byte count of tag fields followed by tag
fields ,followed by 4 byte offset of the next IFD.
 Each IFD is limited to a total of 256 tag fields.
 Like a header, it contains information on the height,
width, and depth of the image, the number of color
planes, and the type of data compression used on the
bitmapped data.
 IFD is dynamic and may not only vary in size
 TAGS:
 Each tag is a 12-byte record that contains a specific piece of
information about the bitmapped data. A tag may
contain any type of data.
 Tags can indicate the basic geometry of the image, define
how the image data is arranged, and indicate such facts as
whether one or another image compression option has
been used.
• The TIFF specification defines the concept of baseline TIFF
images
• These baselines are defined by the type of image data they
store:
• bi-level,
• gray-scale,
• palette-color,
• full-color
• TIFF Classes: The five classes are defined by theTIFF 5.0
version are:
• Class B for (bi-level),
• Class F for (fax)
• Class G for (gray-scale),
• Class P for (palette-color),
• Class R for (full-color RGB).
70
• TIFFVersion 6.0 uses compression schemes such as
• CCITT Group 2 2D
• CCITT Group 4 2D
• LZW COMPRESSION
• JPEG compression
• Advantages:1. it is platform independent
2. It is independent of computer system also.
3. It is versatile and flexible.
4. It supports many compression schemes.
5. It supports additional information about images.
• Disadvantages:1. It does not support multiple images in one file.
2. Complex file format.
3. It is open ended format, hence programmer can make
changes
GTK+
 It is called the “The GIMP ToolKit”. GNU Image Manipulation
Program
 GTK+ is cross-platform toolkit for creating graphical user
interfaces.
 In order for software to be considered cross-platform, it must
be able to function on more than one computer architecture or
operating system.
 GTK+ is free software and part of the GNU Project
 GTK+ is written in C .
 It supports a wide range of languages, not only C/C++. But
languages such as Perl and Python
 The GTK+ itself depends on the following libraries.
 Glib
 Pango
 ATK
 GDK
 GdkPixbuf
 Cairo
GTK+ OVERVIEW AND ITS LIBRARIES
 GLib, a low-level core library that forms the basis of GTK+.
 It provides data structure handling string utilities, enables error
reporting, message logging, working with threads and other useful
programming features.
 It provides replacements for some standard libc functions, such as
malloc.
 It also provides routines for handling:
 Doubly Linked Lists
 Singly Linked Lists
 Timers
 String Handling
 Error Functions
 Pango : a library for layout and rendering of text with an emphasis
on internationalization. It forms the core of text and font handling
for GTK+.
 Cairo :a library for 2D graphics with support for multiple output
devices.
 ATK : a library for a set of interfaces providing accessibility. By
supporting the ATK interfaces, an application or toolkit can be
used with tools such as screen readers, magnifiers, and alternative
input devices.
 GdkPixbuf library is a toolkit for image loading and pixel buffer
manipulation.
BASIC TYPES
1. gchar: Corresponds to the standard C unsigned char
type.
2. guchar: Corresponds to the standard C unsigned char
type.
3. gint: Corresponds to the standard C int type
4. gshort: Corresponds to the standard C short type
5. glong: Corresponds to the standard C long type.
6. gint8: A signed integer guaranteed to be 8 bits on all
platforms.
7. gString : is similar to a standard C string, except that it
grows automatically as text is appended or inserted. Also,
it stores the length of the string.
WIDGETS
Widgets are basic building blocks of a GUI application.
For example a button, a check box or a scroll bar.
80
GTK+ EVENTS AND SIGNALS
 GTK+ library is an event driven system. All GUI applications are




event driven.
The applications start a main loop, which continuously checks for
newly generated events. If there is no event, the application waits
and does nothing.
In GTK+ an event is a message from the X server.
When the event reaches a widget, it may react to this event by
emitting a signal.
The GTK+ programmer can connect a specific callback to a
signal.The callback is a handler function, that reacts to a signal.
When an event occurs, such as the press of a mouse button, the
appropriate signal will be "emitted" by the widget that was pressed.
This is how GTK does most of its useful work.
To make a button perform an action, we set up a signal handler to
catch these signals and call the appropriate function. This is done by
using a function such as:
gint gtk_signal_connect( GtkObject *object,
gchar *name,
GtkSignalFunc func,
gpointer func_data );
where the first argument is the widget which will be emitting the
signal, and the second the name of the signal you wish to catch. The
third is the function you wish to be called when it is caught, and the
fourth, the data you wish to have passed to this function.
SIMPLE PROGRAM
#include <gtk/gtk.h>
int main( int argc, char *argv[]) {
GtkWidget *window;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_widget_show(window);
gtk_main();
return 0;
}
gtk_init(&argc, &argv);
Here we initiate the GTK+ library. This sets up a few things for
us such as the default visual and color map
window
=
gtk_window_new(GTK_WINDOW_TOPLEVEL);
We create a GtkWindow widget. The window type is
GTK_WINDOW_TOPLEVEL. Toplevel windows have a
titlebar and a border.
gtk_widget_show(window);
After we have created a widget, we must show it.
gtk_main();
This code enters the GTK+ main loop. From this point,
the application sits and waits for events to happen.