La couleur

Par défaut, P5js utilise le modèle RVB, en codant les valeurs entre 0 et 255 (256 valeurs, voir plus bas) Le changement de mode colorimétrique d’un sketch se fait à l’aide de la fonction colorMode(), de la façon suivante.

colorMode(RGB); // ou colorMode(HSB);

On peut également modifier l’échelle de valeurs (initialement 255) en entrant des paramètres supplémentaires.

colorMode(RGB, 100, 100, 100);

Plus d’infos sur colorMode()

Modèle RVB(A)

Le mode RVBA (rouge, vert, bleu, opacité) est peut-être le plus facile à mettre en oeuvre dans un premier temps. Il s’utilise en inscrivant les valeurs désirées, séparées par des virgules, dans la fonction concernée. Par exemple:

fill(255,255,0,128); //Jaune à 50% d'opacité

Notez que fill() et stroke() ne s’appliquent qu’à ce qui suit, dans l’ordre du programme. Ainsi, un rectangle dessiné AVANT l’instruction ne sera pas affecté.

Pourquoi 256 valeurs?

Les valeurs s’expriment sur une échelle de 0 à 255 (256 valeurs) 256 car une couleur se code ici sur 1 octet. 1 octet c’est 8 bits. et 1 bit c’est juste un switch entre 1 ou 0. Un octet pourrait être ceci: 11010001

Je peux, sur un octet, définir 256 (2 exposant 8) possibilités:

• 01111111
• 10111111
• 11011111
• 11101111
• etc.

Il n’est pas forcément évident de supposer les valeurs à entrer pour une couleur donnée. Il est plus facile d’aller les chercher (copy/paste) dans un sélecteur de couleur (Celui d’Illustrator par exemple). Ou tout simplement en faisant une recherche google sur color selector

Mode HSB

Le mode HSB, lui, s’exprime en radians (ou degrés). Un peu plus difficile à appréhender au départ, il permet des résultats souvent plus riches en nuances.

Source

colorMode(HSB, 360, 100, 100);

About circles

Les modes de fusion

La fonction blendMode() permet de gérer les différents modes de fusion des couleurs dans P5js.

blendMode(ADD);
//or
blendMode(MULTIPLY);
//or
blendMode(DIFFERENCE);
//or
blendMode(EXCLUSION);
//or
blendMode(DARKEN);
// Etc.