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 !

Synthèses colorées : Nouveau moteur 3D

moteur3D_threejs

Une nouvelle version de l’outil “Synthèses colorées” est disponible en test.

Cette nouvelle version apporte une évolution majeure du moteur de représentation 3D des couleurs :

  • des sphères colorées plus réalistes ;
  • une exploration du modèle 3D facilitée (rotation, zoom et déplacement à la souris) ;
  • une représentation du cylindre HSL/HLS plus lisible.

Vous êtes donc invités à tester cette représentation, qui a pour vocation, une fois validée, à remplacer l’ancienne.

Du point de vue technique, on a utilisé la bibliothèque de fonctions open-source Three.JS, une référence dans le domaine.