8800 sujets

Développement web côté serveur, CMS

Colormap en php

Bonjour à tous,

Je suis très étonné mais je n'ai trouvé nulle part de librairie ou script php permettant de transformer une valeur (typiquement un pourcentage) en une couleur, suivant une certaine "colormap".

Tout le monde a déjà très certainement vu des graphes scientifiques sur lesquels la couleur correspond à une valeur (ex : un graphe de la température des océans). Il existe différentes échelles de couleurs habituellement utilisées. Quelques exemples : http://www.mathworks.com/help/techdoc/ref/colormap-dropdown.gif

En gros, je suis à la recherche d'une librairie ou fonction me renvoyant les valeurs RGB ou Hexa à partir d'un pourcentage, en utilisant une colormap au choix.

Est ce que certains d'entre vous auraient déjà vu ce type de scripts ?
Si c'est pas le cas, faudra que je le code moi même Smiley biggrin
Modifié par pixelb (28 May 2011 - 18:22)
hum pourquoi ne pas utiliser les palettes de couleurs justement comme on le faisait dans les années 80-90?

Les générateurs de fractales et de terrains utilisaient ça , l'image était généré avec des valeurs de palette entre 0 et 255 et on appliquait ensuite la palette que l'on voulait ( c'est comme ça que mon avatar a été créé d'ailleurs .... )

donc en gros si j'avais un graphique de ce style à faire ben j'utiliserai un png indexé .... purée ça me rappelle des souvenirs ça ( les démo en mode mcga avec le cycle de couleurs de la palette, le pc sous la mezzanine qui calcule la nuit les scènes en image de synthèse ... plus vite avec le coprocesseur 486 hein )
Je t'avoue que je ne capte pas trop ce que tu m'expliques là...
En ce qui me concerne je serais bien parti sur définir 2 couleurs et calculer le dégradé entre les deux... Sauf que ca se complique si j'utilise plus de 2 couleurs...
Je supposais que tu avais déjà ta palette de couleurs.

Tu peux par exemple créer ta palette avec un logiciel de dessin tel gimp ou photoshop.
Ces logiciels possèdent des fonctions de création de dégradés très puissants.

Tu fabrique un beau dégradé dans le sens des valeurs désirées de gauche à droite.
Tu transformes ton image rvb en image avec couleurs indexées et tu obtiens une jolie palette, je crois que gimp permet de récupérer les valeurs en exportant en C .... ça fait un bail que je n'ai pas fait ça ...
A moins que tu cherche créer une palette (colormap) par code ? Là c'est autre chose ...

Mais dans ton post du début tu sembles avoir une palette ( qui n'est rien d'autre qu'un tableau de couleurs) , et des valeurs numériques auxquels tu veux associer une couleur via ta palette.
Sinon tu peux faire comme le sélecteur de couleur sur les appli android : génération d'un dégradé ( le sdk apporte une fonction dégradé toute faite ... ) et récupération des données RVB du pixel appuyé ...
Voici le fichier généré par gimp pour la palette hot ( elle a pas beaucoup de couleurs en fait )
/*  GIMP header image file format (INDEXED): /home/arialia/hotpalette.h  */

static unsigned int width = 117;
static unsigned int height = 15;

/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */

#define HEADER_PIXEL(data,pixel) {\
pixel[0] = header_data_cmap[(unsigned char)data[0]][0]; \
pixel[1] = header_data_cmap[(unsigned char)data[0]][1]; \
pixel[2] = header_data_cmap[(unsigned char)data[0]][2]; \
data ++; }

// palette ou colormap 
static char header_data_cmap[256][3] = {
	{ 41,  0,  0},
	{ 49,  0,  0},
	{ 82,  0,  0},
	{ 90,  0,  0},
	{132,  0,  0},
	{173,  0,  0},
	{214,  0,  0},
	{255,  0,  0},
	{255, 41,  0},
	{255, 82,  0},
	{255,123,  0},
	{255,132,  0},
	{255,165,  0},
	{255,173,  0},
	{255,206,  0},
	{255,214,  0},
	{255,247,  0},
	{255,255,  0},
	{255,255, 33},
	{255,255, 66},
	{255,255, 99},
	{255,255,132},
	{255,255,189},
	{255,255,231},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255},	{255,255,255},
	{255,255,255},	{255,255,255},	{255,255,255}	};

