A propos Laurent Jégou

Enseignant-chercheur en géographie et géomatique, Univ. Toulouse-Jean Jaurès et UMR LISST-Cieu.

Aide de l’outil de synthèse colorée

L’outil de synthèse colorée, dans sa v2, a pour objectif de produire une représentation graphique, 2D ou 3D, qui permet d’analyser l’utilisation des couleurs dans une image.

Cette analyse se base sur :

  • une décomposition des couleurs en leurs composantes de Teinte, Saturation et Luminosité (TSL ou HSL en anglais),
  • leur regroupement en ensembles de couleurs proches,
  • puis en la représentation graphique par symboles proportionnels des quantités de pixels de chaque ensemble (En 2D, la superposition des symboles se fait dans l’ordre décroissant de taille pour éviter les masquages).

Principe de l’analyse :

  1. Dans le cadre n°1, cliquer sur le bouton pour choisir une image sur votre ordinateur. (L’outil est une page html qui va travailler dans votre navigateur, rien n’est envoyé sur le serveur).
  2. Une première analyse est réalisée, avec les paramètres par défaut.
  3. Vous pouvez modifier les paramètres pour varier ou améliorer l’analyse (cf. les descriptions d’utilisation en 2D et en 3D).

Description des paramètres

  • Écart d’échantillonnage

L’outil utilise un échantillonnage régulier des pixels de l’image pour accélérer le traitement qui pourrait être long. Pour qu’une proportion plus grande de l’image soit analysée, réduisez ce paramètre (mais attention à l’augmentation des temps de traitement).

  • Seuil de différence

Le principe de base de l’analyse est de regrouper les couleurs trouvées en des ensembles de valeurs proches, selon leurs 3 composantes (selon le type d’espace colorimétrique, de mode de définition de couleurs, utilisé, cf. ci-dessous). Ce paramètre permet de regrouper les couleurs dont la différence de valeur est inférieure au seuil fixé.

  • Couleurs principales à exclure

Dans le cas d’une image avec un fond occupant une large surface (par exemple une carte sur fond blanc), il est possible d’enlever la (ou les) couleur(s) de ce fond de la représentation du résultat de l’analyse.

  • Espace de couleurs de travail

La mesure des différences entre la couleur du pixel examiné et celles des groupes déjà trouvés dans l’image s’effectue en calculant la moyenne des différences des composantes des couleurs. Ces composantes diffèrent selon l’espace colorimétrique choisi, c’est-à-dire le moyen de définir informatiquement une couleur.

Dans l’outil, quatre espaces sont disponibles :

  • YUV : ce système sépare luminance (Y) de chrominance (U et V), il est notamment utilisé pour la télévision. Les trois composantes prennent des valeurs entre 0 et 255.
  • HSL : Teinte (sur 360), saturation et luminosité (sur 100).
  • CieL*a*b* et CieL*u*v : modèles établis pour mieux prendre en compte les spécificités de la vision humaine des couleurs. Composantes entre 0 et 255. Les calculs sont plus longs dans ces espaces (mais plus justes).
  • Luminosité min et max

On peut ici réduire l’intervalle de travail lorsque l’on veut restreindre la représentation à une partie seulement de l’image du point de vue de sa luminosité, pour la rendre plus lisible.

  • Contours des cercles

Les cercles colorés de la représentation en 2D peuvent être dessinés avec un contour de luminosité contrastée, pour mieux les distinguer lorsqu’ils sont très clairs ou superposés à d’autres cercles.

  • Libellés des axes

Ce paramètre permet de gérer l’affichage du libellé des axes sur la représentation en 2D.

  • Taille des symboles

On peut ici choisir un pourcentage de modification de la taille des symboles.

  • Axes en 2D

Dans la représentation en 2D, il faut choisir lesquelles des 3 composantes seront réparties sur les 2 axes disponibles (la troisième étant perdue).

  • Type d’analyse

On détermine ici entre une analyse de toute l’image ou seulement des points d’une ligne (a dessiner sur l’image par deux clics sur ses extrémités).

  • Couleur (de référence) du groupe

Cet important paramètre permet de sélectionner quel sera l’indicateur statistique pour calculer la différence de couleur entre le pixel en cours d’analyse et les groupes de couleurs déjà formés précédemment : la moyenne ou la médiane des groupes. L’utilisation de la médiane allonge un peu le temps d’analyse.

  • Opacité

