[SPIP 1.9 et GD2] Cet article va vous présenter la création d’un filtre qui convertira les informations de couleurs RVB (Rouge Vert Bleu) en HSV (Hue Saturation Value), avant d’appliquer l’effet désiré. Technique plus fréquente dans les filtres Photoshop que dans un CMS...

Commençons par expliquer notre réalisation graphique : notre filtre va saturer ou désaturer les couleurs d’une image. La luminosité de l’image et le contraste sont inchangés, mais la couleur est « affadie » ; l’effet, utilisé subtilement, donnera des tonalités de photographie vieillie (les couleurs sont « passées », délavées), ou encore de Soldat Ryan...

À l’inverse, le même filtre pourra « doper » les couleurs.

Commençons par signaler que l’on peut déjà simuler l’effet de désaturation avec les filtres fournis en standard avec SPIP. Il suffit d’afficher l’image d’origine et, par dessus (en superposition), la même image passée en noir et blanc et rendue semi-transparente. Selon le niveau de transparence de l’image en noir et blanc placée au-dessus, le résultat à l’écran sera plus ou moins désaturé.

En revanche, il n’est pas possible de saturer avec une telle méthode. De toute façon, le résultat graphique n’est pas exactement le but de cet article ; l’idée ici est d’expliquer le passage d’un codage de couleurs à un autre, afin de pouvoir par la suite appliquer des effets quasiment impossibles en RVB.

Le codage HSV

Il est nécessaire ici d’expliquer ce qu’est le codage HSV.

Vous utilisez quotidiennement, sur le Web, le codage RVB : il s’agit, pour chaque pixel, de connaître les valeurs de ses composantes rouge, vert et bleu. Il s’agit de valeurs comprises entre 0 et 255 (ou, en hexadécimal, FF)¹. Dans ce codage, on n’a pas accès directement aux informations de saturation, par exemple (on ne sait pas si le « bleu » présent dans l’image est « très bleu » ou « un peu bleuté », il faut pour cela comparer sa composante « Bleu » aux deux autres et faire des calculs compliqués).

Il existe d’autres méthodes pour décrire une couleur, et parmi elles : HSV (en français : TSV). La couleur est décrite par sa teinte (hue), l’intensité de cette couleur (saturation) et la valeur luminosité (value, appelée brightness dans Photoshop). On peut d’ailleurs visualiser ces trois valeurs dans l’interface de choix de couleurs de Photoshop et de The Gimp.

À droite, le curseur vertical permet de faire varier le choix de la teinte (hue). Cette teinte s’applique alors au grand carré de sélection à gauche, où l’on peut choisir des variantes de cette teinte :
— de gauche à droite, on augmente la saturation ; on voit que sur le bord gauche, on part du gris, et sur le bord droit on arrive à la couleur « pure » ;
— de haut en bas, on diminue la luminosité : on se déplace vers le bas en augmentant la « value » (ce qui diminue la luminosité, désolé pour la logique), ce qui rend la couleur plus sombre.

La saturation et la valeur de luminosité sont codées en pourcentages, c’est-à-dire entre 0 et 1 (puisque 1 = 100%). La valeur de teinte est bouclée sur elle-même : arrivé à une extrêmité, on arrive à l’autre bout (sur la copie d’écran ci-dessus, on constate que le haut et le bas de la barre verticale sont exactement le même rouge) ; Photoshop code assez logiquement cette valeur en degrés, de 0° à 360°. Notre script n’a pas ce besoin de lisibilité, aussi il se contentera de coder la valeur de teinte selon la même logique que les deux autre valeurs, de 0 à 1 (de 0% à 100%).

L’intérêt de ce codage est de donner immédiatement des informations extrêmement « visuelles » sur la couleur. On peut ainsi, en faisant varier la saturation et la valeur de luminosité, modifier la couleur en restant exactement dans sa « teinte » (la notion n’est pas évidente à exprimer...).

Parmi les effets très faciles à réaliser en travaillant sur les valeurs HSV (et quasiment impossible en RVB) :
— on peut, en modifier la teinte (hue), changer les couleurs de l’image, mais sans changer ni son contraste ni l’intensité des couleurs ;
— on peut « inverser » l’image (le noir devient blanc ; le blanc devient noir) mais sans changer les couleurs (le rouge reste rouge, simplement un rouge foncé deviendra rouge clair) ;
— on peut affadir ou « doper » les couleurs sans changer le contraste de l’image.

Dans ce qui suit, nous nous contenterons de réaliser le dernier effet.

Du codage RVB au codage HSV et inversement

Il n’est pas question de réinventer la roue. On trouvera sur le Web une excellente page qui récapitule tous les algorithmes pour passer d’un codage à un autre. Il suffit de les adapter à PHP :

Voici la fonction qui transforme des variables RVB en un tableau de variables HSV :

Et la fonction inverse :

Pour l’instant, je peux vous dire que je n’ai même pas cherché à comprendre...

Voici la partie qui m’intéresse réellement : notre filtre destiné à saturer ou désaturer une image :

On relira l’article consacré au filtre image_podpod pour comprendre le début et la fin du filtre. La partie qui inédite est ici :

On extrait les valeurs de chaque pixel, et on obtient :
— $a la transparence du pixel,
— les composantes $r, $g et $b.

On convertit ces composantes RVB dans leurs équivalenrs HSV, et on obtient $h (hue), $s (saturation) et $v (value).

On modifie la valeur de saturation (qu’on multiplie par la valeur passée en variable), et on limite à 1 (la saturation ne peut pas être supérieure à 100%). Comme vous le constatez, notre effet repose uniquement sur deux lignes de code particulièrement simples ! (Mon conseil à Steven : pour Le soldat Ryan 2, utilise SPIP pour la post-production, ça coûtera moins cher.)

Ensuite on réencode nos valeurs HSV en RVB afin de les appliquer au pixel.

Et c’est tout !

Remarquez le test $a<127, qui permet de laisser complètement inchangés les pixels transparents, ce qui économise du temps de calcul.

(Notez qu’auparavant, j’avais validé mes deux fonctions de conversion — de RVB à HSV puis de HSV vers RVB — en commentant simplement les deux lignes de modification de $s. Je vérifiais ainsi que, après la double conversion, j’obtenais bien une image rigoureusement identique à l’originale.)

Le filtre peut s’utiliser ainsi :

qui donne les images affichées au début de cet article :

Il est évidemment recommandé de jouer un peu avec ces filtres, par exemple voici ce que cela donne en « bouchant » complètement les zones sombres (filtre image_podpod en affichage au-dessus de la même image, désaturée à 50% :

Enfin, si à l’endroit où l’on joue avec $s :

vous décidez de jouer avec les valeurs $h ou $v, vous pouvez obtenir d’autres effets intéressants, comme par exemple :