Digital Media
Dr. Jim Rowan
ITEC 2110
Over the next several classes…
• In the next several lectures we will be covering these
topics:
– Vector graphics
– Bitmapped graphics
– Color
• It will be presented in this order
– Bitmapped graphics
– Vector graphics part 1
– Color parts 1 & 2
– Vector graphics part 2: 3D
Computer Graphics...
• A very different viewing media than print
– Usually consumed on a fairly low resolution
monitor
– Forcing us to look carefully at the processes that
move stuff from the real world to the computer...
AND BACK!
• Graphic images work very differently on a
screen than when in print
–
–
–
–
can be seen with lights out
will be viewed from different resolution monitors
viewing angles are different
reflections off screen
Computer Graphics
• Computer graphics on the Internet
– fostered the shift away from print based media
– has begun to develop its own visual vocabulary
• Inside the computer there’s a numeric model of a realworld phenomenon (through sampling)
• Two ways to model computer graphics (2D images)
– bitmapped images
– vector graphics
But First,
More on “Telling the story”
• The WAY you represent data affects
how it is interpreted…
• In words
• In graphs
• In images
Heard as an ad for a legal firm:
Has your disability claim been denied?
We win 75% of all denied disability
claims!
How is that possible?
(it implies that all you need to do is hire them and you have a 75%
chance of winning)
Car Insurance Ads
• Several different insurance ads make
the same basic claim:
• People who switch to us save $400 a
year
• How is that possible?
(it implies that all you need to do is switch to them and you will save
$400)
Which hospital would you
choose?
• You need heart bypass surgery
• You have a number of hospitals to
choose from
• You make your decision based on
statistics
• Do you choose the hospital with the
highest or lowest death rate for that
procedure?
The way you display the data
affects how it is understood
• This is a field of study all by itself that
includes computer graphics, cognitive
science and psychology
• The way data is displayed affects how people
interpret the data
– The colors used
– The numeric scales used
• Different types of graphs emphasize different
aspects of the numbers
– pie charts
– bar charts
– line graphs
Is this the graph of a stable
company?
income
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Is this the graph of a stable
company?
income
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Want more?
Designing information display
• How to lie with statistics
• Edward Tufte, Yale University
– Visual Display of Quantitative Information
– Envisioning Information
– Visual Explanations
Now about images…
Computer Display types
• Now... all are rectangular arrays of
pixels
• It’s not always been that way
– Early graphics (1976) used a “steerable”
electron gun, not raster graphics
– Since then...
• we have moved away from electron gun…
Internal and External
graphics models
• Internally an application keeps a numeric model
– Inside a computer it’s all numbers
• To display the internal model so we can see it,
an application must project this internal model
onto a display
– The internal model, the numbers, are in the computer
– This process of projecting this model onto a display is
called “rendering”
As we’ve seen…
Two approaches to
internal graphic modeling
• Why two approaches?
– drastic file size differences
– each is good for its type of image
– each has its own unique advantages
• Bitmapped graphics
– grandfathered name... more like pixelmapped graphics
• Vector graphics
– think of is as object graphics because you
describe objects using vectors (formulas)
With bitmapped graphics...
• There are logical and physical pixels
– images are modeled internally as an array of pixel
values... the logical pixels
– physical pixels are the actual dots on screen
• Moving from logical and physical pixels
– called rendering
– may be different size, shape and different
resolution
– will probably require clipping and scaling to move
from logical to physical pixels
– so let’s look at how this happens… starting with a
bitmapped image
00011000000011110000010110100000111100000001100000
A true bitmapped image is black and white
Each logical pixel is represented by a single bit
When color came along it borrowed the idea...
except that each logical pixel became a 3 byte
RGB color specification instead of a single bit
24 Bit RGB
• RGB
– red
– green
– blue
• 24 bits
– 8 bits for red, 8 bits for green & 8 bits for blue
• 3 bytes
– 1 byte for red, 1 for green & 1 for blue
• you get 2**8 = 256 different shades of red,
256 different shades of green and 256
different shades of blue
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
255
255
255
255
255
255
255
255
255
0
0
255
0
0
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
0
0
255
0
0
255
0
0
255
0
0
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
0
0
255
255
0
0
0
0
255
0
0
255
255
0
0
0
0
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
0
0
255
0
0
255
0
0
255
0
0
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
0
0
255
0
0
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
255
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
1111 1111 . 1111 1111 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
1111 1111 . 0000 0000 . 0000 0000
0000 0000 . 0000 0000 . 1111 1111
0000 0000 . 0000 0000 . 1111 1111
1111 1111 . 0000 0000 . 0000 0000
0000 0000 . 0000 0000 . 1111 1111
...
for 1080 more bits...
1111 1111 . 1111 1111 . 1111
255
255
255
0
0
255
72 bits in the color table
100 bits in the pixel map
255
0
0
172 bits total
00
00
00
01
01
00
00
00
00
00
00
00
01
01
01
01
00
00
00
00
00
01
10
01
01
10
01
00
00
00
00
00
01
01
01
01
00
00
00
00
00
00
00
01
01
00
00
00
00
00
Question:
With 2 bits encoding the color, if
we expanded the color table,
how many colors could be
represented?
Vector graphics
• Internal model is very different than
bitmapped graphics
• Images are described as mathematical
equations
• Rendering is very different
– must translate EQUATIONS to physical pixels
– Simple to clip or scale
– must compute the array of physical pixels from
the equations
bitmapped graphic
vector graphic
Here are two images, blue squares with smaller colored squares inside them
Both are displayed as 1024 X 1024 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would have the larger (in terms of file size) internal model?
Why?
bitmapped graphic
vector graphic
Here are two more complex images
Both are displayed as 1024 x 1024 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would have the larger (in terms of file size) internal model?
Why?
Bitmapped/Vector Graphics
• Bitmapped image file size is…
– affected by dimensions & resolution and
resolution
– not affected by contents
• Vector graphics file size is…
– affected by the contents of the image
• the more complex, the larger the file gets
Bitmapped/Vector Graphics
• Access to objects found in the image?
– vector is easy, objects are described mathematically
• this makes vector graphics the choice for animations
– bitmapped, just pixels… no objects
• Special effect differences?
– (like blur, which requires access to surrounding pixels)
– bitmapped
• Easy; the pixels are stored in the model
– vector
• There are no pixels in a vector graphic
• First convert to bitmapped, then blur
Bitmapped/Vector Graphics
• Scaling and Resize
– Vector? Simple...
– Bitmapped? Complicated...
• frequently results in artifacts
• Why is bitmapped scaling and resizing
complicated? ==>
Original image: 10 x 5
Now make it twice as big
Original image: 10 x 5
Now make it twice as big
Original image: 10 x 5
Now make it twice as big
What happens if there are
two colors next to one
another?
Strictly duplicate?
jagged edges
Interpolate them?
Original image: 10 x 5
Now make it twice as big
What happens if there are
two colors next to one
another?
Strictly duplicate?
jagged edges
Interpolate them?
Original image: 10 x 5
To make it 50% larger...
Original image: 10 x 5
To make it 50% larger...
What do you do?
Do you make it
15 x 7? or 15 x 8?
1 pixel => 1? 2?
There is no such thing as
1.5 pixels...
The point here is:
Scaling is a problem for bitmapped graphics
Image layers
• Both bitmapped and vector graphics use
layers as an organizational device
• Layers are used in two ways with
bitmapped graphics
– layers are used like digital tracing paper to
isolate objects in the image
– colors can be separated and manipulated
individually
Image Manipulation Tools
• Selection tools
– for regular shapes
• rectangular and elliptical marquee tools
• why is it called marquee?
– for irregular shapes
• lasso (polygon, magnetic, magic wand...)
– “magnetic" snaps to an enclosed object
using edge-detection routines
Selection tools...
• Allow the application of filters to only the
selected parts of the image
– unaffected area is called a mask... can be
thought of as a stencil
– opening in the mask allows background to
show through
Masks (like stencils)
• A 1-bit mask
– 0 or 1
– can be either transparent or opaque
• An 8-bit mask
– allows 256 levels of transparency... AKA
alpha channel
More about Masks...
• Can have a gradient to produce a softer
transition... a feathered edge
• Can use anti-aliasing along the edge which
more effectively hides the hard edge visually
• Layers can have masks associated with them
• Allows interesting compositing of image parts
• We’ll talk more about size issues later
when we discuss bitmapped graphics in
more detail
• We will also consider compression
techniques other than the table method
Questions?