// image en couleur indexées
static char header_data[] = {
	0,0,0,0,0,0,0,1,2,2,2,2,2,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,14,14,
	15,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,3,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	15,14,15,15,15,15,16,16,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,1,0,0,0,1,1,3,3,2,2,2,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,13,14,14,14,
	15,15,15,15,15,15,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,20,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,2,2,3,2,3,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,2,2,3,2,3,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,1,1,0,0,1,3,3,2,2,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,13,14,14,14,
	15,15,15,15,15,15,16,16,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,20,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,3,2,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,20,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,1,0,0,0,1,1,2,2,2,2,3,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,13,14,14,14,
	15,15,15,15,15,15,16,16,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,2,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,20,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,2,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,20,22,22,22,22,
	22,22,22,22,23,
	0,0,0,1,1,0,0,1,3,3,2,3,2,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,13,14,14,14,
	15,15,15,15,15,15,16,16,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,20,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,2,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,1,0,0,0,1,1,2,2,3,2,2,2,2,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,13,14,14,14,
	15,15,15,15,15,15,16,16,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,21,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,3,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,20,21,21,22,22,22,22,
	22,22,22,22,23,
	0,0,0,0,0,0,0,1,3,3,2,3,2,3,3,3,
	4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,
	6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,8,
	8,8,8,8,8,8,8,9,9,9,9,9,9,9,10,11,
	11,10,11,10,11,11,12,12,13,12,12,13,12,14,15,15,
	14,15,15,15,15,14,16,17,17,17,17,17,17,18,18,19,
	19,19,19,19,19,20,21,21,21,20,21,21,22,22,22,22,
	22,22,22,22,23
	};


upload/36311-hotpalette.png

donc si tu as une palette fixe tu la transforme en tableau et tu peut faire par exemple :

$r=$hot[$temp][0];
$v=$hot[$temp][1];
$b=$hot[$temp][2];

Ps : pas très sure de la syntaxe des tableaux à plusieurs dimensions en php ....

Edit : flûte je me souviens plus quel logiciel graphique était bon pour éditer et créer les palettes , il y en avait un qui les créait dans l'ordre rencontré ....
Modifié par Arialia (29 May 2011 - 01:35)
En fait ce n'était pas bien compliqué... Je viens de créer cette fonction :
function colormap($img,$values=255){
	$im = imagecreatefrompng($img);
	$width = imagesx($im)-1;
	for($i=0;$i<=$values;$i++){
		$rgb = imagecolorat($im,round($i/$values*$width),1);
		$colormap[$i]['r'] = ($rgb >> 16) & 0xFF;
		$colormap[$i]['g'] = ($rgb >> 8) & 0xFF;
		$colormap[$i]['b'] = $rgb & 0xFF;
	}
	return $colormap;
}


En gros, on donne une image png en paramètre (et le nombre de couleurs qu'on veut créer en paramètre optionnel), et on récupère la palette de couleurs sous forme d'un tableau.

Les couleurs sont créées sur toute la largeur de l'image, sur la première ligne de l'image.

Le seul "souci" c'est que la fonction fonctionne très bien avec des png encodés en RGB, seulement ça foire lorsque je travaille avec des couleurs indexées ! La fonction imagecolorat me retourne uniquement l'index de la couleur en coordonnée 'B' et rien dans les autres (0)...
Modifié par pixelb (29 May 2011 - 10:36)
logique pour une image en couleur indexée tu récupères l'indice de la couleur dans la palette, si tu veux les valeurs rgb il faut ensuite utiliser la fonction : imagecolorsforindex

à savoir que les images indexées peuvent être assez sympas : juste en changeant la palette on modifie les couleurs de l'image, on utilisait à fond cette technique dans les jeux vidéos avant.

Par exemple ça peut encore être utile : pour faire une carte d'alerte , tu peux associer une couleur de palette différente à chaque département , tous les pixels du département de l'Ain auront comme valeur de pixel '1', si tu veux changer le niveau d'alerte du département de l'Ain tu modifies juste la couleur de l'indice 1 de la palette de l'image ...
C'est vrai que c'est bien pratique, je n'imaginais pas toutes les applications possibles.

J'ai bien compris le principe des couleurs indexées, seulement je ne vois pas comment détecter si une image est en RGB ou en couleur indexée... Je suppose que pour une image RGB imagecolorsforindex me retourne false lorsque je l'appelle alors ??
Sujet clos
Aller à