Introduction to

Computer Graphics

Rawesak Tanawongsuwan
ccrtw@mahidol.ac.th
 3 64

Computer Graphics
• Production and display of still images stored in
digital form

• Digitize printed image with a scanner

• Capture image from digital camera

• Grab frame from video camera

• Create in digital form using graphics

package

• Generate visual representation of data

 3

Image
 3 66–67

Rendering
• Image is displayed on monitor etc as array of
pixels
• Rectangular (usually square) dots of colour

• Program (e.g. Web browser) sets pixels to an

appropriate colour to produce desired image
• Pixels merge optically to produce effect of
continuous tone

• Program must maintain a model of the image

• May be stored in a file and read by program
 3 67–68

Bitmapped and Vector Graphics

• Bitmapped graphics – image is modelled as an

array of pixel values

• Render by direct mapping of logical pixels to

physical pixels of screen

• May need scaling and clipping

• Vector graphics – image is modelled as

mathematical description of curves, shapes

• Render by computing pixels from description

 3

Bitmapped graphics
 3

Types of bitmapped images

http://www.prepressure.com/image/bitmapvector.htm
 3

Vector graphics

http://www.prepressure.com/image/bitmapvector.htm

http://tds.ic.polyu.edu.hk/_images/duplicate/vector_graphic_decomposition.gif
 3 68–69

Memory Requirements
• Bitmapped – any picture of wxh pixels, using c
bytes per pixel occupies whc bytes

• For a given dimension, the size of the

bitmapped image is constant (uncompressed),
independent of the details in the image

299

755
 3 68–69

Memory Requirements
• Vector – space required depends on complexity
of picture (how many shapes, segments of
path, etc)

• Usually vector graphics smaller than

bitmapped
 3 68–69

Memory Requirements
• 128 px square with 20px blue outline filled in
red

• Bitmap using 24 bits per pixel, 128x128x3 =

48kbytes

• Vector specified in SVG:

• <path fill="#F8130D" stroke="#1E338B"

stroke-width="20"
d="M118,118H10V10h108V118z"/>

• 86 bytes (plus 198 bytes SVG boilerplate)

 3 70–71

Image Editing
• Vectors – drawing programs (Illustration, Freehand)

• Select individual graphic objects (shapes, paths,

&c)

• Transform size, position, angle, &c

• Change attributes: stroke and fill &c

• Bitmaps – painting programs (Paint, Photoshop)

• Select areas of pixels

• Apply effects and filters

 3

Paint
 3

Photoshop
 3

Illustrator
 3 71

Scaling
• Vectors
• Scaling is a simple mathematical operation on
stored description (before rendering)
• Curves and lines remain smooth at all sizes
• Resolution-independent -- can be scaled to any
size and printed on any output device at any
resolution without losing its detail or clarity
• Good for type and bold graphics that must retain
crisp lines when scaled to various sizes--for
example, logos.

From Adobe Illustrator help file

 3

Scaling
• Bitmaps
• Interpolate pixel values
• More or less sophisticated algorithm
• Usually produces loss of quality, blurring, jaggedness
• Resolution dependent -- that is, they represent a fixed
number of pixels
• Appear jagged and lose detail if they are scaled on-
screen or if they are printed at a higher resolution than
they were created for.
 3 73–75

Combining Vectors & Bitmaps

 3

Combining Vectors & Bitmaps

• Rasterize vectors
• Lose all their vector properties
 3

Combining Vectors & Bitmaps

• Trace bitmaps
• Difficult and can only produce an
approximation (parameterized)

http://iit.bloomu.edu/vthc/Photoshop/BLENDING/selectiontools.htm
 3

Combining Vectors & Bitmaps

• Import bitmaps into vector drawing programs
• Treated as indivisible objects
 3

Combining Vectors & Bitmaps

• Apply complex strokes to

vectors to approximate
bitmapped appearance

http://www.creativepro.com/story/feature/22490.html

http://www.creativemac.com/2003/11_nov/features/download51031103.htm
 3 75–78

Layers
• Organizational device used in both sorts of
graphics, especially useful in bitmaps
• Permits separation and manipulation of
different parts of a bitmapped image
• Digital version of clear sheets of acetate,
stacked on top of each other
• Areas without coloured pixels/graphic
objects are transparent so lower layers
show through
• Compositing – combine layers using different
blending modes (digital collage)
 3

Creatively Blending Layers

• This mountain lake photo with the hot air balloon demonstrates a number of the
different blending modes that Layers offers. There are ten different layers in this
image each using a different blend mode, all with the same hot air balloon photo
(which was outlined with one pixel feathering, copied and pasted into different layers
over the background image). Starting at the top left and going across the top to the
right, these layer blend modes are: Normal, Multiply, Hard Light, Darken and
Difference, all used with 100% opacity. Along the bottom in the "reflected" image of
the balloon, going from left to right, the modes used are: Screen, Overlay, Soft Light,
Lighten and Exclusion (also all at 100% opacity). This image demostrates ten of the
seventeen Layer Blending modes available in Photoshop

http://www.carlvolk.com/photoshop15.htm
 3

Creatively Blending Layers

http://www.carlvolk.com/photoshop15.htm
 3

Graphics/Image Data Types

• We may create pictures using vector and/or bitmapped graphics

• At the end when we want to output the final pictures to the

display or to the printer, we need to store them in some image
structures

• There are several types of images that we should know

• 1-bit images

• 8-bit gray-level images

• 8-bit color images

• 24-bit color images

 3

1-bit Images
• Each pixel is stored as a single bit (0 or 1)

monochrome image

• “Lena” image is a standard image used to illustrate

many algorithms in image processing field
 3

8-bit Gray-level Images

