Alpha Values in Color
(Making things see-through)

It is also possible to specify the alpha value for any color in p5. Specifying an alpha value for a color function allows other objects behind the shape to be seen. In other words, it makes a shape “see through”.

The alpha value is most easily used in conjunction with grayscale and rgb color values.

To specify an alpha value for grayscale value, supply a second number parameter to any color function, between 0-255. (0 = completely transparent, 255 = completely opaque)

// grayscale value w/ alpha value specified
fill(102, 150);

To specify an alpha value with the simple version of RGB parameters, supply a 4th value between 0-255.

// rgb value w/ alpha value
fill( 240, 10, 20, 150 );

I like to specify alpha value by passing color functions an 'rgba()' function wrapped in quotes. This allows the alpha value to be specified as a decimal value between 0.0 - 1.0. Which gives me a greater feel of control.

fill( 'rgba(176, 255, 29, 0.5)' );

When placed together, you can see how the alpha values allow for colors to mingle and play with each other.

For more information on using colors in p5, please read the color reference page.

Shiffman on Color

Please watch Mr. Shiffman on his approach to color.