Colour - Griffith-ICT/1701ICT-Creative-Coding GitHub Wiki

Colour Modes

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.

Fill Colour

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);

Alpha

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);

Stroke Colour

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().