On peut ici choisir d’utiliser des symboles transparents, avec une opacité inférieure à 1.

Fonction du remplacement de la couleur

Avec le panneau n°4, l’outil propose une fonction de remplacement de tout un groupe de couleurs par une couleur choisie.

  1. cliquer sur le bouton “choix de la couleur”
  2. cliquer dans la représentation en 2D sur le groupe de couleurs à remplacer
  3. choisir la couleur de remplacement en cliquant dans le rectangle (dont la valeur par défaut est “ffffff”, soit blanc).
  4. cliquer sur le dernier bouton “remplacer la couleur” pour obtenir une image PNG du résultat.

Exportation de la représentation

Le panneau n°5 permet enfin d’exporter la figure résultat de l’analyse sous la forme de :

  • fichiers PNG (pixel) ou SVG (vecteurs) pour l’analyse en 2D
  • fichier PNG pour l’analyse en 3D.

 

 

Exemple commenté d’utilisation : Van Gogh, Fritillaires dans un vase en cuivre, 1887

Image

Fritillaires 1887

Van Gogh, Fritillaires, 1887

Ce tableau est une œuvre de V. Van Gogh (1853-1890) réalisée en 1887 à Paris, alors que le peintre étudie les idées néo-impressionnistes de Paul Signac (1863-1935), notamment en ce qui concerne sur la couleur.
On peut en trouver une reproduction numérique de bonne qualité sur le site Wikipedia Commons. Cette peinture est exposée au Musée d’Orsay à Paris, qui en fait une présentation commentée.

Cette œuvre est particulièrement intéressante ici pour son utilisation des contrastes et des oppositions de couleurs, que nous allons pouvoir analyser et représenter visuellement avec l’outil de synthèse.

A première vue, le contraste coloré voulu par l’auteur se divise donc en deux applications :

  • un contraste de luminosité, entre des fleurs éclatantes, le reflet du vase et les ombres ;
  • un contraste de teinte, entre des rouges-orangés et des bleus-violacés.

L’analyse de l’image avec les paramètres par défaut, HSL en en 2D, nous donne le résultat suivant :

Analyse VVG Fritillaires 1

Analyse avec les paramètres par défaut

La disposition angulaire des couleurs indique la présence d’une opposition orangés / bleus de saturations assez variées, ainsi que l’utilisation de verts moins diversifiés, dont la saturation maximale reste à un niveau moyen. La dimension des symboles et leur confusion centrale (superposition) ne permet pas d’aller bien plus loin dans l’analyse, il faut donc affiner les paramètres de la représentation.

Nouveaux paramètres :

  • Écart d’échantillonnage 40 (pour prendre en compte plus d’échantillons)
  • Seuil de différence entre groupes : 10 (pour des groupes de couleurs plus précis)
  • Espace de travail : CieL*a*b (pour une meilleure prise en compte de la perception visuelle)
Analyse VVG Fritillaires 2

Analyse avec des paramètres plus adaptés

Par rapport à la représentation précédente, on obtient une image plus précise, plus lisible, mais il reste tout de même un grand nombre de superpositions au centre de la figure (beaucoup de couleurs peu saturées). On voit par exemple que la ligne d’oppositions principales orange / bleu se complète certes d’un groupe de verts moyens mais aussi d’une ligne de jaunes de saturations variées, qui ne se retrouve pas dans la teinte opposée (les bleu-verts). Cependant, les différences de luminosité sont masquées par le type de représentation qui, par défaut, présente la saturation sur le second axe.

Pour aller plus loin, on peut donc regarder comment cette répartition des teintes se réalise quand on prend en compte la luminosité à la place de la saturation des couleurs.

Analyse VVG Fritillaires 2

Analyse en mode HLS

La dispersion des couleurs sur l’axe de la luminosité semble aussi assez réduite, mais comme elle se trouve dans un intervalle autour de valeurs moyennes, on obtient un anneau de teintes qui permet de les distinguer plus facilement. Cela peut être le résultat d’une photographie trop peu contrastée de l’œuvre. Cette nouvelle figure montre, de plus, qu’il existe un “pont” une liaison entre les bleus et les verts ainsi que quelques teintes violacées, auparavant perdues dans la superposition des couleurs.

Comment faire pour éviter ces superpositions qui gênent la lecture ? Deux solutions :

