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

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 > 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)

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 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

9. 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

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/Athens/Oracle/3201/ • Triadic (three colors) scheme: http://www.ozones.com/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 (2^24 or ~16.7 million colors, good enough to enable photorealism) • …and if we focus on Web delivery...

12. 216 Web-safe colors, < 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 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

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)