Digital Media
Dr. Jim Rowan
ITEC 2110
Chapter 3
About Chapter 3
• This is an overview of the next three chapters
– Vector graphics
– Bitmapped graphics
– Color
• This material is covered in 5 lectures
– Vector graphics part 1
– Bitmapped graphics
– Color part 1
– Color part 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
• Complex… arguably graphics are so important that they
are an enabling technology in themselves
• Computer graphics on the WWW
– fostered the shift from print based media
– has begun to develop its own visual vocabulary
• Inside the computer there’s a numeric model of a realworld phenomenon
• Two ways to model computer graphics (images)
– numeric model #1: bitmapped images
– numeric model #2: vector graphics
• each with their advantages and disadvantages
But first:
How to display data?
• 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
– how color is used
– the numeric scales used
• Different graphing forms emphasize different
aspects of the numbers
– pie charts
– bar charts
– line graphs
Designing information display
• How to lie with statistics
• Edward Tufte, Yale University
– Visual Display of Quantitative Information
– Envisioning Information
– Visual Explanations
Computer Display types
• Now... all are rectangular arrays of
pixels
• Not always 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
bitmapped display
– The internal model, the numbers, are in the computer
– This process of projecting this model onto a computer
display is called “rendering”
Two approaches to
graphic modeling
• Why two approaches?
– drastic filesize differences
– each was good for its type of image
• Bitmapped graphics
– grandfathered name... more like pixel
mapped graphics
• Vector graphics
– It’s more like 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
– for example…
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
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
– not simply clip or scale
– must compute the array of physical pixels from the
equations
bitmapped graphic
vector graphic
Here are two images, blue squares
Both are displayed at 72 pixels per inch
Both are 1024 X 1024 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would be bigger?
Why?
bitmapped graphic
vector graphic
Here are two images, blue squares
Both are displayed at 72 pixels per inch
Both are 318 X 318 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would be bigger?
Why?
Bitmapped/Vector Graphics
• Bitmapped image size is set by
– affected by size, resolution and color
resolution
– not affected by contents
• Vector graphics size is set by
– affected by the contents of the image
• the more complex, the larger the file gets
– size of the file is not affected by resolution
Bitmapped/Vector Graphics
• Selection of objects in the image
– vector is easy, objects are described by
mathematical equations
– bitmapped, no objects, just pixels
• Special effect (like blur) differences
– bitmapped, easy
– vector, first convert to bitmapped, then blur
Bitmapped/Vector Graphics
• Scaling and Resize
– Vector? Simple... change formula
• Changes can be made BEFORE pixel values
are calculated
– Bitmapped? Complicated...
• frequently results in artifacts
• Why is bitmapped complicated?
Original image: 10 x 5
Now make it twice as big
[Draw on image]
Original image: 10 x 5
[Draw on image]
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...
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...
Bitmapped <==> Vector
• Vector can be easily converted to
bitmapped... this process already exists
since you must RENDER vectors to
display them.
• Bitmapped to vector is complicated
– Vector is based on shapes… but
bitmapped does not define any shapes
– Software must identify edges and find the
shapes.
Image layers
• Bitmapped and vector graphics use
layers as an organizational device
• In bitmapped graphics
– layers are used like digital tracing paper to
isolate objects in the image
– colors can be separated and manipulated
individually
Show Image:
testPageImage.tiff
•
•
•
•
•
•
1574 pixels wide
1987 pixels tall
RGB encoded
No compression
No table
How Big?
Show Image:
testPageImage.tiff
• Inspect it with
mac cmd-I
• Open image
with hexFiend
• How big is it?
• What is in it?
• Mostly 00...
why?
HMMMMMmmm…
• We’ll talk more about this size issue in
the chapter dedicated to bitmapped
graphics
• We will also consider compression
techniques other than the table method
And now for something
completely different!
FLASHBACK
To audio-related calculations!
Size and download speed
calculations
• How big is the audio file?
– 44,100 samples per second
– 16 bit quantization
– stereo
– 3m16 seconds in length
• How long to load to youTube over
– highest speed dial up connection?
– adsl?
• How long to download from youTube over
– highest speed dial up connection?
– adsl?
Size and download speed
calculations
• How big is the audio file?
–
–
–
–
44,100 samples per second
8 bit quantization
stereo
3m16 seconds in length
• How long to load to youTube over
– highest speed dial up connection?
– adsl?
• How long to download from youTube over
– highest speed dial up connection?
– adsl?
Size and download speed
calculations
• How big is the audio file?
–
–
–
–
8,000 samples per second
8 bit quantization
stereo
3m16 seconds in length
• How long to load to youTube over
– highest speed dial up connection?
– adsl?
• How long to download from youTube over
– highest speed dial up connection?
– adsl?
Questions?