Nous allons maintenant nous occuper du code Javascript.
Initialisation des variables
On initialise les variables dont nous aurons besoin.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | var clic=false;
//Cette variable nous indique si l'utilisateur clique sur la barre.
var clic2=false;
//Cette variable nous indique si l'utilisateur clique sur le carré.
var r=255,g=0,b=0;
//Variables qui stockeront la couleur en rgb.
var r_1=255,g_1=0,b_1=0;
// Variables secondaires rgb.
var blanc=0,noir=1;
// Le pourcentage de noir et de blanc entre 0 et 1 appliqué à la couleur (ici, pour le noir, 1 signifie qu'il n'y en aura pas, et 0 totalement : c'est l'inverse)
var x=360,y=20;
//position initiale de curseur2 (dans le carré).
|
La fonction clique()
Petite précision :
lorsque je mets // ... , ça signifie que j'inclus le code précédemment écrit.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | // ... (tout le code précédemment)
function clique(objet)
{
if(objet=="barre") // si l'utilisateur clique sur la barre ...
{
clic=true; // ...alors on met true (vrai) à clic
}
else // sinon l'utilisateur clique sur le carré ...
{
clic2=true; // ...alors on met true (vrai) à clic2
}
}
|
La fonction position()
Avant de continuer, on va avoir besoin d'une fonction qui nous permette de savoir la position (x,y) de la souris (il y a des différences selon le navigateur).
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | // ...
function position(axe,event)
{
// event contient les évènements de la page (on s'en sert pour la position du curseur)
var e = event || window.event;
// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
if(axe=="x") //si on demande x
{
var rep=e.clientX; // position x de la souris.
}
else // sinon y
{
var rep=e.clientY; // position y de la souris.
}
return rep;
// on renvoie la valeur de rep.
}
|
Les fonctions calcul() et afficher()
C'est avec ces deux fonctions qu'on calculera et affichera la couleur en utilisant les coordonnées des 2 curseurs.
Code : JavaScript | // ...
document.onmousemove=calcul;
// lorsque la souris bouge n'importe où dans le document, on appelle la fonction calcul.
document.onmousedown=calcul;
// lorsque la souris clique n'importe où dans le document, on appelle la fonction calcul.
document.onmouseup=function() { clic=false;clic2=false; }
// si l'utilisateur relâche le bouton de la souris, alors les variables clic et clic2 redeviennent fausses (false).
|
STOP ! Ne nous précipitons pas, il faut comprendre avant de faire.
Avant de vous étaler la
grande et incompréhensible 
fonction
calcul(), je vais vous expliquer le principe
.
Choix de la couleur
Regardez bien cette image :
Il y a au total 6 sous-dégradés.
Donc 6 transitions.
Si la souris de l'utilisateur se situe dans le sous-dégradé n°6, on calculera la variable G (car il n'y a qu'elle qui varie ici) :
Et par exemple si la souris se trouve aux 50 % du n°6, eh bien G = 255/2 = 128 (environ).
Et logiquement,
255,128,0 est bien orange. En quelque sorte, c'est le milieu entre le rouge et le jaune.
Ce n'est pas très simple, je l'avoue
, mais essayez avec d'autres exemples et ça va rentrer !
Vous pouvez aussi essayer avec la palette de couleurs de Paint pour voir comment évoluent les variables RGB.
Ajout de noir et de blanc
En RGB, le noir est déterminé par 0,0,0 et le blanc par 255,255,255.
Plus on augmente une variable, plus elle se rapproche du blanc, et inversement pour le noir.
C'est de cette manière qu'on pourra éclaircir ou assombrir la couleur.
La position du curseur dans le carré :
- x représentera le noir ;
- y représentera le blanc.
Allez, vous allez tenir le coup ! Finissons-en avec ces 2 abominables fonctions. 
Structure
Commençons par voir la structure de
calcul() :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | // ...
function calcul(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
{
if(clic && position('y',event)<=320 && position('y',event)>=20) // on appelle position() pour connaître la position de la souris.
{
// BLOC 1
afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
}
if(clic2) // si l'utilisateur clique sur le carré...
{
if(position('y',event)>20 && position('y',event)<320)
{
// BLOC 2
}
if(position('x',event)>60 && position('x',event)<360)
{
// BLOC 3
}
afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
}
}
function afficher() // ici on gère l'affichage de la couleur
{
// BLOC 4
}
|
Bon : allons-y par étape (bloc), sinon on ne s'y retrouvera plus.
:
BLOC 1
Ce bloc s'exécute lorsque l'utilisateur clique sur la barre.
Et que le curseur reste dans les limites de celle-ci :
la barre commence à
y=20px et fait 300 px, donc fini à
y=320px.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57 | document.getElementById("curseur1").style.top=position('y',event)-7;
//on change la position du curseur (top) en même temps que la souris.
// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.
if((position('y',event)-20)<=50) // 1/6 (50px)
{
r=255;
g=0;
b=Math.round((position('y',event)-20)*255/50);
}
else if((position('y',event)-20)<=100) // 2/6 (100px)
{
r=Math.round(255-((position('y',event)-70)*255/50));
g=0;
b=255;
}
else if((position('y',event)-20)<=150) // 3/6 (150px)
{
r=0;
g=Math.round((position('y',event)-120)*255/50);
b=255;
}
else if((position('y',event)-20)<=200) // 4/6 (200px)
{
r=0;
g=255;
b=Math.round(255-((position('y',event)-170)*255/50));
}
else if((position('y',event)-20)<=250) // 5/6 (250px)
{
r=Math.round((position('y',event)-220)*255/50);
g=255;
b=0;
}
else if((position('y',event)-20)<=300) // 6/6 (300px)
{
r=255;
g=Math.round(255-((position('y',event)-270)*255/50));
b=0;
}
document.getElementById("carre").style.backgroundColor="rgb("+r+","+g+","+b+")";
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.
|
Dans chaque sixième, on ne modifie qu'une seule variable (se référer au tableau).
Prenons l'exemple du 1er :
Code : JavaScript | if((position('y',event)-20)<=50)
|
Il n'y a que la variable
b qui varie (les autres sont constantes), et on la définit comme ceci :
Code : JavaScript | b=Math.round((position('y',event)-20)*255/50);
// Math.round renvoie l arrondi
|
On fait le produit en croix pour avoir
b.
b =
position(y) * 255 / 50.
Plus
y se rapproche de 50, plus
b se rapproche de 255.
Puis dans le 2e : (2/6).
Code : JavaScript | else if((position('y',event)-20)<=100)
//si la position y de la souris est plus petite que 100 px, donc plus petite que 2/6...
|
| r=Math.round(255-((position('y',event)-70)*255/50));
//position('y',event)-70 car on retire encore les 20 px et on inclut les 50 px précédents.
|
Ici,
r=255 et on veut le diminuer.
Plus
y se rapproche de 100, plus
r se rapproche de 0.
Produit en croix :
r =
position (y) * 255/50.
>> Mais on veut que ça diminue, donc on retire le résultat au maximum :
r = 255 - (
position (y) *255/50).
Et on fait la même chose pour le reste en alternant toujours "augmentation", "diminution".
BLOC 2
Ce bloc s'exécute si la souris reste dans ses limites verticales (le carré commence à
y=20px et fait 300 px de hauteur, donc fini à
y=320px).
Code : JavaScript | document.getElementById("curseur2").style.top=(position('y',event)-10)+"px";
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
y=position('y',event);
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.
|
BLOC 3
Ce bloc s'exécute si la souris reste dans ses limites horizontales (le carré commence à
x=60px (
left) et fait 300 px de largeur, donc finit à
x=360px).
Code : JavaScript | document.getElementById("curseur2").style.left=(position('x',event)-10)+"px";
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
x=position('x',event);
// on enregistre la position x de la souris dans la variable 'x' pour que la fonction afficher() puisse faire ces calculs.
|
BLOC 4
Et enfin la fonction
afficher() :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | noir=Math.round( (x-60)*100/300)/100;
// on calcule le pourcentage de noir appliqué à la couleur en divisant la position 'x' du curseur dans le carré par sa largeur (-60 car le carré commence à left:60px)
blanc=Math.round((y-20)*100/300)/100;
// on calcule le pourcentage de blanc appliqué à la couleur en divisant la position 'y' du curseur dans le carré par sa hauteur (-20 car le carré commence à top:20px)
//on applique le blanc aux 3 couleurs :
r_1=Math.round((255-r)*blanc)+r;
g_1=Math.round((255-g)*blanc)+g;
b_1=Math.round((255-b)*blanc)+b;
// on applique le noir aux 3 couleurs :
r_1=Math.round(r_1*noir);
g_1=Math.round(g_1*noir);
b_1=Math.round(b_1*noir);
//on affiche la couleur en rgb dans le champ resultat
document.getElementById("resultat").value=r_1+","+g_1+","+b_1;
//on applique la couleur rgb au champ resultat
document.getElementById('resultat').style.backgroundColor="rgb("+r_1+","+g_1+","+b_1+")";
|
le
Math.round( XX * 100) / 100
permet de garder 2 chiffres après la virgule.
Voilà : vous pouvez la tester, elle fonctionne !
Une palette de couleurs
.
.
Supermario58
Trouvez une formation
Suggestions
Twitter
Facebook
