L’outil de synthèse colorée en version carnet JS Observable

Image

Pour rendre plus simple mais aussi plus ouverte l’utilisation de l’outil de création d’une palette synthétique à partir d’une image, il vient d’être porté sur le site de carnets interactifs Observable :
https://observablehq.com/@ljegou/color-abstract-via-multidim-kmeans

Le principe de ces carnets est d’offrir une plateforme interactive de modification et d’exécution de code, ce qui permet de l’utiliser directement mais aussi de le copier et d’en examiner le fonctionnement.

L’un des points qui restait à améliorer était la façon dont l’outil sélectionne les groupes de couleurs représentatifs de l’image, ce qui correspond à une segmentation. Les versions précédentes de l’outil utilisent un algorithme à base d’agglomération progressive des couleurs selon leur proximité, qui fonctionne mais n’est pas très rapide, notamment avec les espaces colorimétriques complexe (comme CIE*Lav et CIE*Luv).

Le choix de l’espace de définition des couleurs

Pour aller vers des algorithmes de segmentation plus robustes et plus rapides, j’ai utilisé ici une méthode assez classique, celle des K-Moyennes (ou K-Means en anglais). Cette méthode produit des segmentations assez rapidement en utilisant un semis aléatoire de départ, qui est affiné progressivement. Il en découle que les segmentations peuvent varier légèrement d’une exécution à l’autre.

J’utilise ici une version multi-dimensionnelle des K-Moyennes proposée par Stanley Fork , détectée et présentée pour Observable par Philippe Rivière. Ici, la segmentation est effectuée sur les valeurs de composante des couleurs échantillonnées dans l’image, selon l’espace colorimétrique retenu (par exemple, les composantes R, V et B en trichromie simple). La rapidité d’exécution permet d’utiliser différents modèles colorimétriques de mesure des couleurs, ce qui permet de les comparer rapidement.

L’autre intérêt de la plateforme Observable, c’est qu’elle gère très bien le travail avec les formes graphiques vectorielles, via la bibliothèque de fonctions SVG D3. Cela permet de pourvoir télécharger directement toutes les illustrations générées au format SVG ou PNG. De même, on peut facilement télécharger les structures de données au format texte JSON :

La palette synthétique détectée, sous la forme d’une structure JSON classée.

Observable propose aussi une bibliothèque pour générer rapidement des graphiques complexes, Plot, que j’ai utilisée ici pour proposer deux histogrammes de la palette synthétique détectée, triée par effectifs décroissants ou par teinte.

Histogramme de la palette détectée, par effectifs décroissants.
Histogramme de la palette détectée, trié selon la teinte.

Exemple d’utilisation

Pour utiliser l’application, quelques étapes :
– Charger une image (JPEG ou PNG, la taille de l’image influe le temps de calcul).
– La synthèse colorée se calcule avec les valeurs par défaut des paramètres, que l’on peut affiner.

La montagne Sainte Victoire de Paul Cézanne, 1902-1904.

Paramètres :
– Nombre de clusters colorés à rechercher : détermine le niveau de regroupement. Choisir plus de clusters (symboles sur le graphique) offrira une analyse plus fine.
– Sampling step : écart d’échantillonnage. L’outil simplifie l’image en une série de points séparés dans l’image par cet écart en pixels. Plus de points affine l’analyse mais allonge le calcul.
– Min. luminosity : Limite minimale de prise en compte des couleurs de l’image, pour ne pas s’occuper des parties trop sombres.

Les paramètres d’analyse de l’image de la Sainte Victoire de Paul Cézanne

Résultat de l’analyse, un graphique par cercles proportionnels sur deux axes en représentation polaire (la teinte est l’angle, le rayon correspond soit à la saturation, soit à la luminosité) :

Le résultat de l’analyse de l’image avec les paramètres ci-dessus.

Comme d’habitude, je suis preneur de toute remarque et commentaire sur l’utilisation de cet outil, n’hésitez pas à l’utiliser et à le modifier à votre tour (on peur “forker” un carnet, c’est à dire en créer une version de copie, sur son propre compte Observable).

À vous de jouer !

A propos de la palette “arc-en-ciel” favorisée par les climatologues

Une palette toujours considérée comme néfaste

gfs_T2ma_global_20_aa

Modèle climatologique, Levi Cowan, 2015

La palette dite “arc-en-ciel”, qui consiste à balayer toutes les teintes avec une même intensité pour représenter un phénomène quantitatif (qui varie souvent dans une seule dimension), est depuis longtemps utilisée par certains scientifiques, particulièrement en climatologie.

