Light and Colors CS 148: Summer 2016 Introduction of Graphics and - - PowerPoint PPT Presentation

▶
light and colors
SMART_READER_LITE
LIVE PREVIEW

Light and Colors CS 148: Summer 2016 Introduction of Graphics and - - PowerPoint PPT Presentation

Jan 15, 2023 390 likes •1k views

Light and Colors CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain http://lighthouse8.com/wp-content/uploads/2012/08/true-colors.jpg What is Light ? http://en.wikipedia.org/wiki/Electromagnetic_radiation 2 CS 148:

slide-1
SLIDE 1

CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain

Light and Colors

http://lighthouse8.com/wp-content/uploads/2012/08/true-colors.jpg

slide-2
SLIDE 2

What is Light ?

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 2

http://en.wikipedia.org/wiki/Electromagnetic_radiation

slide-3
SLIDE 3

What is Light ?

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 3

Magnetic field Electric field

http://en.wikipedia.org/wiki/Electromagnetic_radiation

slide-4
SLIDE 4

What is Light ?

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 4

http://en.wikipedia.org/wiki/File:EM_spectrum.svg

slide-5
SLIDE 5

Important Facts

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 5

C = 299,792,458 m/s ( In Vacuum )

Material Speed (multiple of c) Air 0.9997 Water 0.75 Fused quartz 0.686 Crown glass 0.658 Dense flint glass 0.60 Diamond 0.41

http://wiki.answers.com/Q/What_is_the_velocity_of_light_in_space_and_in_different_materials

slide-6
SLIDE 6

Important Facts

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 6

C = 299,792,458 m/s ( In Vacuum )

Material Speed (multiple of c) Air 0.9997 Water 0.75 Fused quartz 0.686 Crown glass 0.658 Dense flint glass 0.60 Diamond 0.41

http://wiki.answers.com/Q/What_is_the_velocity_of_light_in_space_and_in_different_materials

Explains refraction ! & total internal reflection

slide-7
SLIDE 7

Refraction

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 7

http://upload.wikimedia.org/wikipedia/commons/1/13/F%C3%A9nyt%C3%B6r%C3%A9s.jpg

Snell’s Law Refractive Index

slide-8
SLIDE 8

Total Internal Reflection

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 8

When Light travels from denser medium to a lighter medium, the incident angle above a critical angle may cause when:

slide-9
SLIDE 9

Wave Particle Duality

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 9

slide-10
SLIDE 10

Wave Particle Duality

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 10

slide-11
SLIDE 11

What have we lost ?

  • Diffraction
  • Polarization
  • Interference

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 11

slide-12
SLIDE 12

Photon [foh-ton]:

A quantum of light that has a position, a direction of propagation, and a wavelength.

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 12

slide-13
SLIDE 13

Energy Carried by a Photon

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 13

Planck Constant: 6.63 x 10-34 J.s Frequency (Hz) Wavelength (m) Speed of Light ~ 3 x 108 m/s

slide-14
SLIDE 14

Spectral Power Distribution

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 14

Intuitively: Photons for each wavelength can be counted to give a histogram

http://www.lamptech.co.uk/Images/Illustrations/SO%20SPD%27s.jpg

slide-15
SLIDE 15

Colors

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 15

slide-16
SLIDE 16

Types of Cones

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 16

http://web.stanford.edu/group/vista/cgi-bin/FOV/wp-content/uploads/2012/02/rec.spec_.sens_.png

slide-17
SLIDE 17

Measuring Light Perception

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 17

Sensitivity “This cone sees green light”

slide-18
SLIDE 18

Measuring Light Perception

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 18

Sensitivity “This cone sees green light” “This light is orange.” Power distribution

slide-19
SLIDE 19

Measuring Light Perception

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 19

Multiply and integrate

slide-20
SLIDE 20

Measuring Light Perception

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 20

Multiply and integrate

slide-21
SLIDE 21

Cone Responses

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 21

Power distribution

slide-22
SLIDE 22

Cone Responses

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 22

Sensitivity

slide-23
SLIDE 23

Cone Responses

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 23

Tristimulus values

slide-24
SLIDE 24

Conclusion

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 24

There is an infinite number of wavelengths, but we only see three integral values.

slide-25
SLIDE 25

Conclusion

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 25

There is an infinite number of wavelengths, but we only see three integral values.

slide-26
SLIDE 26

Metamers [met-uh-mers]

Spectral compositions that create the same tristimulus values.

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 26

slide-27
SLIDE 27

Implication for Displays

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 27

We can simulate visual effects of any wavelength by stimulating cones independently.

slide-28
SLIDE 28

CIE Primaries

  • Red: 700 nm
  • Green: 546.1nm
  • Blue: 435.8 nm

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 28

slide-29
SLIDE 29

Color Matching Experiments

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 29

“Match this color.” One wavelength

435.8 nm 546.1 nm 700 nm

slide-30
SLIDE 30

CIE RGB Color Matching

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 30

http://en.wikipedia.org/wiki/CIE_1931_color_space

Spectral Tristimulus Values

