color perception, images, animation lecture 2, multimedia e-commerce course october 30, 2000 mike...

Color Perception, Images, AnimationColor Perception, Images, Animation

Lecture 2, Multimedia E-Commerce CourseLecture 2, Multimedia E-Commerce Course

October 30, 2000October 30, 2000

Mike Christel and Alex HauptmannMike Christel and Alex Hauptmann

CarnegieMellon© Copyright 2000 Michael G. Christel and Alexander G. Hauptmann


But First, Revisiting “Intro to Multimedia”But First, Revisiting “Intro to Multimedia”

• Hype vs. RealityHype vs. Reality

• Another Multimedia Vision:Another Multimedia Vision:DARPA’s “Dominate the Battle Space”, 1997DARPA’s “Dominate the Battle Space”, 1997


Color PerceptionColor Perception

Color Perception TheoriesColor Perception Theories

• Component theory (Young-Helmholtz theory)Component theory (Young-Helmholtz theory)Three color receptors are red, green, blueThree color receptors are red, green, blue

• Opponent color theory (1870s, Ewald Hering)Opponent color theory (1870s, Ewald Hering)Three types of color discriminators: Three types of color discriminators: • blue/yellowblue/yellow• red/greenred/green• black/whiteblack/white(Focus > 20 seconds on previous yellow slide and look (Focus > 20 seconds on previous yellow slide and look

away; you’ll see ghost image in opponent color blue)away; you’ll see ghost image in opponent color blue)• Opponent-process theory blends these twoOpponent-process theory blends these two

““cones responding to different thirds of the visible spectrum cones responding to different thirds of the visible spectrum send signals to each of three opponent discriminators send signals to each of three opponent discriminators which, in turn, respond by altering the frequencies they which, in turn, respond by altering the frequencies they send to the brain” (Desktop Multimedia Bible, p. 58)send to the brain” (Desktop Multimedia Bible, p. 58)



Phenomena of Color Vision, 1 of 3Phenomena of Color Vision, 1 of 3

Simultaneous color contrastSimultaneous color contrast



Poor Color Choices


Color ModelsColor Models

• RGB (red, green, blue)RGB (red, green, blue)• Matches computer hardware (cathode ray tube in monitor Matches computer hardware (cathode ray tube in monitor

typically has red, green, and blue electron guns)typically has red, green, and blue electron guns)• Not always most intuitive method for humans/artistsNot always most intuitive method for humans/artists

• HSB (hue, saturation, brightness)HSB (hue, saturation, brightness)• Corresponds to human mind’s perception of color, with Corresponds to human mind’s perception of color, with

brightness being the light intensity, hue the spectral color, and brightness being the light intensity, hue the spectral color, and saturation the amount of that hue added to pure brightnesssaturation the amount of that hue added to pure brightness

• Also called HLS (hue, lightness, saturation)Also called HLS (hue, lightness, saturation)• HSV (hue, saturation, value)HSV (hue, saturation, value)

Like HSB but parameters specified as degrees and percentages, Like HSB but parameters specified as degrees and percentages, e.g., “blue” is 0 and 360 degreese.g., “blue” is 0 and 360 degrees

• CMYK (cyan, magenta, yellow, black)CMYK (cyan, magenta, yellow, black)SubtractiveSubtractive color system used in print production color system used in print production


More Resources on Color Theory, More Resources on Color Theory, Perception, and ModelsPerception, and Models

• Web tutorials, such as “Introduction to Color - Color Web tutorials, such as “Introduction to Color - Color Theory 101” at Theory 101” at //www.webdesignclinic.com/ezine/v1i1/color/index.html//www.webdesignclinic.com/ezine/v1i1/color/index.html

• “ “The Desktop Multimedia Bible”, by Jeff Burger. The Desktop Multimedia Bible”, by Jeff Burger. Reading, MA: Addison Wesley Publishing Co.Reading, MA: Addison Wesley Publishing Co.

• ……or check virtually any Introductory Computer or check virtually any Introductory Computer Graphics book Graphics book


Color Schemes at WorkColor Schemes at Work

Monochromatic scheme: http://www.silverstardesigns.com/izzy/

Triadic (three colors) scheme: http://www.ozones.com/blueprint.html


Device vs. Image ResolutionDevice vs. Image Resolution

• Average laser printer has resolution of 300 dots per Average laser printer has resolution of 300 dots per inch (dpi)inch (dpi)

• Average computer display has resolution of 72 or 75 dpiAverage computer display has resolution of 72 or 75 dpi

• Average scanner has 600 dpi resolutionAverage scanner has 600 dpi resolution

• Photographic film has 1000s of dpiPhotographic film has 1000s of dpi

• Color resolution from 8-bit (256 colors) to 16-bit (65536 Color resolution from 8-bit (256 colors) to 16-bit (65536 colors) to 24-bit (2^24 or ~16.7 million colors, good colors) to 24-bit (2^24 or ~16.7 million colors, good enough to enable photorealism)enough to enable photorealism)