• Each pixel has a gray-value between 0 and 255. Each pixel is
represented by a single byte; e.g., a dark pixel might have a
value of 10, and a bright one might be 230

• A 640x480 grayscale image requires 300 KB

 3

24-bit Color Images

• In a color 24-bit image, each pixel is represented
by three bytes, usually representing RGB.

• This format supports 256x256x256 possible

combined colors, or a total of 16,777,216
possible colors.

• However such flexibility does result in a storage

penalty: A 640x480 24-bit color image would
require 921.6 kB of storage without any
compression

• An important point: many 24-bit color images

are actually stored as 32-bit images, with the
extra byte of data for each pixel used to store an
alpha value representing special effect information
(e.g. transparency)
 3

RGB components
RED

GREEN BLUE
 3

8-bit Color Images

• Many systems can make use of 8 bits (256 colors) of

color information in producing an image

• Such image uses the concept of a lookup table to

store color information

• The image stores not color, but instead just a set

of bytes which an index into a table with 3-byte
values that specify the color for a pixel with that
lookup table index
 3

File formats

• P3

• # example from the man page

• 44

• 15

• 0 0 0 0 0 0 0 0 0 15 0 15

• 0 0 0 0 15 7 0 0 0 0 0 0

• 0 0 0 0 0 0 0 15 7 0 0 0

• 15 0 15 0 0 0 0 0 0 0 0 0
 3 78–79

File Formats
• Many different graphics file formats in existence

• Different ways of encoding image data

• Different amounts/form of supplementary data

• (Bitmaps) Different compression methods

• Lossless – image can be reconstructed exactly

from compressed version

• Lossy – some information discarded, image can

only be reconstructed approximately
 3

Examples of 2D bitmap
specifications

• BIFF, BMP, BW, CGM, DRAW, DWG, FAX, EPSF,

FIG, FITS, GIF, GL, HDF, ICC, IFF, JPEG, MIFF,
NAP, netCDF, PIX, PCX, PNG, PBM, RLE, RAS,
RGB, SLD, SPRITE, TGA, TIFF, VIFF, X, XBM,
XPM, XWD

http://www.dcs.ed.ac.uk/home/mxr/gfx/
 3 79–80

WWW Bitmapped Formats

• GIF (Compuserve Graphics Interchange Format)

• Lossless, 256 colours (indexed)

• Best suited for images with few distinctive colors (e.g., graphics or
drawing)

• One color can be designated as transparent

• Comes in two formats:

• GIF87a: The original specification.

• GIF89a: The later version. Supports simple animation via a

Graphics Control Extension block in the data, provides simple
control over delay time, a transparency index, etc.

• Require a license fee to be paid for any program that implements GIF
compression or decompression
 3

WWW Bitmapped Formats

• JPEG (Joint Photographic Experts Group)

• JPEG: The most important current standard for

image compression

• The human vision system has some specic limitations

and JPEG takes advantage of these to achieve high
rates of compression

• JPEG allows the user to set a desired level of quality,

or compression ratio (input divided by output)

• Lossy (variable quality), millions of colours

 3

WWW Bitmapped Formats

• PNG (Portable Network Graphics)

• Meant to supersede the GIF standard, and extends it further

• Lossless, variable number of colours, W3C standard

• Special features of PNG files include:

• Support for up to 48 bits of color information

• Files may contain gamma-correction information for correct

display of color images, and alpha-channel information for control
of transparency

• The display progressively displays pixels in a 2-dimensional

fashion by showing a few pixels at a time over seven passes
through each 8x8 block of an image.
 3

Other popular formats

• TIFF (Tag Image File Format)

• The support for attachment of additional information

(referred to as “tags”) provides a great deal of flexibility

• The most important tag is a format signifier: what type of

compression etc. is in use in the stored image

• TIFF can store many different types of image: 1-bit,

grayscale, 8-bit color, 24-bit RGB, etc.

• TIFF was originally a lossless format but now a new JPEG

tag allows one to opt for JPEG compression

• The TIFF format was developed by the Aldus Corporation

in the 1980's and was later supported by Microsoft

• Not all programs can read this format

 3

PS
• Postscript is an important language for typesetting, and many
high-end printers have a Postscript interpreter built into them

• Postscript is a vector-based picture language, rather than pixel-

based: page element denitions are essentially in terms of vectors.

• Postscript includes text as well as vector/structured graphics.

• GL bit-mapped images can be included in output files.

• Encapsulated Postscript les add some additional information

for inclusion of Postscript les in another document

• Postscript page description language itself does not provide

compression; in fact, Postscript files are just stored as ASCII.
 3

PDF

• Another text + figures language has begun to supersede

or at least parallel Postscript: Adobe Systems Inc. includes
LZW compression in its Portable Document Format (PDF)
file format

• PDF files that do not include images have about the

same compression ratio, 2:1 or 3:1 as do files
compressed with other LZW-based compression tools
 3

Other formats
• Microsoft Windows: WMF: the native vector file format for the
Microsoft Windows operating environment

• BMP (Microsoft Windows Bitmap Format): Platform-

dependent, but most likely support by other systems as well

• Macintosh: PAINT and PICT: PAINT was originally used in the

MacPaint program, initially only for 1-bit monochrome images. It
is used in MacDraw (a vector-based drawing program)

• X-windows: PPM: the graphics format for the X Window

system. PPM supports 24-bit color bitmaps, and can be
manipulated using many public domain graphic editors, e.g., xv
 3

Animated GIF
 3 81–82

Vector Formats
• SVG (Scalable Vector Graphics)

• W3C standard, not presently widely used

• SWF (Flash)

• Primarily for vector animation, but can be

used for still vector graphics; de facto
standard

• EPS (Encapsulated PostScript)

• Primarily print, use declining, superseded by

PDF