1. Réduire la taille des symboles (mais ils risquent d’être très petits)

Analyse VVG Fritillaires 3ter

Réduction des symboles à 4%

2. Utiliser la transparence (mais les couleurs vont se mélanger)

Analyse VVG Fritillaires 3bis

3. Utiliser la représentation en 3D

 

Analyse VVG Fritillaires HLS 3D

3D HSL vue de dessus

La représentation 3D par défaut vue de dessus correspond à l’image 2D, pour en faciliter l’utilisation.

Analyse VVG Fritillaires HLS 3D

3D HLS vue de côté

En faisant pivoter cette représentation selon l’axe des X on obtient une meilleure lisibilité des 3 composantes colorées :

  • la teinte est comme précédemment matérialisée par l’angle
  • la luminosité par la distance horizontale à la ligne centrale
  • la saturation par la position verticale sur l’axe Z (en bleu, vertical ici)

La représentation complémentaire en HSL apporte des précisions utiles :

Analyse VVG Fritillaires HSL 3D

Analyse 3D HSL (zoom)

On peut ici faire des remarques supplémentaires :

  • les rouges sont généralement moins denses et moins lumineux que les jaunes, formant un gradient en éventail.
  • les bleus sont plus isolés dans les teintes, on voit peu de teintes intermédiaires vers les verts et les violets.
  • les verts se lient aux rouges par les densités et luminosités faibles, ils s’étendent peu vers les fortes luminosités mais varient quelque peu de teinte.
  • un violet nettement délimité, présent en trois valeurs de luminosité non dégradées.
  • une forme en cône inversé sur la représentation HSL, qui indique une relation entre faible saturation et faible luminosité. Plus la couleur est claire, plus elle sera dense, dans ce tableau. Le contraste de luminosité annoncé est donc bien lisible et se double d’un contraste de densité qui est lié.

Le fait de visualiser les trois composantes colorées en même temps, à l’aide d’une interface utilisateur qui permet de varier l’angle et la position de l’observation de manière précise et interactive, offre donc un moyen plus complet pour l’analyse des proportions et des relations colorées d’une image.

 

Outil de synthèse colorée d’une image : version 2

État

L’outil d’analyse et de représentation synthétique des couleurs d’une image a profité d’une nouvelle session de développement pour améliorer l’interface utilisateur et corriger les derniers bugs d’affichage. De manière moins visible, le code source a été rationalisé et optimisé, pour une compréhension et une réutilisation plus simple.

La nouvelle adresse de l’outil est désormais :

http://www.geotests.net/couleurs/v2/

Les principales modifications fonctionnelles sont :

  • Modification du mode de calcul des groupes de couleur : plus précis, évite les doublons, mais plus gourmand en temps de calcul (attention aux images de grande taille).
  • Amélioration de la visualisation 3D : plus lisible et munie d’un panneau de commande pour les déplacements et rotations de camera.
  • Ajout d’un export de la représentation 2D au format vectoriel SVG.
  • Ajout d’un export PNG (raster) de la représentation 3D.

Une nouvelle version de la page d’aide à l’utilisation est en cours de rédaction et sera disponible dans la journée.

Outil de synthèse colorée : sauvegarde des palettes

Une fonctionnalité manquait à l’outil de synthèse colorée : la possibilité de sauvegarder la palette trouvée, la liste des couleurs et de leurs proportions,

Un petit lien est donc maintenant disponible sous la liste des 20 premières couleurs de la palette trouvée, à droite de l’outil :

Sauvegarde de la palette

 

Ce lien permet le téléchargement d’un fichier texte au format CSV (séparateur : point-virgule, lisible par un tableur), qui contient les valeurs des composantes des couleurs dans leur espace colorimétrique d’origine (YUV, HSL CIELab ou CIELuv), dans l’espace écran RVB, le nombre de pixels échantillonnés et l’encodage hexadécimal (HTML).

Nouvel outil de création de gradients doubles

Image


inflexion

On utilise très souvent les gradients doubles en cartographie thématique, par exemple lorsque le phénomène à représenter présente des valeurs positives et négatives, ou qu’il existe un seuil utile dans ses valeurs (moyenne, indice 100, etc.).

L’outil de création de gradients pouvait être utilisé en deux fois pour créer une telle double progression, mais il est plus simple désormais d’utiliser un nouvel outil développé spécifiquement :