slide-31
SLIDE 31

CIE RGB Tristimulus Values

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 31

slide-32
SLIDE 32

CIE RGB Color Matching

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 32

http://en.wikipedia.org/wiki/CIE_1931_color_space

slide-33
SLIDE 33

Color Matching Experiments

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 33

“Match this color.” One wavelength

435.8 nm 546.1 nm 700 nm

How do you do “Negative Light” ?

slide-34
SLIDE 34

CIE XYZ

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 34

http://upload.wikimedia.org/wikipedia/commons/8/8f/CIE_1931_XYZ_Color_Matching_Functions.svg

slide-35
SLIDE 35

CIE XYZ

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 35

http://upload.wikimedia.org/wikipedia/commons/8/8f/CIE_1931_XYZ_Color_Matching_Functions.svg

slide-36
SLIDE 36

CIE XYZ Tristimulus

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 36

Developed in 1931

slide-37
SLIDE 37

CIE RGB to XYZ Conversion

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 37

Positive for visible wavelengths

slide-38
SLIDE 38

Chromaticity Diagram

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 38

z is redundant because

Projection of X,Y,Z on the plane

slide-39
SLIDE 39

Chromaticity Diagram

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 39

Given x,y and one tristimulus value (typically Y, hence named CIE xyY) one can recover X,Y and Z like the following

slide-40
SLIDE 40

Chromaticity Diagram: D65

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 40

D65

D65 – Mid day light Corresponds to 6500K, (actually ~6504K.) (x,y) = 0.3128, 0.3290)

slide-41
SLIDE 41

Chromaticity Diagram: Complementary Color

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 41

Color A and B are complementary If Combine(A,B) can produce White Or Gray

slide-42
SLIDE 42

Chromaticity Diagram

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 42

RGB are vertices; can achieve colors inside the triangle by combining them

slide-43
SLIDE 43

Chromaticity Diagram

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 43

RGB are vertices; can achieve colors inside the triangle by combining them

slide-44
SLIDE 44

Gamut [gam-uht]:

The set of colors representable using a particular display device or color space.

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 44

slide-45
SLIDE 45

Describing a Display: HDTV

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 45

http://upload.wikimedia.org/wikipedia/commons/8/8f/CIExy1931_sRGB.svg

Vertices are primaries, possibilities are inside triangle

slide-46
SLIDE 46

Preception and Color Spaces

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 46

slide-47
SLIDE 47

Perception of Color

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 47

420nm 450nm 590nm 620nm

slide-48
SLIDE 48

Perception of Color

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 48

420nm 450nm 590nm 620nm

slide-49
SLIDE 49

Perceptual Uniformity

  • A distance metric in a perceptually uniform color

space would corresponds to the visual difference between colors as perceived by human.

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 49

slide-50
SLIDE 50

Perceptual Uniformity

  • A distance metric in a perceptually uniform color

space would corresponds to the visual difference between colors as perceived by human.

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 50

slide-51
SLIDE 51

Perceptually Uniform: Munsell

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 51

Hue 5 Primary Hues (R,Y,G,B,P) 5 Intermediate Hues (YR, GY, BG, PB, RP) 10 sub-steps = 100 Hues Value Black to White Chroma Purity of color Colors on opposite sides of the hue circle can be added to produce gray.

slide-52
SLIDE 52

Perceptually Uniform: Munsell

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 52

Hue 5 Primary Hues (R,Y,G,B,P) 5 Intermediate Hues (YR, GY, BG, PB, RP) 10 sub-steps = 100 Hues Value Black to White Chroma Purity of color Colors on opposite sides of the hue circle can be added to produce gray.

https://en.wikipedia.org/wiki/Munsell_color_system

slide-53
SLIDE 53

Perceptually Uniform: L*a*b

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 53

L: Luminance (0-100) a,b: Color-opponent dimensions (-128..128)

slide-54
SLIDE 54

Perceptually Uniform: L*a*b

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 54

L: Luminance (0-100) a,b: Color-opponent dimensions (-128..128)

slide-55
SLIDE 55

Other spaces: HSV

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 55

HSV : Hue, Saturation, Value

Photoshop color picker

slide-56
SLIDE 56

Other spaces: HSV

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 56

HSV : Hue, Saturation, Value

Photoshop color picker

slide-57
SLIDE 57

Color Spaces So Far

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 57

Color Space Continuous Perceptually Uniform RGB Yes No XYZ Yes No Munsell No Yes L*a*b Yes Yes HSV Yes No

slide-58
SLIDE 58

Printing Color Space: CMY

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 58

What matters is the color a pigment does not absorb!

http://en.wikipedia.org/wiki/CMYK_color_model

Yellow = White – Blue Cyan = White – Red Magenta = White - Green

slide-59
SLIDE 59

Other Spaces: CMYK

CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 59

No black Max black

http://en.wikipedia.org/wiki/CMYK_color_model

slide-60
SLIDE 60

CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain

Light and Colors

http://lighthouse8.com/wp-content/uploads/2012/08/true-colors.jpg