Module 3 - Digital Color

Background

Digital Displays 
Color Interaction

Lab Activities

Activity 1-3: Color Wheel See images below

• Hand-Sketch Table to show 3 bit color values

• Code: ColorWheel_RGB

  • Create a labeled color wheel to demonstrate 3-bit colors: ( see image below )

    • use arc( ), fill( ), text( )

    • define and use variables: startAngle, angleSize

• Code: ColorWheel_HSB

  • Create a color wheel using HSB mode (See image below)

    • colorMode(HSB, 360, 100,100);

    • use arc( ), fill( ), text( )

    • define and use variables: startAngle, angleSize

    • define and use variable: hue

    • use draw() function to iterate across all color - wheel slices

Activity 4 Saturation and Brightness: Square Gradients See images below Use colorMode( HSB, 360, 100, 100 );

• Code: Contrasting Colors - Gradient Squares

• Define parameters for a square so that it is repeated in x, and y directions with the following changes in color:

• Create a horizontal gradient of Saturation 100 -> 0

• Create a vertical gradient of Brightness 100 -> 0

  Activity 5 - Simultaneous Contrast

  • Code: Contrasting Colors for 2 large squares

  • Crossing Gray lines have color shifted toward compliment.

  • Use map( ) function to allow hue to vary with mouseX position

  • Use map( ) function to have brightness vary with mouseY position.

Images:

3-bit Color Wheel ( you must add text labels )

HSB Color Wheel ( angleSize = 2 degrees) Repeating color slices using draw( ) - loop

Saturation, Brightness, Compliment, Gradients Repeating squares, with decreasing saturation and brightness using draw( ) - for looping

Hue-Compliment Interactive Contrasting colors with gray X pattern shows afterimage effect.

Links and Resources

Joseph Albers Interaction of Color

Joseph Albers - Article

Digital Display Color Palates Wikipedia