Color Transparency

There are lots of situations where one might want to make a shape somewhat transparent. Thankfully, Processing has a simple method for making a color somewhat transparent.

By now you should understand that you need three color codes (Red, Green, and Blue), each in the range of 0-255, to specify a color. To specify a transparent color we use a fourth code - the alpha code. The alpha code refers to the opacity of a color. An alpha value of 0 would be completely transparent. An alpha value of 255 would be completely solid.

Opacity - The quality of a material that does not allow light to pass through it : the quality of being opaque

For example a very solid blue would use fill(0,0,255,255) where as a very transparent red would use fill(0,0,255,50)

It is important to note that monitors can't display things as transparent. Everything on the screen must still be displayed using red, green and blue pixels. Processing works behind the scene to blend the color of background object with foreground objects. It used the alpha code to understand how strong the foreground color should be in relation to the background.

Here is some example code for an image with a green background, a blue circles of varying transparency.

NOTE: In Open Processing, you have to put your code in Void Setup. See below. If you code in Void Draw you will be in a loop and your colors will all appear the same opacity.

The code below would be used if you downloaded Processing to your computer.