En français : http://www.geotests.net/couleurs/gradients_inflex.html
En anglais : http://www.geotests.net/couleurs/gradients_inflex_en.html

L’outil propose la modification d’une quatrième composante : la transparence, en plus des trois classiques, teinte, saturation et luminosité, suite à une idée de F. Bahoken. Cette fonction a aussi été ajoutée à l’outil de création de gradients d’une seule progression.

Nouvelle version de l’outil de synthèse colorée

Image

De nouveaux développements de cet outil ont été effectués, pour prendre en compte des idées intéressantes : la possibilité de rendre transparents les symboles de l’analyse (F. Bahoken) et le choix de la méthode de représentation des groupes de couleurs.

Rappel, les URLs de l’outil :

En français : http://www.geotests.net/couleurs/frequs_svg.html?l=fr
En anglais : http://www.geotests.net/couleurs/frequs_svg.html

Synthèses colorée avec transparence

Transparence dans les symboles de l’analyse

 La transparence des symboles permet de visualiser leur plus ou moins grande superposition, dans le cas de réglages favorisant des groupes de couleurs proches. Elle produit en outre des visualisations qui ont un intérêt esthétique dans le mélange des couleurs.

moyenne et médiane Analyse de la carte avec un gradient jaune-vert.

La seconde modification de l’outil concerne la méthode selon laquelle les couleurs d’un même groupe sont représentés par une couleur et donc par un symbole unique. Auparavant c’est la moyenne des couleurs du groupe qui avait ce rôle représentatif, mais le risque existe que la couleur moyenne d’un groupe n’existe pas réellement dans l’image. On a donc ajouté la possibilité d’utiliser la couleur médiane, c’est à dire celle qui est représentée en plus grand nombre dans le groupe.

Dans certains cas, le résultat de l’analyse sera donc légèrement différent selon la méthode utilisée, surtout si on utilise des paramètre produisant un petit nombre de symboles sur l’analyse (ie. un seuil de regroupement important).

Dans tous les cas on conseille de faire varier légèrement les paramètres de seuil et de tester plusieurs espaces colorimétriques de calcul, l’algorithme d’analyse étant sensible et pouvant produire des résultats sensiblement différents dans les détails.

 

Synthèse colorée en mode vectoriel

Image

Une nouvelle version de l’outil de synthèse colorée d’une image a été mise en ligne.

svg exemple

Elle offre un rendu vectoriel du résultat, au format SVG. Cela signifie qu’il est désormais plus simple de réutiliser le résultat graphique de l’analyse, dans un logiciel de dessin comme Inkscape ou Adobe Illustrator©.

Toutes les fonctions de l’outil sont disponible, comme l’analyse le long d’une ligne et le remplacement d’une couleur, sans que cela influe notablement sur les temps de calcul.

Il est possible d’exporter l’analyse au format SVG en utilisant par exemple une extension de navigateur, comme “Save Canvas and SVG” sous Google Chrome ou “Export SVG” sous Mozilla Firefox.

Le format SVG est aussi compatible avec tous les navigateurs modernes, qui peuvent les afficher et offrir des fonctions d’exploration (zoom / pan).

Outil de synthèse colorée : analyse le long d’une ligne

Image

La dernière mise à jour de l’outil de synthèse des relations et des proportions colorées ajoute une fonctionnalité intéressante pour analyser une partie d’une image au lieu de sa totalité : l’analyse le long d’une ligne.

Il suffit pour cela de choisir l’option appropriée dans le panneau de paramètres n°4, puis de cliquer aux deux extrémités de la ligne d’analyse dans l’image.

ligne

Tous les pixels composant la ligne sont pris en compte pour l’analyse, il n’y a pas d’échantillonnage. Cette analyse peut être utile pour par exemple étudier un dégradé dans une partie spécifique du tableau.

delacroix_bacchus

Par exemple, dans “Le triomphe de Bacchus” (1861), d’Eugène Delacroix (1798-1865), le ciel présente des teintes allant de l’orangé au bleu, en passant par la gamme des verts de manière presque ininterrompue, dans une saturation moyenne (analyse selon l’espace CIELuv avec un seuil à 2). Ce dégradé peut devenir un gradient de couleur intéressant à réutiliser dans une carte choroplèthe.

