CS 445 / 645: CS 445 / 645: Introductory Computer Introductory Computer
GraphicsGraphics
Color
Midterm ExamMidterm Exam
The Midterm Exam will be Tuesday, October 23rd
Review Session will be Thursday, October 18th.
Assignment 3Assignment 3
• Assignment 3 goes out today
• Due Sunday, October 21st at Midnight
ColorColor
• Next topic: Color
To understand how to make realistic images, we need a basic understanding of the physics and physiology of vision. Here we step away from the code and math for a bit to talk about basic principles.
Basics Of ColorBasics Of Color
• Elements of color:
Basics of ColorBasics of Color
• Physics: – Illumination
• Electromagnetic spectra
– Reflection• Material properties• Surface geometry and microgeometry (i.e., polished
versus matte versus brushed)
• Perception– Physiology and neurophysiology– Perceptual psychology
Physiology of VisionPhysiology of Vision
• The eye:
• The retina– Rods– Cones
• Color!
Physiology of VisionPhysiology of Vision
• The center of the retina is a densely packed region called the fovea. – Cones much denser here than the
periphery
Physiology of Vision: ConesPhysiology of Vision: Cones
• Three types of cones:– L or R, most sensitive to red light (610 nm) – M or G, most sensitive to green light (560 nm)– S or B, most sensitive to blue light (430 nm)
– Color blindness results from missing cone type(s)
Physiology of Vision: The Physiology of Vision: The RetinaRetina
• Strangely, rods and cones are at the back of the retina, behind a mostly-transparent neural structure that collects their response.
• http://www.trueorigin.org/retina.asp
Perception: MetamersPerception: Metamers
• A given perceptual sensation of color derives from the stimulus of all three cone types
• Identical perceptions of color can thus be caused by very different spectra
Perception: Other GotchasPerception: Other Gotchas
• Color perception is also difficult because:– It varies from person to person– It is affected by adaptation (stare at a light
bulb… don’t)– It is affected by surrounding color:
Perception: Relative IntensityPerception: Relative Intensity
We are not good at judging absolute intensity• Let’s illuminate pixels with white light on scale
of 0 - 1.0• Intensity difference of neighboring colored
rectangles with intensities:– 0.10 -> 0.11 (10% change)– 0.50 -> 0.55 (10% change)
will look the same• We perceive relative intensities, not absolute
Representing IntensitiesRepresenting Intensities
• Remaining in the world of black and white…• Use photometer to obtain min and max
brightness of monitor• This is the dynamic range
• Intensity ranges from min, I0, to max, 1.0
• How do we represent 256 shades of gray?
Representing IntensitiesRepresenting Intensities
• Equal distribution between min and max fails– relative change near max is much smaller
than near I0
– Ex: ¼, ½, ¾, 1• Preserve % change
– Ex: 1/8, ¼, ½, 1
– In = I0 * rnI0, n > 0
I0=I0
I1 = rI0
I2 = rI1 = r2I0
…
I255=rI254=r255I0
Dynamic RangesDynamic Ranges Dynamic Range Max # of Display (max / min illum) Perceived
Intensities (r=1.01)
• CRT: 50-200 400-530• Photo (print) 100 465• Photo (slide) 1000 700• B/W printout 100 465• Color printout 50 400• Newspaper10 234
Gamma CorrectionGamma Correction
• But most display devices are inherently nonlinear: Intensity = k(voltage)
– i.e., brightness(voltage) != 2*brightness(voltage/2) is between 2.2 and 2.5 on most monitors
• Common solution: gamma correction– Post-transformation on intensities to map them to
linear range on display device:– Can have separate for R, G, B
1
xy
Gamma CorrectionGamma Correction
• Some monitors perform the gamma correction in hardware (SGI’s)
• Others do not (most PCs)
• Tough to generate images that look good on both platforms (i.e. images from web pages)
HalftoningHalftoning
• A technique used in newspaper printing• Only two intensities are possible, blob of ink and
no blob of ink
• But, the size of the blob can be varied• Also, the dither patterns of small dots can be used
HalftoningHalftoning
HalftoningHalftoning
Back to colorBack to color
• Color is defined many ways
• Computer scientists frequently use:– Hue - The color we see (red, green, purple)– Saturation - How far is the color from gray (pink
is less saturated than red, sky blue is less saturated than royal blue)
– Brightness (Luminance) - How bright is the color
How well do we see color?How well do we see color?
• What color do we see the best?– Yellow-green at 550 nm
• What color do we see the worst?– Blue at 440 nm
• Flashback: Colortables (colormaps) for color storage
• Can perceive color differences of 10 nm at extremes (violet and red) and 2 nm between blue and yellow
How well do we see color?How well do we see color?
• 128 fully saturated hues can be distinguished
• Cannot perceive hue differences with less saturated light.
• Sensitivity to changes in saturation for a fixed hue and brightness ranges from 16 to 23 depending on hue.
Combining ColorsCombining Colors
Additive (RGB) Subtractive (CMYK)
Color SpacesColor Spaces
• Three types of cones suggests color is a 3D quantity. How to define 3D color space?
• Idea: shine given wavelength () on a screen, and mix three other wavelengths (R,G,B) on same screen. Have user adjust intensity of RGB until colors are identical:
CIE Color SpaceCIE Color Space• The CIE (Commission Internationale
d’Eclairage) came up with three hypothetical lights X, Y, and Z with these spectra:
• Idea: any wavelength can be matched perceptually by positive combinations of X,Y,Z
Note that:X ~ RY ~ GZ ~ B
CIE Color SpaceCIE Color Space
• The gamut of all colors perceivable is thus a three-dimensional shape in X,Y,Z
• Color = X’X + Y’Y + Z’Z
CIE Chromaticity Diagram CIE Chromaticity Diagram (1931)(1931)
For simplicity, we often project to the 2D plane X’+Y’+Z’=1
X’ = X’ / (X’+Y’+Z’)Y’ = Y’ / (X’+Y’+Z’)Z’ = 1 – X’ – Y’
Device Color GamutsDevice Color Gamuts
• Since X, Y, and Z are hypothetical light sources, no real device can produce the entire gamut of perceivable color
• Example: CRT monitor
RGB Color SpaceRGB Color Space
• Define colors with (r, g, b) amounts of red, green, and blue
Device Color GamutsDevice Color Gamuts
• The RGB color cube sits within CIE color space something like this:
Device Color GamutsDevice Color Gamuts
• We can use the CIE chromaticity diagram to compare the gamuts of various devices:
• Note, for example, that a color printercannot reproduceall shades availableon a color monitor
Converting Color SpacesConverting Color Spaces
• Simple matrix operation:
• The transformation C2 = M-12 M1 C1
yields RGB on monitor 2 that is equivalent to a given RGB on monitor 1
B
G
R
ZZZ
YYY
XXX
B
G
R
BGR
BGR
BGR
'
'
'
Converting Color SpacesConverting Color Spaces
• Converting between color models can also be expressed as such a matrix transform:
• Note the relative unimportance of blue in computing the Y
• YIQ is the color model used for color TV in America. Y is luminance, I & Q are color– Note: Y is the same as CIE’s Y – Result: backwards compatibility with B/W TV!
B
G
R
Q
I
Y
31.052.021.0
32.028.060.0
11.059.030.0
HSV Color SpaceHSV Color Space
• A more intuitive color space– H = Hue– S = Saturation– V = Value (or brightness)
ValueSaturation
Hue
Top Related