Transcript Color Perception, Images, Animation

But First, Revisiting “Intro to Multimedia”
• Hype vs. Reality
• Another Multimedia Vision:
DARPA’s “Dominate the Battle Space”, 1997
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Color Perception, Images, Animation
Lecture 2, Multimedia E-Commerce Course
October 30, 2000
Mike Christel and Alex Hauptmann
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Color Perception
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Color Perception Theories
• Component theory (Young-Helmholtz theory)
Three color receptors are red, green, blue
• Opponent color theory (1870s, Ewald Hering)
Three types of color discriminators:
• blue/yellow
• red/green
• black/white
(Focus > 20 seconds on previous yellow slide and look
away; you’ll see ghost image in opponent color blue)
• Opponent-process theory blends these two
“cones responding to different thirds of the visible spectrum
send signals to each of three opponent discriminators
which, in turn, respond by altering the frequencies they
send to the brain” (Desktop Multimedia Bible, p. 58)
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Phenomena of Color Vision, 1 of 3
Simultaneous color contrast
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Phenomena of Color Vision, 2 of 3
Poor Color
Choices
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Phenomena of Color Vision, 3 of 3
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Color Models
• RGB (red, green, blue)
• Matches computer hardware (cathode ray tube in monitor
typically has red, green, and blue electron guns)
• Not always most intuitive method for humans/artists
• HSB (hue, saturation, brightness)
• Corresponds to human mind’s perception of color, with
brightness being the light intensity, hue the spectral color, and
saturation the amount of that hue added to pure brightness
• Also called HLS (hue, lightness, saturation)
• HSV (hue, saturation, value)
Like HSB but parameters specified as degrees and percentages,
e.g., “blue” is 0 and 360 degrees
• CMYK (cyan, magenta, yellow, black)
Subtractive color system used in print production
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
More Resources on Color Theory,
Perception, and Models
• Web tutorials, such as “Introduction to Color - Color
Theory 101” at
//www.webdesignclinic.com/ezine/v1i1/color/index.html
•
“The Desktop Multimedia Bible”, by Jeff Burger.
Reading, MA: Addison Wesley Publishing Co.
• …or check virtually any Introductory Computer
Graphics book
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Color Schemes at Work
Monochromatic scheme:
http://www.silverstardesigns.com/izzy/
Triadic (three colors) scheme:
http://www.ozones.com/blueprint.html
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Device vs. Image Resolution
• Average laser printer has resolution of 300 dots per
inch (dpi)
• Average computer display has resolution of 72 or 75 dpi
• Average scanner has 600 dpi resolution
• Photographic film has 1000s of dpi
• Color resolution from 8-bit (256 colors) to 16-bit (65536
colors) to 24-bit (2^24 or ~16.7 million colors, good
enough to enable photorealism)
• …and if we focus on Web delivery...
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
216 Web-safe colors, < 640x480 window
On to Scanning in a Photograph...
• 35 mm photograph requires 20,000,000 pixels
• Scanning in at high resolution of 600 dpi still produces
drop in image quality
• 4 inch by 6 inch picture scanned in at 600 dpi would
print out as 8 inch by 12 inch picture on 300 dpi laser
printer, and would appear as a 33.3 inch by 50 inch
image on your 72 dpi monitor (i.e., you would need to
scroll many times before seeing each part of the whole
image)
• Hence, when scanning for web publication, set scanner
for 72 dpi if you wish images to remain same size when
presented on the computer display screen
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Image Storage Requirements
• 4 inch by 6 inch picture at 72 dpi with 24 bit color (3
bytes per pixel) results in 378,432 bytes
• At 28.8Kbps transfer rate, this picture would take over
13 seconds to download.
…but…
• Image contains redundancy, e.g., repeating values
• Human perception allows further “lossy” compression
with no noticeable artifacts
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
Compression Strategies
• Entropy coding
• Repetitive sequence suppression
2688888888888 becomes 268*11 (here * is an indicator that
the preceding value “8” will be repeating the given number
of times “11”)
• Statistical encoding (patterns are recorded
according to the frequency at which they occur;
frequent patterns use the shortest codes);
Huffman encoding
afababaa could become in binary 100110110111 where “1”=“a”, “01” =
“b”, “001” = “f”, reducing 8*8=64 bits to 12
• Source coding (optimizes compression based on semantics of
original data)
• Transform encoding (Fourier transform, DCT):
most significant coefficients - those with most
information energy - coded with higher accuracy
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
JPEG (Joint Photographic Expert Group)
Compression
Block
Preparation
(8 x 8)
Transform
(DCT)
Quantization
Table
Run length
Huffman
Table
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
JPEG Assumptions
• Trying to reproduce contour edges of sharp areas with
perfect fidelity is not necessary
• Human eye responds poorly to brightness changes
• Suitable for continuous tone images
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
JPEG vs. GIF (Graphics Interchange
Format)
• JPEG Advantages
•
•
•
•
more colors (GIF limited to 256)
lossless option
best for scanned photographs
progressive JPEG downloads rough image before whole
image arrives
• GIF Advantages
•
•
•
•
•
transparent color setting
animated GIFs
better for flat color fields: clip art, cartoons, etc.
tweaking of color palettes, dithering, color depth
interlaced delivery downloads low resolution image
before whole image arrives
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
JPEG Example
“100” quality (190,033 bytes)
“10” quality (11,409 bytes)
See
http://billswin.inf.cs.cmu.edu/MM_MSEC/JPEGcompare.html
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
Carnegie
Mellon
JPEG vs. GIF
JPEG: 41,080 bytes
© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann
GIF image: 90,448 bytes
Carnegie
Mellon