Setting Colours

Colours are set for drawing shapes using the fill() and stroke() functions. These functions can take a variable number of parameters depending on whether they are used to specify greyscale or colour values and whether or not the colour uses opacity, i.e., an alpha channel.

stroke(value)
stroke(value, alpha)
stroke(value1, value2, value3)
stroke(value1, value2, value3, alpha)
 
fill(value)
fill(value, alpha)
fill(value1, value2, value3)
fill(value1, value2, value3, alpha)

The meaning of the values depends on the number of values given and the current colour mode. Providing a single value is equivalent to providing three identical values, in the default RGB colour space, this defines a greyscale colour. The alpha value is optional and if it is given it controls opacity.

Filling Shapes with Colour

By calling the fill() function before calling a shape drawing function we can define the colour that the shape will be filled with. In the following sketch the colours have been given an alpha value so that they blend:

/** @peep sketch */
size(300, 300);
background(255); 
noStroke(); 
smooth(); 
 
fill(242, 204, 47, 160); // Yellow 
ellipse(94, 72, 128, 128); 
 
fill(174, 221, 60, 160); // Green 
ellipse(180, 94, 128, 128); 
 
fill(116, 193, 206, 160); // Blue 
ellipse(114, 158, 128, 128);

Stroking a Shape with Colour

Similarly, a shape's outline can be stroked with a coloured line. In the following sketch a thick semi-transparent line is used to show how the colours interact.

/** @peep sketch */
size(300, 300);
background(255); 
noFill();
strokeWeight(8); 
smooth(); 
 
stroke(242, 204, 47, 160); // Yellow 
ellipse(94, 72, 128, 128); 
 
stroke(174, 221, 60, 160); // Green 
ellipse(180, 94, 128, 128); 
 
stroke(116, 193, 206, 160); // Blue 
ellipse(114, 158, 128, 128);

Setting the Background Colour

The background() function also takes a colour specification, like fill() and stroke(), but because it doesn't support transparency it omits the variants with 2 and 4 parameters.

background(value)
background(value1, value2, value3)

Colour Spaces

By default, colours are defined using the RGB (red, green, blue) colour space.

This means that the values given to the stroke() and fill() functions are interpreted as defining the amount of red, green and blue light to mix when applied to a pixel. By default, the range of the values given is from 0 to 255.

The meaning of the values and the range that they can take may be changed using the colorMode() function. For example, the following code changes the ranges of the RGB values expected by fill() and stroke() to be from 0 to 1.

colorMode(RGB, 1, 1, 1);

The other colour space supported by Processing is the HSB (hue, saturation, brightness) colour space. In this colour space, the fill() and stroke() functions will expect to be provided with values that specify the hue, which can be imagined as the position on a colour wheel, the saturation of the hue from dull to bright shades, and the brightness, which defines a range from dark shades to light shades of a hue. It is common to define HSB modes like this:

colorMode(HSB, 360, 100, 100)

RGB versus HSB

The difference between the RGB and HSB colour spaces is apparent when we compare the following sketches. The first draws using the RGB colour space:

/** @peep sketch */
size(256, 256);
colorMode(RGB);
for (int i = 0; i < width; i++) { 
  stroke(i, 255, 255); 
  line(i, 0, i, height); 
}

The second sketch is identical except that it draws using the HSB colour space:

/** @peep sketch */
size(256, 256);
colorMode(HSB); 
for (int i = 0; i < width; i++) { 
  stroke(i, 255, 255); 
  line(i, 0, i, height); 
}

The Colour Selector

To help you select colours, Processing (on the Desktop) provides a colour selector that will allow you to find good values for RGB and/or HSB colour modes. You can use this or any other program (or website) that provides a colour picker to find out the RGB values for a colour that you'd like to use, e.g. Photoshop or Adobe Kuler.

The Color Data Type

Processing provides the color data type to store colour values in variables. Colour values are created using the color() function.

color(value)
color(value, alpha)
color(value1, value2, value3)
color(value1, value2, value3, alpha)

We will look at how you can store values (like colours) for later use a little later. Notice that the Processing language uses the American spelling of colour. You cannot use the English/Australian spelling.

Using the color data type we can store colours with easily remembered names so that we can refer to them later.

/** @peep sketch */
color ruby = color(211, 24, 24, 160); 
color pink = color(237, 159, 176);
size(200, 200);
background(pink); 
noStroke(); 
fill(ruby); 
rect(35, 0, 20, 100);

The meaning of the values depends on the number of values given and the current colour mode. Providing a single value is equivalent to providing three identical values, in the default RGB colour space, this defines a greyscale colour. The alpha value is optional and if it is given it controls opacity.