• ……and if we focus on Web delivery...and if we focus on Web delivery...

216 Web-safe colors, < 640x480 window216 Web-safe colors, < 640x480 window


On to Scanning in a Photograph...On to Scanning in a Photograph...

• 35 mm photograph requires 20,000,000 pixels 35 mm photograph requires 20,000,000 pixels

• Scanning in at high resolution of 600 dpi still produces Scanning in at high resolution of 600 dpi still produces drop in image qualitydrop in image quality

• 4 inch by 6 inch picture scanned in at 600 dpi would 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 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 printer, and would appear as a 33.3 inch by 50 inch image on your 72 dpi monitor (i.e., you would need to image on your 72 dpi monitor (i.e., you would need to scroll many times before seeing each part of the whole scroll many times before seeing each part of the whole image)image)

• Hence, when scanning for web publication, set scanner Hence, when scanning for web publication, set scanner for 72 dpi if you wish images to remain same size when for 72 dpi if you wish images to remain same size when presented on the computer display screenpresented on the computer display screen


Image Storage RequirementsImage Storage Requirements

• 4 inch by 6 inch picture at 72 dpi with 24 bit color (3 4 inch by 6 inch picture at 72 dpi with 24 bit color (3 bytes per pixel) results in 378,432 bytesbytes per pixel) results in 378,432 bytes

• At 28.8Kbps transfer rate, this picture would take over At 28.8Kbps transfer rate, this picture would take over 13 seconds to download.13 seconds to download.

……but…but…

• Image contains redundancy, e.g., repeating valuesImage contains redundancy, e.g., repeating values

• Human perception allows further “lossy” compression Human perception allows further “lossy” compression with no noticeable artifactswith no noticeable artifacts


Compression StrategiesCompression Strategies• Entropy codingEntropy coding

• Repetitive sequence suppressionRepetitive sequence suppression2688888888888 becomes 268*11 (here * is an indicator that 2688888888888 becomes 268*11 (here * is an indicator that

the preceding value “8” will be repeating the given number the preceding value “8” will be repeating the given number of times “11”)of times “11”)

• Statistical encoding (patterns are recorded according to Statistical encoding (patterns are recorded according to the frequency at which they occur; frequent patterns use the frequency at which they occur; frequent patterns use the shortest codes); Huffman encodingthe shortest codes); Huffman encoding

afababaa could become in binary 100110110111 where “1”=“a”, “01” = afababaa could become in binary 100110110111 where “1”=“a”, “01” = “b”, “001” = “f”, reducing 8*8=64 bits to 12“b”, “001” = “f”, reducing 8*8=64 bits to 12

• Source coding (optimizes compression based on semantics of Source coding (optimizes compression based on semantics of original data)original data)• Transform encoding (Fourier transform, DCT): most Transform encoding (Fourier transform, DCT): most

significant coefficients - those with most information significant coefficients - those with most information energy - coded with higher accuracyenergy - coded with higher accuracy


JPEG (Joint Photographic Expert Group) JPEG (Joint Photographic Expert Group) CompressionCompression

Block Preparation

(8 x 8)

Transform(DCT)

Quantization

Table

Table

Run length Huffman


JPEG AssumptionsJPEG Assumptions

• Trying to reproduce contour edges of sharp areas with Trying to reproduce contour edges of sharp areas with

perfect fidelity is not necessaryperfect fidelity is not necessary

• Human eye responds poorly to brightness changesHuman eye responds poorly to brightness changes

• Suitable for continuous tone imagesSuitable for continuous tone images


JPEG vs. GIF (Graphics Interchange JPEG vs. GIF (Graphics Interchange Format)Format)

• JPEG AdvantagesJPEG Advantages• more colors (GIF limited to 256)more colors (GIF limited to 256)• lossless optionlossless option• best for scanned photographsbest for scanned photographs• progressive JPEG downloads rough image before whole progressive JPEG downloads rough image before whole

image arrivesimage arrives

• GIF AdvantagesGIF Advantages• transparent color settingtransparent color setting• animated GIFsanimated GIFs• better for flat color fields: clip art, cartoons, etc.better for flat color fields: clip art, cartoons, etc.• tweaking of color palettes, dithering, color depthtweaking of color palettes, dithering, color depth• interlaced delivery downloads low resolution image interlaced delivery downloads low resolution image

before whole image arrivesbefore whole image arrives


JPEG ExampleJPEG Example

“100” quality (190,033 bytes) “10” quality (11,409 bytes)

See http://billswin.inf.cs.cmu.edu/MM_MSEC/JPEGcompare.html


JPEG vs. GIFJPEG vs. GIF

JPEG: 41,080 bytes GIF image: 90,448 bytes


JPEG vs. GIF for non-photo imageJPEG vs. GIF for non-photo image

JPEG: 3,116 bytes GIF image: 1,508 bytes(could be 14,700 bytes at higher quality setting)


