> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/computation-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/computation-design/modules/course-modules/module-2-color.md).

# 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 ) ![](/files/-M0-KfvL6qAivZfL7I8q)

**HSB Color Wheel** ( angleSize = 2 degrees) *Repeating color slices using draw( ) - loop* ![](/files/-M0-KfvNDctXyyh4kk2A)

**Saturation, Brightness, Compliment, Gradients**\
Repeating squares, with decreasing saturation and brightness using draw( ) - for looping\
![](/files/-M0-KfvPu5Q8YPAoblwf)

**Hue-Compliment Interactive** Contrasting colors with gray X pattern shows afterimage effect. ![](/files/-M0-KfvR0PrU_k7xA5GP)

## Links and Resources

**Joseph Albers Interaction of Color**

Joseph Albers -[ Article ](https://hyperallergic.com/55894/the-square-in-the-raw-josef-albers-unguarded-moments/)

**Digital Display Color Palates** [Wikipedia](https://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_palettes#3-bit_RGB)