CS 325 Introduction to Computer Graphics 01 / 29 / 2010 Instructor: Michael Eckmann.

CS 325Introduction to Computer Graphics

01 / 29 / 2010

Instructor: Michael Eckmann

Michael Eckmann - Skidmore College - CS 325 - Spring 2010

Today’s Topics• Color• CIE system• chromaticity diagram

– color gamut, complementary colors, dominant wavelength

• RGB, YIQ

• CMY, CMYK, HSV

• Line drawing algorithms

Homework• READING:

– If you haven't read Ch. 12 yet, do so.

– For OpenGL info in our text see:

• sections 2.8 through 2.9 of Chapter 2 – deals with openGL

(using C, but don't let that bother you, the information is

directly applicable to what we'll be doing in Java with

JOGL.)

– Put off the first 7 sections of chapter 2 for now.



Color

• Recall that – Physically, color is electromagnetic radiation in the

visible light frequency range.– Psychologically, how humans perceive color is more

than just the frequency. Hue (dominant wavelength), brightness (amount of light energy) and purity (how little white light is added) are what characterize what color is seen.

– Chromaticity refers collectively to hue and purity (everything except brightness)


Color• If we combine light with different dominant frequencies, we

can create other colors.

• We combine primary colors in various proportions to make up a wide range of colors known as the color gamut.

• Complementary colors are any two colors that combine to produce white.

• No finite set of “real” light sources can produce all visible colors. The color gamut of three primary colors is typically sufficient for most purposes.


Color• The tristimulus theory of color perception states that the retina in the

human eye has three kinds of color sensors (cones) with peak sensitivities to “red”, “blue” and “green” light.

– Cones (6-8 million in retina, concentrated in fovea) for color / bright

light vision

– Rods (over 100 million in retina, none in fovea) for achromatic

brightness levels / night vision

– fovea is in center of retina --- that's where most of the cones are


Color• The tristimulus theory of color perception (continued)

– Experiments have shown that based on this theory that “blue”'s peak is 440 nm, “green”'s is 545 nm, and “red”'s is 580 nm.

– Also, experiments have shown that the eye's response to blue light is much less strong than to red and green.

– Given 3 primary colors, we can combine them with various proportions to produce new colors. Defining colors by mixtures of three primaries is an extremely useful approach.


Color• Experiments were done on humans to determine what proportions of

three primaries would produce certain test colors.

• The experiments were like this:– A test color was shown.– An adjustable color was also shown that contained a mixture of

three primaries 700 nm (red), 546.1 nm (green) and 435.8 nm (blue).

– The observer adjusted the brightness of each of the three primaries until the observer determined that it matched the test color.

• Some test colors were not matchable. In these cases, a primary was

added to the test color and then attempted to be matched. This

resulted in the original test color being represented by a certain

mixture of the three primaries (one with a negative contribution.)


Color

Public domain image – This shows how much of each of the three primaries are needed to generate each monochromatic color (the wavelength on the x-axis.)


Color• This is a chromaticity

diagram (shows colors at a single (highest) brightness). Only hue and saturation are represented.

• The bottom left circle is the blue primary, the top circle is the green primary and the bottom right circle is the red primary. These are the three primaries from the last slide.

• The triangle contains the color gamut of those primaries.


Color• The next slide shows color matching functions f

Z, f

Y and f

X for a

standard set (CIE 1931) of primaries Z, Y and X. These three colors were defined so that there is no need for a negative contribution of one of them and so that the entire range of visible colors is producible.

• These three colors X, Y and Z correspond roughly to red, green, and blue respectively.


Color


Color• http://cvision.ucsd.edu/cie.htm contains text files with the

amounts of each of the color matching functions needed to produce colors at all the wavelengths between 360 nm and 830 nm.

• The values in the charts correspond to the graph on the last slide. The values are used as weights thusly:

• Color = xX + yY + zZ, where x, y and z are the weights applied to the primaries X, Y and Z.

• x+y+z is the total light energy. We can normalize with respect to this amount.

http://cvision.ucsd.edu/cie.htm


Color• Color = xX + yY + zZ

• x' = x / (x+y+z)

• y' = y / (x+y+z)

• z' = z / (x+y+z)

• Since x' + y' + z' = 1, any color can be represented by just two of the x', y' and z'.

• By normalizing based on the total light energy (brightness) we are only now dealing with hue and purity (collectively known as Chromaticity)

• The graph on the next slide is in 2d and it's x axis corresponds to x' here, and y axis to y' here.


Color


Color• source:

Wikipedia• Where do the

three colors X,Y and Z live on this diagram?


Color• Chromaticity diagram on the last two slides

– White is formally defined by the point C (which

approximates sunlight)

– All perceivable colors with the same chromaticity but

different brightness map to the same point.

– The spectrally pure colors are on the outer curve.


Color


