Colouring with P5.js
Goal:
Using p5.js add colours to your sketch. When completed, your sketch will look something like the following (colours may vary due to your choice):
Try it Here:
To start the project, click on the link below. Full instructions available in the tutorial in the project
In Depth Guide
Topics:
- Colours (Grey Scale, RGB, RGBA,HEX)
Details:
There are many ways to define a colour in P5.js. For our part, we will be looking at Grey Scale, RGB, HEX, and RGBA
Here is a link to the reference on p5.js site.
Grey Scale
Grey Scale defines a single value that ranges from black (0) to white(255). Any other value is grey. If it is lower, it will be a darker grey. If it is higher, it will be a ligher grey.
How RGB works.
RGB stands for Red, Green, and Blue. They are the 3 primary colours of light that can be mixed together to form other colours. Depending on the intensity of each of these lights, a different colour is created. It is similar to mixing paints but instead is based on the behaviour of light. In programming, we often define colours as RGB values.
RGB values involves 3 numbers. Each number stands for the intensity of each of the 3 colours of light. The higher the number, the more intense the corresponding light. Each number can range from 0 to 255. This number comes from the fact that each of these is stored in an 8-bit value. 8 bits allow 256 different numbers.
In P5.js you can supply a function that wants a colour with 3 numbers that represent the RGB value for a particular colour.
You can also supply the RGB colour as an RGB string. For example:
background(123,111,232); is the same as: background("rgb(123,111,232)");
One advantage for the second method is that inside the Thimble editor, you can highlight the rgb string and use Ctrl-E (cmd-E in OSX) to bring up the colour picker.
Hex
HEX is an alternative form of using RGB. It actually represents the same numbers as RGB. HEX stands for hexadecimal. which means base 16. Normally we write numbers in base 10, that is , our digits go from 0 to 9. Base 16 numbers have digits that go from 0 to F. That is, 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 1 base 16 digit can be used to represent 4 bits of value. as each colour value is represented as 8 bits, 2 Hex digits are needed to represent that number.
background(123,111,232); is the same as: background("#7B6FE8"). 123 is 7B in hex. 111 is 6F in hex, 232 is E8 is hex.
RGBA
In some cases, you wish the colour to have an opacity. RGBA lets you do this. It adds a fourth number to the RGB value. The 4th value is a floating point (decimal) number between 0 and 1. 0 is completely transparent, 1 is complete opaque.
The image below was generated using the code below it. The left most circle has opacity of 1 for the fill, the second has opacity of 0.75, the one after has opacity to 0.5, and the right most has opacity of 0.25
function draw(){
background(color(0, 0, 255));
stroke(255,255,255);
fill("rgba(255,255,255,1)");
ellipse(10,50,15,15);
fill("rgba(255,255,255,0.75)");
ellipse(30,50,15,15);
fill("rgba(255,255,255,0.5)");
ellipse(50,50,15,15);
fill("rgba(255,255,255,0.25)");
ellipse(70,50,15,15);
}