Cette palette se moque évidemment de la (forte) capacité de la couleur (teinte) à transmettre l’idée de différence, de distinction, et semble croire que le lecteur sera capable de lire une gradation, une variation progressive de la valeur du phénomène alors que les teintes parcourent progressivement l’arc-en-ciel.

Ces deux suppositions vont bien sûr à l’encontre des enseignements de la sémiologie graphique et de la psychologie cognitive de la perception. Elles sont évidemment très préjudiciables pour les personnes atteintes d’un déficit de perception des teintes (approximativement 8% de la population masculine et 0,5% de la population féminine).

Ces pratiques ont été dénoncées spécifiquement par plusieurs collègues :

L’outil de synthèse colorée présenté dans ces pages permet d’illustrer clairement les problèmes posés par ce mode de représentation.

Illustration avec l’outil de synthèse colorée

L’image utilisée pour cet exemple a récemment fait parler d’elle car il s’agit d’un modèle des anomalies de températures dans le monde pour la journée du 25 février 2015, par rapport aux moyennes calculées sur la période 1981-2010. On y voit clairement la vague de froid qui frappe l’est des États-Unis depuis quelques jours, que certains pourraient tenir comme preuve à l’encontre de l’idée du changement climatique.

On en trouve la version originale sur le site de l’auteur des modélisations, Levi Cowan.

Analysée en mode HLS, cette carte donne le résultat suivant :

Carte climat analyse HLS

Mode HLS

Les paramètres utilisés sont :

  • Échantillonnage : 10 pixels
  • Seuil de détection des couleurs : 6
  • Espace colorimétrique : CIELab (rgb)
  • Coef. d’agrandissement des symboles : 160%

Climato 3D

Analyse en 3D

L’image produite montre nettement des alignements de teinte, qui plus est avec des tailles de symboles graduées (les phénomènes extrêmes de température sont heureusement peu fréquents et peu étendus). Ce qui pose problème, c’est bien sûr que l’on peut compter quatre alignements, deux importants et deux plus faibles, selon des sens de progression parfois opposés, alors qu’il ne s’agit que d’une variable monodimensionnelle (avec certes deux sous-composantes : positive et négative).

On se rend compte, enfin, que la gamme des verts a été oubliée de cette palette, peut-être pour réduire l’effet disparate d’une variation complète dans la gamme des teintes ?

Vers l’harmonie d’une palette : le déséquilibre

Galerie

Cette galerie contient 9 photos.

Le décalage ou déséquilibre Dans tout effet de rhétorique visuelle (cf. bibliographie, Groupe µ 1960) se trouve un décalage perceptible par rapport à ce qui était attendu, ce décalage produisant une réaction qui ajoute à l’effet esthétique. Il est possible … Continuer la lecture

Vers l’harmonie d’une palette : couleurs froides / couleurs chaudes

Galerie

Cette galerie contient 10 photos.

Palettes : couleurs froides / couleurs chaudes La première des formes d’organisation des couleurs est celle qui oppose et ordonne les couleurs dites “froides” et les couleurs dites “chaudes”. On la retrouve notamment décrite par les peintres et même reprise … Continuer la lecture

Vers l’harmonie d’une palette : harmonies de nuance

Galerie

Cette galerie contient 6 photos.

Les harmonies de valeur, de saturation La désaturation Une palette réalisée en gardant un niveau de valeur / saturation proche entre les couleurs qui la composent peut exprimer une certaine harmonie. La différence entre les étapes du gradient est assurée … Continuer la lecture

Vers l’harmonie d’une palette : couleurs complémentaires

Galerie

Cette galerie contient 5 photos.

L’opposition des couleurs complémentaires Les teintes complémentaires sont simplement celles qui s’opposent sur le cercle chromatique. Ainsi, le rouge s’oppose au vert-bleu, le jaune au bleu-violet, le vert pur au violet-rosé, etc. Ces oppositions sont bien connues des peintres et … Continuer la lecture

Vers l’harmonie d’une palette : les grandes structures

Galerie

Cette galerie contient 8 photos.

Les grandes structures d’organisation des couleurs Les structures colorées les plus évidentes sont celles que l’on perçoit immédiatement, donc celles qui correspondent à notre perception visuelle des images  (physiologique et cognitive) : la luminosité (intensité lumineuse) la saturation (quantité de teinte) … Continuer la lecture

Vers l’harmonie d’une palette : introduction

Galerie

Cette galerie contient 3 photos.

Dans ce premier article d’une série sur l’harmonie colorée, nous explorons les techniques de base pour construire des séries de couleurs coordonnées, ou palettes, possédant des caractères harmonieux1 Introduction : le rôle donné aux palettes de couleurs Lorsque l’on organise … Continuer la lecture