Unit 1 Drawing, Variables, Random
How can code be used as a creative and expressive medium?

3.1 Intro to Color

How do computers mix colors?


Overview

In this learning activity students add color to any of their previous designs. They learn to apply the background(), fill(), and stroke() functions (used in scales of gray until now), to define colors and add transparency. The RGB (red, green, blue) color model is applied.

Students apply the programming concepts they learned in the previous unit (variables, randomness) to color manipulation, defining color ranges and palettes.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Describe the process by which computers mix colors (additive mixing)
  • Use fill() to change the color of shapes in RGB color mode.

Student Outcomes

Abstraction:

  • Describe how I might use patterns to express an idea.
  • Explain why using patterns is necessary when creating with a computer.

Algorithms:

  • Describe more than one set of instructions that might complete a task.
  • Describe how instructions can have different outputs depending on inputs.
  • Explain why I used specific instructions to complete a task.

Programming:

  • Experiment with the commands of a programming language.
  • Explain why I chose specific commands to communicate my instructions.
  • Discuss what can and cannot be done with a specific set of commands.

Vocabulary

fill() function Sets the color used to fill shapes.This color is either specified in terms of the RGB or HSB color depending on the current colorMode()
Subtractive Mixing The mixing you are used to seeing with paint - paint tints absorb different lights from around them to create the visual color you see.
Additive Mixing Mixing done with light - adding lights to create the different colors you see.
RGB Red, Green, Blue color mode, the default in p5.js
Opacity How see-through a shape is.

Resources

  • Video tutorial: 1.2 Color | Code
  • Learning Processing: Chapter 1. Pixels, Section 3. Rgb Color
  • Getting Started With p5.js: Chapter 3. Draw (Section: Color)

RGB Color and Additive Mixing

So far, fill has been used to accept only one number, and it's created greyscale drawings. In reality, fill accepts three values in a default color mode called RGB - or Red, Green, Blue.

We can use these colors to change elements of our drawing, however, we need to be aware that they work differently than colors we may have used in art classes. If you run this project, you will see three circles in red, green, and blue that overlap and mix - yet this mixing is probably different than what you are used to.

This is because computers use additive mixing, a process that adds different colored lights to create color. Traditional media uses subtractive mixing, which absorbs different colored lights to create color. (an in-depth explanation of the RGB color model can be found here)

In our mixing program, we have also adjusted the transparency (the optional fourth value in fill) to allow colors to mix. Its range is 0 (transparent: not visible) to 255 (opaque). You will notice that when we want to change fill, we call a new color before the shape we want to change. Because the draw function is a repeated loop, this presents one color from being applied to every shape.

Try adding colors to a previous sketch. This page is useful for picking colors. For color palette inspiration, you can take a look at this one and this one. Here is our happy face, in color:

Here it is with a more vibrant color palette and a thicker stroke:

Practice

Add color to a previous design or try the following challenge:
  1. Open this sample code.
  2. Set a different fill() and stroke() for each ellipse