vendredi 11 septembre 2009

Interpoler une couleur - Snippet JavaScript

Petit point purement technique pour les développeurs AJAX.

Il peut arriver que l'on ai besoin d'interpoler une couleur en JavaScript pour créer des échelles visuelles de couleurs ou autres besoins similaires.

Ici :

  • minColor et maxColor sont les valeurs extrêmes de la plage de couleur désirée en forme hexadécimale (C01EA9 par exemple);
  • maxDepth une valeur numérique, représentant la valeur maximale de notre plage (par exemple pour une échelle de 3 couleurs elle prendra la valeur 2, une couleur pour 0, une pour 1 et une pour 2) ;
  • depth représente la profondeur sur l'échelle de couleur souhaitée par l'utilisateur (donc forcément inférieur à maxDepth).

Un exemple d'appel à la fonction : interpolateColor("000000","ABABAB",4,2) qui renverra une couleur représentant un niveau 3 sur une échelle de 5 couleurs (ne pas oublier de compter le 0) entre la couleur #000000 et #ABABAB.

Voici le code à proprement parler :

function interpolateColor(minColor,maxColor,maxDepth,depth){

function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}

if(depth == 0){
return minColor;
}
if(depth == maxDepth){
return maxColor;
}

var color = "#";

for(var i=1; i <= 6; i+=2){
var minVal = new Number(h2d(minColor.substr(i,2)));
var maxVal = new Number(h2d(maxColor.substr(i,2)));
var nVal = minVal + (maxVal-minVal) * (depth/maxDepth);
var val = d2h(Math.floor(nVal));
while(val.length < 2){
val = "0"+val;
}
color += val;
}
return color;
}


Aucun commentaire:

Enregistrer un commentaire

Related Posts with Thumbnails