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).

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 :

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.

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.

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.

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é) :

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 !