Si ce tableau possède d’une manière générale un caractère particulier dans l’utilisation des couleurs dans sa surface totale, le fait d’analyser uniquement le ciel permet d’isoler pour l’analyse cette partie bien distincte du tableau et d’en relever l’originalité.

Enfin, petit ajout technique à l’outil : une seule page HTML est désormais utilisée pour les versions anglaise et française de l’outil.

Outil de synthèse colorée : remplacement de couleur

Image

L’outil de synthèse colorée, qui permet de visualiser les relations et les proportions de couleurs dans une image, propose une nouvelle fonction en test : le remplacement d’une couleur (sur une idée de S. Christophe).

L’idée est de pouvoir tester visuellement le remplacement d’une couleur par une autre,  par exemple dans un dégradé de couleurs sur une carte. Ci-dessous on a modifié la première classe pour lui donner une couleur plus foncée et plus mauve.

Rés. ppales.Rés. ppales v2

 

Le principe d’utilisation est assez simple : après avoir analysé une image selon la méthode habituelle, on peut

  • se rendre dans l’encadré n°4, cliquer sur le bouton “choix de couleur”,
  • cliquer ensuite dans la représentation synthétique sur le cercle coloré de son choix,
  • retourner dans l’encadré n°4 choisir une couleur en cliquant dans le rectangle,
  • enfin cliquer sur le bouton “remplacer” pour visualiser le résultat.

On peut aussi s’amuser à changer une couleur d’un tableau :

vg2

Ajout du mode CIE L*u*v à l’outil de gradients

Image

L’outil d’exploration de gradients colorés, déjà présenté ici, vient d’être amélioré par l’ajout d’un nouveau mode de calcul des couleurs intermédiaires.

Cet outil procède par interpolation entre deux couleurs définies selon le système des composantes de teinte, saturation et luminosité, assez simple à saisir et utilisé dans un grand nombre de logiciels de conception graphique. La première version utilisait une interpolation directe entre les deux couleurs, c’est à dire que les composantes des couleurs intermédiaires sont une simple proportion de la différence entre les deux couleurs extrêmes.

jrp

Par exemple, dans un gradient du jaune au rouge, la couleur du milieu du gradient est définie par les composantes de la couleur de départ plus la moitié de la différence avec la couleur d’arrivée. Pour la teinte, entre un jaune 60 et un rouge 0, la couleur du milieu du gradient aurait eu un orangé de teinte 30.

pjr_c1pjr c2

L’outil offre en outre la possibilité de choisir la forme de la progression : linéaire ou courbe, pour renforcer les différences entre couleurs successives, plutôt au début ou plutôt à la fin du gradient.

Cependant, cette méthode de calcul des couleurs intermédiaires, basée sur les composantes, ne tient pas compte des particularité de la perception humaine des couleurs, qui n’est pas homogène sur les teintes, la saturation et la luminosité. Par exemple, les couleurs sombres, bleutées et peu saturées sont beaucoup moins perceptibles que ce qu’on pourrait penser. (Cf. les ouvrages de S. Kosslyn ou C. Ware dans la bibliographie, pour une présentation claire de ces différences, ainsi que cette page du site du centre de recherches Ames de la NASA).

L’espace colorimétrique CIE L*u*v, norme mise au point en 1976 par la CIE possède la caractéristique d’être mieux adapté à la perception humaine, les couleurs y sont plus uniformément réparties. Les  relations entre les composantes deux couleurs y sont  linéaires. C’est donc un système dans lequel le calcul de la différence entre deux couleurs sera adapté à notre technique d’exploration des gradients colorés. (Cf. cette page de comparaison de gradients par Mats Mattson ou la très utile série de posts sur le blog Elegant Figures de Rob Simmon).

Le résultat de ce mode de calcul montre des gradients dont la progression diffère sur le plan de la saturation, cette composante est moins fortement mise en œuvre qu’avec le mode précédent :

Calcul HSV :      jr_h
Calcul CIE Luv : jr_cl

 

La progression colorée est donc moins saturée, elle correspond mieux à des différences de perception visuelle égale d’une couleur à l’autre.

Il est possible de combiner ce mode de calcul du gradient avec des progressions courbes des composantes, pour renforcer les différences entre couleurs.

G. Aisch propose avec Chroma.js une bibliothèques de fonctions très intéressante de ce point de vue, que l’on tentera d’utiliser dans les prochaines versions de l’outil pour bénéficier notamment de la correction de la luminosité dans les gradients.