Color• The chromaticity diagram is useful for

– comparing color gamuts of different primaries

• is it obvious that no 3 colors within the diagram will produce a

color gamut encompassing all the visible colors?

• 2 colors can combine to make any color along the straight line

segment joining them (C1 to C

2)

– determining complementary colors • how can this be done using the diagram?


Color• The chromaticity diagram is useful for

– comparing color gamuts of different primaries

• is it obvious that no 3 colors within the diagram will produce a

color gamut encompassing all the visible colors?

• 2 colors can combine to make any color along the straight line

segment joining them (C1 to C

2)

– determining complementary colors• recall that complementary colors are two that combine

in some way to make white• so if the line segment between two colors contains the

white point then these two are complements of each other.


Color


Color• The chromaticity diagram is also useful for determining purity

and hue for a color – purity (saturation): ratio of distance of line from color (eg. C

1) to C to

the distance of line from C to spectral color Cs on the outer curve.

– hue (dominant wavelength): draw a line from C through the color C1

to the spectral color curve (the intersection of this line with the outer curve is the hue)

• why? because the color C1 can be represented by some

combination of white ( C ) and the spectral color Cs on the outer

curve.– if the dominant wavelength lands on the “purple line” then ...


Color• For the colors (called non-spectral colors) in the chromaticity

diagram that lie such that when drawing a line starting at C through the color will intersect the “purple” line

– the dominant wavelength is the complement of some wavelength

• draw a line from the color C2 through C (white) to the outer

spectral curve Csp

• the intersection is the wavelength that is subtracted from the

spectral distribution of the color

– purity (saturation): is still

• the closer to white, the less pure

• the further from white, the more pure

400 440 480 520 560 600 640 680 720

0

0.05

0.1

0.15

0.2

0.25

0.3

0.35

0.4

0.45


Color

• Is the Chromaticity diagram useful for determining the brightness of a color?


Color

• Is the Chromaticity diagram useful for determining the brightness of a color?– No, the brightness (light energy) was normalized to 1– recall, Color = xX + yY + zZ – x' = x / (x+y+z)– y' = y / (x+y+z)– z' = z / (x+y+z)– Since x' + y' + z' = 1, any color can be represented by just

two of the x', y' and z'. – By normalizing based on the total light energy (brightness)

we are only now dealing with hue and purity (collectively known as Chromaticity)


RGB Color Model• The color gamut for RGB colors appears on the next slide.

• Color = rR + gG + bB

• r, g and b range from 0.0 to 1.0

• notice:

white's (r,g,b) = (1,1,1)

black's (r,g,b) = (0,0,0)

complementary colors are

those that add up to (1,1,1)

can anyone tell me 2?


RGB Color Model


YIQ Color Model• Graphics monitors use RGB (separate signals for R, G and B)

• NTSC television monitors use a composite signal called the YIQ model.

• Y is luminance (brightness)

• I & Q together incorporate the hue and purity (collectively chromaticity) and some luminance

• RGB can be transformed into YIQ and vice versa which means, given RGB values, you can compute the equivalent color in YIQ and vice versa.

• See section 12.5 of textbook for transforms.

• One nice feature of YIQ is that since Y is the luminance, if that's all that is captured by the television then you end up with black & white television (grey-scale)

• Also since the human eye responds more to luminance than color (recall the number of rods vs. cones) more bandwidth is set aside for the Y value than I & Q.


Additive vs. Subtractive• Both RGB and YIQ color models discussed thus far are

additive models. That is, colors are produced by adding light sources. When we view a monitor or television we are looking at the light sources themselves.

• Since hard copy devices print colors, the colors we see are reflected from the paper (when white light hits the paper). A subtractive process is required to print something that will reflect a certain color of light on paper.

• We are not viewing the light source this time, but instead what color light is reflected off the paper when white light is shown on it.

• How about CIE --- is it additive?


Additive (left), Subtractive (right)

source: wikipedia


CMY & CMYK Color Models• C = Cyan, M = Magenta, Y = Yellow

• white's (c,m,y) = (0,0,0)

• black's (c,m,y) = (1,1,1)

• cyan absorbs red (and reflects green and blue)

• magenta absorbs green

• yellow absorbs blue

• cyan & magenta ink combined

will reflect blue light (b/c red and green are absorbed)

• cyan & yellow ink combined

will reflect green light

• magenta & yellow ink combined

will reflect red light


CMY & CMYK Color Models• Transformation from RGB to CMY is simple.

[C, M, Y] T = [1, 1, 1] T - [R, G, B] T

• Transformation from CMY to RGB is:

[R, G, B] T = [1, 1, 1] T - [C, M, Y] T

• CMYK

• C = Cyan, M = Magenta, Y = Yellow, K = Black

• instead of using cyan, magenta and yellow ink all combined to make black, typically a fourth ink, black is used to produce black and grey levels


