Colour
p5.js supports two colour modes: RGB and HSB
RGB: Red, Green, Blue
HSB: Hue, Saturation, Brightness
By default the colour mode is RGB, however it can be changed using the colorMode() function to HSB, e.g.:
colorMode(HSB);
By default colour values range from 0-255 (which is standard on computers), however you can also change this range, for example from 0-99, you read more about it in the colorMode reference.
Our shapes so far have been filled with white. We can change this using the fill() function. The fill() function takes a greyscale or RGB colour as parameters. A white and pink ellipse:
background(220);
fill(255, 255, 255);
ellipse(56, 46, 55, 55);
fill(255, 100, 100);
ellipse(80, 80, 55, 55);
Specifying alpha values allows for transparency. In the following example the pink ellipse is 50% transparent, by specifying an alpha of 128 (50% of 255).
background(220);
fill(255, 255, 255);
ellipse(56, 46, 55, 55);
fill(255, 100, 100, 128);
ellipse(80, 80, 55, 55);
The stroke refers to the outline of the shape. The stroke colour can be set using strokeColor() and it can be removed altogether using noStroke().