![Page 1: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/1.jpg)
Dr. Sarah AbrahamUniversity of Texas at AustinComputer Science Department
Color Elements of GraphicsCS324eSpring 2020
![Page 2: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/2.jpg)
Student Presentation
![Page 3: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/3.jpg)
Color Models
❖ Final color derived from combination of light sources
❖ Additive color models add light sources
❖ Subtractive color models subtract light sources
© Genevieve B. Orr (Willamette University)
![Page 4: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/4.jpg)
Additive vs Subtractive
❖ Painting is subtractive (white surface)
❖ Computer monitors are additive (black surface)
![Page 5: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/5.jpg)
Digital Color❖ Each pixel has three light elements:
❖ Red
❖ Green
❖ Blue
❖ Light element intensity range from 0 to 255
❖ 0 means color is transparent (least intensity)
❖ 255 means color is fully opaque (highest intensity)
![Page 6: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/6.jpg)
RGB
❖ Red: (255, 0, 0)
❖ Green: (0, 255, 0)
❖ Blue: (0, 0, 255)
❖ Colors at full opacity tend to be a little garish!
❖ Processing includes a color selector for more intuitive color selection if you don’t have access to digital paint program
![Page 7: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/7.jpg)
Hexadecimal
❖ Color notation useful for HTML and CSS
❖ RGB color (0 - 255) encoded as a two-digit base 16 value
❖ Examples:
❖ #000000 <==> (0, 0, 0)
❖ #FFFFFF <==> (255, 255, 255)
❖ #6699CC <==> (102, 153, 204)
![Page 8: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/8.jpg)
Color Depth
❖ 1 bit can represent 2 values (21)
❖ 2 bits can represent 4 values (22)
❖ 4 bits can represent 16 values (24)
![Page 9: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/9.jpg)
Question
❖ How many color values can 8-bits represent?
❖ Answer: 256 (28)
![Page 10: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/10.jpg)
True Color
❖ Supports three 8-bit channels (RGB)
❖ RGBA adds a fourth channel for alpha (transparency)
❖ RGB supports 24-bits total or 16,777,216 values (224)
❖ The human eye can discriminate around 10M colors
![Page 11: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/11.jpg)
❖ Note that any RGB model is limited to colors within the RGB gamut — such models cannot represent all human-visible colors!
RGB colors within the CIE colorspace
![Page 12: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/12.jpg)
Image Formats❖ GIF
❖ Color depth: 1-bit to 8-bit
❖ Transparency: 1-bit
❖ JPEG
❖ Color depth: 24-bit
❖ Transparency: None
❖ PNG
❖ Color depth: 1-bit to 24-bit
❖ Transparency: 8-bit
![Page 13: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/13.jpg)
Setting Color in Processing
❖ background(int red, int green, int blue) sets the color of the window in terms of RGB
❖ fill(int red, int green, int blue) sets the color for any subsequent shape primitives
❖ fill(int red, int green, int blue, int alpha) includes a transparency channel to modify opacity
![Page 14: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/14.jpg)
Using the color Primitive
❖ Processing has a special primitive for color:
❖ color(float red, float green, float blue);
❖ Can be used in fill, stroke, background functions
![Page 15: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/15.jpg)
Consider…
color c = color(255.0, 255.0, 0.0);
fill(c);
rect(0, 0, 200, 200);
![Page 16: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/16.jpg)
Transparency and Blending
❖ Transparency (alpha channel) also ranges from 0 to 255
❖ Transparency allows for on-screen color mixing based on the blend mode
❖ Default blend mode is BLEND
❖ blendMode(BLEND)
![Page 17: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/17.jpg)
A is source imageB is destination imageFactor is source alpha
![Page 18: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/18.jpg)
Color Theory
❖ The study of color interactions
❖ Color classification
❖ Color mixing
❖ Color design
❖ Cultural context
RYB color model: primary, secondary, tertiary
![Page 19: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/19.jpg)
Warm vs Cool❖ Warm colors (yellow, orange, red, tan)
❖ Active
❖ Advancing
❖ Stimulating
❖ Cool colors (green, blue, violet, gray)
❖ Passive
❖ Receding
❖ Relaxing
![Page 20: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/20.jpg)
Achromatic and Monochromatic
❖ Achromatic colors schemes are neutral (white, black, gray)
❖ Unsaturated colors are near neutral (tans, pastels)
❖ Monochromatic schemes focus on value using a single hue
Picasso
![Page 21: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/21.jpg)
Complementary
❖ Complementary schemes use colors on opposite ends of the color wheel
❖ High contrast
❖ Dramatic
❖ Forces eye movement
Van Gogh
![Page 22: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/22.jpg)
Split Complementary
❖ Split complementary schemes use a color and the color adjacent to its complement
❖ Subtle contrast
❖ Balanced tension
Vermeer
![Page 23: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/23.jpg)
Analogous
❖ Analogous schemes use adjacent primary, secondary or tertiary colors
❖ Harmonious
❖ Moody Monet
![Page 24: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/24.jpg)
Color Triad
❖ Triadic schemes use three equidistant colors along the wheel
❖ Balanced
❖ Vibrant
Rubens
![Page 25: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/25.jpg)
Tetradic and Square
Tetradic color scheme Square color scheme
(from Tiger Color)
![Page 26: Dr. Sarah Abraham University of Texas at Austin Color Elements …theshark/courses/cs324e/... · 2020-01-29 · Dr. Sarah Abraham University of Texas at Austin Computer Science Department](https://reader034.vdocuments.us/reader034/viewer/2022042219/5ec559b013b08355f20aa5bc/html5/thumbnails/26.jpg)
Hands-on: Using Color❖ Today’s activities:
1. Use Processing’s color picker to incorporate multiple colors via fill and stroke
2. Store color primitives in an array for reuse
3. Use blendMode to affect color interactions
4. Create an image using one of the color theory schemas listed after this slide: achromatic, monochromatic, complementary, split complementary, analogous, color triad, tetrad, or square