Color Perception, Images, Animation

1
Color Perception, Images, Animation

• Lecture 2, Multimedia E-Commerce Course
• October 25, 1999
• Mike Christel and Alex Hauptmann

2
Color Perception
3
(No Transcript)
4
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 gt 20 seconds on previous yellow slide and
  look away youll 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)

5
Phenomena of Color Vision, 1 of 3

• Simultaneous color contrast

6
Phenomena of Color Vision, 2 of 3
Poor Color Choices
7
Phenomena of Color Vision, 3 of 3
8
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 minds 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

9
More Resources on Color Theory, Perception, and
Models

• Web tutorials, such as Introduction to Color -
  Color Theory 101 at //www.webdesignclinic.com/ezi
  ne/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

10
Color Schemes atWork

• Monochromatic scheme http//www.silverstardesigns
  .com/izzy/
• Double complementary red/green blue/orange scheme
  (the title graphic) http//www.geocities.com/Athe
  ns/Oracle/3201/
• Triadic (three colors) scheme http//www.ozones.c
  om/blueprint.html

11
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 (224 or 16.7
  million colors, good enough to enable
  photorealism)
• and if we focus on Web delivery...

12
216 Web-safe colors, lt 640x480 window
13
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

14
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

15
Compression Strategies

• Entropy coding
• Repetitive sequence suppression
• 2688888888888 becomes 26811 (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 1a, 01 b, 001 f, reducing
  8864 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

16
JPEG (Joint Photographic Expert Group) Compression
Block Preparation (8 x 8)
Transform (DCT)
Quantization
Table
Run length
Huffman
Table
17
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

18
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

19
Bitmap (Raster) vs. Structured (Vector) Graphics

• Rasters
• Every pixel described at a set resolution
• Standardized, fits computer HW model
• Native support

• Vector graphics
• Small descriptions (e.g., circle center and
  radius)
• Looks good at different resolutions

20
Raster vs. Vector Graphics, continued

• Raster tools include Illustrator, PhotoShop,
  Paint
• Vector tools include Director, Flash,
  Dreamweaver, Freehand, PageMaker
• Photographs best expressed as rasters
• Simple graphics animations well served by vector
  representations
• Macromedia Flash is one tool for building such
  vector-based animations (lead-in to Homework
  Assignments 2 and 3, due November 12)