La machine à couleurs

Explications

• La saturation est le taux de pureté de la couleur. Un gris dont les composantes RGB sont égales (par exemple (120,120,120) a une saturation nulle et une couleur pure (par exemple (255,0,0) a une saturation de 100%.
• La luminance sert à convertir la couleur en gris, c'est une sorte de la mesure de la brillance mais adaptée à l'œil humain. Elle sert ici à obtenir le petit carré gris . Gimp fait ce genre de calcul quand il convertit une image couleur en image en niveaux de gris.

Le code simplifié

function affiche()
{	var couleurRgb=0;
	var couleurR=0;
	var couleurV=0;
	var couleurB=0;
	//Couleur rouge
	couleurR=parseInt(document.machineCouleur.rouge.value);
		
	//Couleur vert
	couleurV=parseInt(document.machineCouleur.vert.value);
		
	//couleur bleu
	couleurB=parseInt(document.machineCouleur.bleu.value);
	
	//creation de la chaine de code html
	couleurRgb="rgb("+couleurR+","+couleurV+","+couleurB+")";
	
	modification de la couleur de l'élément palette
	document.getElementById("palette").style.backgroundColor=couleurRgb;
}

Commentaire du code simplifié

On a créé dans la page html un élément qui a pour identité palette.

On met ses propriétés dans la feuille de style

#palette{
	width:200px;
	height:200px;
	border: solid 1px gray;
	margin-left:7px;
	float:left;
	margin-right:20px;
}

La commande document.getElementById("palette").style.backgroundColor=couleurRgb; donne à l'élément palette une couleur d'arrière plan définie par la variable couleurRgb.

Code complet

• toString(16) qui convertit un nombre en la chaîne de caractère hexadécimale qui lui correspont. En remplaçant 16 par 2, on a l'écriture binaire du nombre.
• parseInt() pour transformer la chaîne lue dans le formulaire en nombre entier.
• parseInt( ,16).toString(10) pour convertir la chaîne de la base 16 en la base 10.
• substring(2,4) selectionne dans une chaine la sous chaîne qui commence au troisième caractère (d'indice 2) et qui finit au quatrième (le cinquiéme, d'indice 4, n'est pas pris)