Suite à plusieurs demandes de mise à disposition du code source dans un environnement adapté à la réutilisation (ie. une forge web), le code-source de l’outil d’analyse des couleurs d’une image a été déposé sur GitHub :
https://github.com/ljegou/Color-tool
N’hésitez pas à réutiliser ce code et à proposer des variations !
Dans le but de pouvoir analyser des images de grande taille plus rapidement, un re-développement de l’outil sous Python a été réalisé.
Le code source est disponible librement sur ce dépôt Github : https://github.com/ljegou/PyColorTool
Description du fonctionnement
Ce projet utilise la bibliothèque Flask, qui permet de créer des applications web multi-threads, c’est à dire avec plusieurs traitements possibles en parallèle. Cela permet d’offrir une interface graphique (page HTML) et de pouvoir suivre l’avancement des analyses (barre de progression).
L’analyse elle-même est bâtie autour d’une clusterisation (classification) de type K-Moyennes, réalisée par la bibliothèque SciKit-Learn du projet SciPy (de type KMeans++, plus précisément).
Ainsi, la méthode de regroupement des couleurs est légèrement différente de celle proposée par l’outil JavaScript, mais plus rapide.
Le paramétrage est aussi plus simple : on ne choisit que le nombre de classes de couleurs à créer, puis des paramètres de présentation (taille, opacité des cercles, type d’axe radial).
La représentation graphique des résultats est réalisée automatiquement dans le mode “radar” par la bibliothèque MatPlotLib, ce qui permet d’obtenir un graphe configurable (échelle de la grille, unités des axes, position des libellés, rotation, etc.).
Il reste des possibilités de configuration à fournir, comme le choix de l’espace de couleurs utilisé pour le calcul des regroupements (ici HSV par défaut), mais l’application fonctionne déjà de façon à être testée facilement.
N’hésitez pas à la réutiliser et à proposer des compléments !
Lien vers l’outil : http://www.geotests.net/test/simplification/laplacian.html?l=fr
Dans la série d’idées issues du travail de thèse (2013) sur l’utilisation de méthodes esthétiques pour la cartographie thématique, on trouve les outils concernant l’utilisation de coordinations de couleurs (détection/visualisation et construction, qui ont fait l’objet de développements dans le présent carnet).
On y évoque aussi l’idée d’une simplification visuelle de l’image (notamment cartographique) par l’atténuation d’un des éléments principaux de la complexité visuelle : les éléments fins contrastés (Cf. cet article ou celui-ci). On pense, entre autres, aux contours noirs sur fond clair des objets de la carte, dont la prégnance visuelle est inutilement forte (notamment avec les réglages par défaut de certains logiciels).
Pour essayer de mettre en œuvre cette simplification avec un outil accessible, c’est-à-dire facilement et rapidement utilisable, selon l’habitude ici, on a donc développé un prototype basé sur une idée simple : il existe des filtres automatiques de détection des contours, on peut donc essayer de produire des images où ils seraient atténués, par soustraction / combinaison de pixels.
Restait à trouver le bon filtre et la bonne méthode de développement, pour produire un outil web fonctionnel, qui réponde assez vite pour une utilisation simple.
Le filtrage linéaire d’une image raster, composée de pixels, consiste à créer une nouvelle image dont les valeurs de pixels sont issues d’un calcul. Ce calcul croise les valeurs de l’image d’origine avec une petite matrice, appelée noyau ou masque de convolution. (Cf. la synthèse de la Wikipedia pour un aperçu général du traitement d’image par filtres linéaires). Les filtres les plus connus sont ceux de flou (gaussien), de renforcement, de débruitage ou de détection de lignes.
La série de filtres pertinents pour la détection des contours forme une petite liste, dans laquelle les plus prometteurs sont ceux dits Laplaciens ou dérivés, utilisant des masques de convolution dont les valeurs forment une sorte d’entonnoir (ou chapeau mexicain à l’envers) :
Le fonctionnement de ces filtres peut être grossièrement résumé en disant que les fortes différences entre un pixel et son entourage, potentiel indice d’un contour intéressant à détecter, vont être isolées (par exagération extrême des différences).
Différents filtres ont été testés, pour n’en garder que deux, le filtre Laplacien évoqué ci-dessus, amélioré en un filtre Laplacien de Gaussienne (LoG) et la différence de gaussiennes (DoG). Ce dernier type de filtre est en fait une approximation du premier, plus rapide à calculer mais d’un fonctionnement légèrement différent, qui peut être complémentaire. Il se base sur le calcul de la différence entre deux flous gaussiens de portée variable (pour repérer les zones de l’image où le changement de couleur est brusque).
Les deux types de filtres se basent donc sur la convolution de l’image, que l’on peut paramétrer selon plusieurs éléments :
A ces deux éléments, on ajoute des traitements annexes :
La différence entre les deux filtres tient à la finalité du paramètre nommé “facteur” dans l’outil :
Une fois le filtre calculé, il faut le combiner avec l’image d’origine pour réaliser l’atténuation des contours recherchée. Cette combinaison, ou mode de fusion, peut être réalisée selon différents calculs, pour atténuer les contours ou, au contraire, les isoler pour les visualiser.
 |
 |
| Image d’origine (source) | Contours fortement atténués |
 |
|
| Contours visualisés | Contours légèrement atténués |
Pour aider à l’utilisation de l’outil, les paramètres de filtrage et de combinaison pour produire ces différents résultats ont été regroupés dans des “préréglages”, que l’on peut ensuite raffiner de manière interactive.
Les filtres utilisés sont assez sensibles à la taille des images et à l’épaisseur moyenne des contours. Selon l’image source, il faut donc faire varier les valeurs des paramètres, notamment de taille du masque (grande image -> grand masque) et le facteur de force de la courbe (ou de différence de gaussiennes).
Reste maintenant à tester l’outil sur diverses images, pour vérifier son fonctionnement et estimer son efficacité à en simplifier la lecture, à en atténuer la complexité visuelle.
Pour ce faire, une enquête en ligne va être conçue, mais en attendant, n’hésitez pas à tester et à nous faire remonter tout souci d’utilisation ou remarque, merci d’avance !
L’outil fonctionne sur le principe habituel d’une page Web, les calculs sont réalisés par des fonctions Javascript. Il utilise la bibliothèque de fonctions “Canvas filters” développée par Ilmari Heikkinen (sous licence MIT). Le code source (dans la page html) contient d’autres filtres et plusieurs types de paramètres fonctionnels. Ils n’ont pas été utilisés dans la version finale de l’interface pour la garder assez simple.
Lorsque vous traitez une image de votre disque dur, elle n’est pas mise en ligne sur le site de l’outil, les traitements se font localement, sur votre ordinateur.
D’autres billets pourront être rédigés pour expliquer plus en détail le fonctionnement des traitements, si cela s’avère utile.
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 :
Une nouvelle version de la page d’aide à l’utilisation est en cours de rédaction et sera disponible dans la journée.
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.
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
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.
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.
Une nouvelle version de l’outil de synthèse colorée d’une image a été mise en ligne.
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).
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.
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.
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.
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.
Le principe d’utilisation est assez simple : après avoir analysé une image selon la méthode habituelle, on peut
On peut aussi s’amuser à changer une couleur d’un tableau :
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.
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.
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 :
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.