Recap on Color Models• RGB color model is an additive model. Amounts of red,

green and blue are combined by adding light sources of these colors to produce new colors.

• CMY and CMYK are subtractive models. Amounts of cyan, magenta and yellow are combined by adding pigments of these colors to produce new colors that reflect certain wavelengths of light.

– it is subtractive because adding pigments reduce what light

is reflected, when all 3 primaries (C M and Y) are put

together then the result is no light is reflected (black).


HSV Color Model


HSV Color Model

• Hue is an angle between 0 and 360 degrees

• Saturation (purity) is one axis and Value (luminance) is another axis

• You can picture this as a circular cone if you prefer

• or even as a cylinder

• because S is considered a ratio from the V axis (0) to max 1.


HSV Color Model

• HSV color model is more intuitive/useful to people/artists

• Starting with the pure hue:

• Vary the saturation (add white) to get different tints

• Vary the value (add black) to get different shades

What's most important of Color theory for us in this course?

• Know the terminology – dominant wavelength, hue, brightness, luminance, purity, saturation, chromaticity, color gamut, idea of primary colors, etc.

• Know the relationship between wavelength and frequency

• Know what the CIE chromaticity digram is useful for and how

– determining:

• color gamuts, complementary colors, purity

– comparison of:

• color gamuts, purity

• Know how additive (e.g. RGB, YIQ) and subtractive color models (e.g. CMY) work to

produce new colors

• Know about more intuitive models like HSV and why they're useful

• Know that different color models can be transformed into each other by a transform matrix.



Lines• When drawing lines we must convert the continuous line into discrete

pieces --- we need to decide which pixels should be on. We need to calculate the integer coordinates.

• The goals of line drawing are several

– A main one is that it should be fast, because lines are drawn often

• That is, we prefer integer arithmetic and additions and

subtractions over floating point arithmetic and multiplies and

divides.

– Another is that the lines should look nice --- be straight and have constant thickness, independent of angle, length


Lines• Recall this information about lines

• Assume we have two known points (x1,y1) and (x2, y2) on a plane. We can calculate the equation of a line if we pick an unknown point (x, y) on the line and compute the slope.

• Slope = (y-y1)/(x-x1) = (y2-y1)/(x2-x1)

• Multiply both sides by (x-x1) to get

y-y1 = (y2-y1)(x-x1)/(x2-x1)

y = (y2-y1)(x-x1)/(x2-x1) + y1

y = ((y2-y1)/(x2-x1)) x + (-x1)/(x2-x1) + y1

y = mx + b


Parametric Equation of a Line• This information appears in section 6.7 of text but is appropriate now

because it is used in the DDA algorithm (discussed next slide).

• Given 2 points on a line (x0, y

0) and (x

end, y

end)

• x = x0 + u (x

end - x

0)

• y = y0 + u (y

end - y

0)

• u is the parameter

• If we consider only the values 0 <= u <= 1, we get all the points on the line segment between (x

0, y

0) and (x

end, y

end).

• When u = 0, x=x0 and y = y

0

• When u = 1, x=xend

and y = yend


DDA – digital differential analyzer• Consider a line with positive slope and x

0 < x

end

• If slope <=1 then we will sample the line at unit x intervals and compute y.

• If slope > 1 then we will sample the line at unit y intervals and compute x.

• What does that mean?

• In the DDA, the parameter u (from the parametric equation of a line) is 1/steps.

• Let's take a look at the code for this algorithm and “execute” it with actual values on the board.


From Hearn & Baker's Computer Graphics with OpenGL, 3rd Edition.

void lineDDA (int x0, int y0, int xEnd, int yEnd)

{

int dx = xEnd - x0, dy = yEnd - y0, steps, k;

float xIncrement, yIncrement, x = x0, y = y0;

if (fabs (dx) > fabs (dy))

steps = fabs (dx);

else

steps = fabs (dy);

xIncrement = float (dx) / float (steps);

yIncrement = float (dy) / float (steps);

setPixel (round (x), round (y));

for (k = 0; k < steps; k++) {

x += xIncrement;

y += yIncrement;

setPixel (round (x), round (y));

}

}


DDA – digital differential analyzer• It creates good lines. The lines aren't going to differ in “thickness” based on

angle, etc.

• Can you comment on any efficiency issues with this algorithm?


DDA – digital differential analyzer• It creates good lines. The lines aren't going to differ in “thickness” based on

angle, etc.

• Problems with this algorithm are

– Rounding is expensive

– Floating point arithmetic is expensive

• So, a goal is to do all integer arithmetic and reduce / eliminate divides.

CS 325 Introduction to Computer Graphics 01 / 29 / 2010 Instructor: Michael Eckmann.

Documents

Transcript of CS 325 Introduction to Computer Graphics 01 / 29 / 2010 Instructor: Michael Eckmann.