Bitmap (Raster) vs. Structured (Vector) Bitmap (Raster) vs. Structured (Vector) GraphicsGraphics

Rasters:Rasters:

• Every pixel described Every pixel described at a set resolutionat a set resolution

• Standardized, fits Standardized, fits computer HW modelcomputer HW model

• Native supportNative support

Vector graphics: • Small descriptions

(e.g., circle center and radius)

• Looks good at different resolutions


Raster vs. Vector Graphics, continuedRaster vs. Vector Graphics, continued

• Raster tools include: Illustrator, PhotoShop, PaintRaster tools include: Illustrator, PhotoShop, Paint

• Vector tools include: Director, Flash, Dreamweaver, Vector tools include: Director, Flash, Dreamweaver, Freehand, PageMakerFreehand, PageMaker

• Photographs best expressed as rastersPhotographs best expressed as rasters

• Simple graphics animations well served by vector Simple graphics animations well served by vector representationsrepresentations

• Macromedia Flash is one tool for building such vector-Macromedia Flash is one tool for building such vector-based animations (lead-in to Homework Assignments 2, based animations (lead-in to Homework Assignments 2, due Nov. 6, and Homework 3, due November 17)due Nov. 6, and Homework 3, due November 17)


Digital Libraries Available to CMU StudentsDigital Libraries Available to CMU Students

ACM Digital Library: http://www.acm.org/dl/ACM Digital Library: http://www.acm.org/dl/

IEEE Xplore: http://www.ieee.org/ieeexploreIEEE Xplore: http://www.ieee.org/ieeexplore

(papers viewable via Adobe Acrobat Reader)(papers viewable via Adobe Acrobat Reader)

Reading list suggestions will be interspersed in Reading list suggestions will be interspersed in presentations; for example, for more details on presentations; for example, for more details on MPEG video compression and its use of Discrete MPEG video compression and its use of Discrete Cosine Transform (DCT), see:Cosine Transform (DCT), see:

Didier Le Gall; Didier Le Gall; Communications of the ACMCommunications of the ACM 3434, 4 (Apr. , 4 (Apr. 1991), pp. 46 - 581991), pp. 46 - 58


Multimedia Interface Design IssuesMultimedia Interface Design Issues

• Traditional usability attributes Traditional usability attributes

• LearnabilityLearnability

• EfficiencyEfficiency

• MemorabilityMemorability

• ErrorsErrors

• SatisfactionSatisfaction

• Modal Perception, e.g., color, fidelity, timingModal Perception, e.g., color, fidelity, timing

• BandwidthBandwidth

• Load timeLoad time


ReferenceReference

The Desktop Multimedia Bible, by Jeff Burger (Addison The Desktop Multimedia Bible, by Jeff Burger (Addison Wesley, 1993)Wesley, 1993)• source of information for color slides to followsource of information for color slides to follow


Subliminal Perception:

Alert, danger, sexy, hot

Associated Item Examples:

Stop, fire engine, blood, roses, hell


Alert, danger, sexy, hot


Stop, fire engine, blood, roses, hell

Red Perception and ExamplesRed Perception and Examples



Attention


Pumpkin, popsicle, traffic cones


Attention


Pumpkin, popsicle, traffic cones

Orange Perception and ExamplesOrange Perception and Examples



Confident, royal, tranquil, comfort


Sky, water, public information signs


Confident, royal, tranquil, comfort


Sky, water, public information signs

Blue Perception and ExamplesBlue Perception and Examples



Loyalty, fun


Sun, banana, lemon, yield sign, butter


Loyalty, fun


Sun, banana, lemon, yield sign, butter

Yellow Perception and ExamplesYellow Perception and Examples



Nature, clean outdoors


Plants, forest, money, go


Nature, clean outdoors


Plants, forest, money, go

Green Perception and ExamplesGreen Perception and Examples


Brown Perception and ExamplesBrown Perception and Examples


Earth


Dirt, national park signs, chocolate


Earth


Dirt, national park signs, chocolate



Purity, cleanliness


Wedding dress (U.S.), clouds, heaven


Purity, cleanliness


Wedding dress (U.S.), clouds, heaven

White Perception and ExamplesWhite Perception and Examples



Elegant, mysterious, evil


Night, tuxedo, death


Elegant, mysterious, evil


Night, tuxedo, death

Black Perception and ExamplesBlack Perception and Examples



Soft, non-threatening, feminine


Female, Southwest, babies

Pastels Perception and ExamplesPastels Perception and Examples



Nature


Mother Earth

Earth Tones Perception and ExamplesEarth Tones Perception and Examples



Loud, bold, capable, happy, strong


Flags, corporate logos, crayons

High-Saturated Perception and ExamplesHigh-Saturated Perception and Examples



Old, weathered, drab


Old photographs, expired products

Low-Saturated Perception and ExamplesLow-Saturated Perception and Examples

color perception, images, animation lecture 2, multimedia e-commerce course october 30, 2000 mike...

Documents