Le modèle HSB
Le modèle HSB est une autre manière de représenter les couleurs, différente du modèle RGB auquel vous êtes habitués. HSB signifie Hue (Teinte), Saturation, Brightness (Luminosité). On trouve parfois en français l'acronyme TSL (Teinte, Saturation, Luminosité). Voici ce que chaque terme signifie :
La teinte (Hue)
La teinte décrit la couleur. En p5.js, la teinte est un nombre compris entre 0 et 360 qui représente la position sur un cercle chromatique.
La Saturation
La saturation indique l'intensité de la couleur. À 0%, la couleur sera complètement désaturée (gris), et à 100%, elle sera à sa pleine intensité. En p5js, elle est décrite par un nombre entre 0 et 100.
Luminosité (Brightness)
La luminosit décrit l'éclairage de la couleur. 0% correspond à du noir complet, et 100% sera la couleur à sa pleine luminosité. En p5js, elle est décrite par un nombre entre 0 et 100. Il faut noter qu'une luminosité de 0 correspond toujours à du noir, mais une luminosité de 100 ne correspond pas toujours à du blanc. Elle correspond à la couleur pleinement éclairée et ne donnera du blanc que si la saturation est à 0.
Exemple
Dans cet exemple, nous allons visualiser toutes les variations de saturation et de luminosité pour une teinte donnée.
La teinte est fixée de façon aléatoire au début du script grace à la fonction Math.random. Ensuite, nous
avons une double boucle qui fait varier l'abscisse et l'ordonnée pour couvrir tout le canvas. La saturation varie en
fonciton de x (0 à gauche, 100 à droite), et la luminosité varie en fonction de y (100 en haut, 0 en bas , pour avoir
la représentation la plus courante).
On peut remarque l'usage de la fonction noLoop de p5js. Cette fonction
permet de stopper le rafraichissement de l'écran, ce qui est utile pour ne pas surcharger le navigateur.
En effet, la double boucle va éxecuter les instructions de dessin poru chaque point soit à peu prêt
200 000 fois ! Sur une machine récente avec une carte graphique accélérée, cela ne présente aucune difficulté.
Par contre, sur une machine ancienne, cela peut se montrer compliqué.
La fonction noLoop inscrite dans setup fait que la fonction ne sera executée qu'une seule fois.
Cependant le programme ne s'arrête pas après, il reste à l'écoute des évènements, comme les clics de souris. C'est pour cela
que l'on crée une fonciton MousePressed qui va redéfinir la teinte et relancer grâce à la fonction
redraw une seule fois la fonction draw.
Notez bien que les variables ont été appellé h, s et b plutôt que hue, saturation et brightness parce que ces noms sont déjà pris pour des fonctions de p5js.
Attention !
Un bug dans la version actuelle de p5js oblige à utiliser une épaisseur de point d'au moins 1.2 via la fonction strokeWeight
pour que les couleurs soient correctement affichées.
À faire vous même
le passage piéton coloré
rectangles En jouant sur les nuances, la saturation et la luminosité au maximum, avec des ellipses, créez un arc en ciel.
L'arc en ciel
ellipses En jouant sur les nuances, la saturation et la luminosité au macimum, avec des ellipses, créez un arc en ciel.
La boule pulsante
Difficile ellipses Une boule faite avec un cercle qui change de teinte en croissant et décroissant.
Le damier coloré
Difficile rectangles Un damier dont un coin est dans une teinte, le coin extrème dans une autre teinte, et on passe graduellement de l'un à l'autre. Si i et j caractérisent la ligne et la colonne d'une case, on remarque que pour i+j constant, on a la même couleur.