This lesson reviews the basics of working with color in p5. This should be an active exploration time. This is typically a popular lesson since the youth are able to explore color.
fill(), stroke(), and colorMode() methods in p5 and how they relate to color.In the introductory lessons, you set your sketch’s colors by passing values into background() and fill(). The parameters for these commands are similar: both accept RGB values. This lesson will revisit some of these methods as well as introduce some new concepts.
Once you build a basic familiarity with color, the best thing to do is start practicing by creating some sketches!
A great starting point is to become familiar with the relationship between the parameters passed into the color methods and the resulting output. This is another excellent point to consult the reference documentation. In order to start practicing this skill, let’s take a look at the reference entry for fill(). Note that there is an entire color section in the reference!
Read through this overview and then navigate to the reference manual entry for fill(). Ask questions if you don’t understand how to use the manual. The reference documentation is an important tool that you should start actively using.
The entry provides some information about something called colorMode(). Since colorMode() is written in camelCase and has a set of parentheses after it, that’s a solid indication that it’s an additional p5 method. It’s a good habit to start looking these commands up as they appear in the documentation.
The color mode is RGB by default. Therefore, the parameters that you pass into it correspond to red, green, and blue values. You create different colors by passing in numbers for these values, and then the resulting color is a blend of red, green, and blue.
One interesting aspect of RGB is that there is an optional fourth parameter for Alpha (transparency). This value ranges from 0 to 100, with 0 being completely transparent and 100 is completely opaque (non-transparent). Go ahead and experiment with creating different colors in the web editor! Share some of your experiments with your peers.
There is another color mode called HSB that uses hue, saturation, and brightness. If you’re feeling adventurous, read about how to use colorMode() to switch to HSB and try it out!
There is a wealth of information online containing the RGB values for specific colors. Here are two highly effective tools for this purpose:
Go ahead and find some nice colors and use them in your sketch! Try to find some nice colors that go together. Over time you’ll develop some go-to colors that you like to use in multiple sketches.
There may be a certain time when you want to use a set of colors that someone has already chosen. This is called a color palette and these are commonly used by web and graphic designers. There are lots of palettes available. While you’re certainly encouraged to create your own, it’s sometimes a helpful starting point to use a palette.
Here’s a great resource for color palettes:
There are three other commands that you should know about as you start practicing. These are noFill(), stroke(), and noStroke().