Discussion :

[Maitre Jiraya]

Bonjour tout le monde. Pour mon projet personnel du moment je dois convertir une couleur codée en HSL pour avoir son équivalent en RGB.

Pour cela j'ai créé 2 objets qui représente respectivement les 2 formats.

Puis pour ma conversion, je passe par le sous objet prototype pour étendre une fonction de conversion à mon objet HSL.

C'est là que le gros soucis apparait. Il semble impossible d'instancer un objet RGB à l'intérieur de cette fonction. Cependant en modifiant ma fonction, pour une raison que je ne comprend pas, j'arrive à retourner un objet RGB (voir second code plus bas).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
var RGB = function (red, green, blue){
	this.red = red;
	this.green = green;
	this.blue = blue;
};
 
RGB.prototype.toString = function(){
	return 'rgb('+ this.red +', '+ this.green +', '+ this.blue +')';
}
 
var HSL = function(hue, saturation, lightness){
	this.hue = hue;
	this.saturation = saturation;
	this.lightness = lightness;
};
 
HSL.prototype.toString = function(){
	return 'hsl('+ this.hue +', '+ this.saturation +'%, '+ this.lightness +'%)';
}
 
HSL.prototype.toRGB = function(){
	var L = this.luminance / 100;
	var S = this.saturation / 100;
 
	var C = (1 - Math.abs(2 * L - 1)) * S;
	var h_prime = this.teinte / 60;
	var X = C * (1 - Math.abs(h_prime % 2 - 1));
	var m = L - (C / 2);
 
	if(h_prime <= 0 && h_prime < 1){
		var RGB = new RGB(C, X, 0);
        }
	else if(h_prime <= 1 && h_prime < 2){
		var RGB = new RGB(X, C, 0);
        }
	else if(h_prime <= 2 && h_prime < 3){
		var RGB = new RGB(0, C, X);
        }
	else if(h_prime <= 3 && h_prime < 4){
		var RGB = new RGB(0, X, C);
        }
	else if(h_prime <= 4 && h_prime < 5){
		var RGB = new RGB(X, 0, C);
        }
	else if(h_prime <= 5 && h_prime < 6){
		var RGB = new RGB(C, 0, x);
        }
 
	RGB.red = Math.round((RGB.red + m) * 255);
	RGB.green = Math.round((RGB.green + m) * 255);
	RGB.blue = Math.round((RGB.blue + m) * 255);	
 
	return RGB;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
HSL.prototype.toRGB = function(){
	var L = this.lightness / 100;
	var S = this.saturation / 100;
 
	var C = (1 - Math.abs(2 * L - 1)) * S;
	var h_prime = this.hue / 60;
	var X = C * (1 - Math.abs(h_prime % 2 - 1));
	var m = L - (C / 2);
 
        var red = 0, green = 0, blue = 0;
 
	if(h_prime <= 0 && h_prime < 1)
		red = C; green = X;
	else if(h_prime <= 1 && h_prime < 2)
		red = X; green = C;
	else if(h_prime <= 2 && h_prime < 3)
		green = C; blue = X;
	else if(h_prime <= 3 && h_prime < 4)
		green = X; blue = C;
	else if(h_prime <= 4 && h_prime < 5)
		red = X; blue = C;
	else if(h_prime <= 5 && h_prime < 6)	
		red = C; blue = X;
 
        red += m;
	green += m;
	blue += m;	
 
	return new RGB(Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255));
}

Bref, comment faire pour me débarrasser de cette erreur ?

[BaBeuH]

Salut,

Dans la partie de code où tu convertis ton objet HSL en RBG, tu créés un objet de type RGB, sauf que tu utilises le même nom de variable que le constructeur lui-même... du coup, tu écrases ton objet RGB précédemment créé qui n'est donc plus un constructeur...

Dans ton second code, tu n'utilises plus de variable tu retournes directement l'objet créé, tu n'écrases donc pas ton constructeur.

D'où l'utilité d'utiliser des espaces de nom pour éviter ce genre de problème, tu devrais trouver des super tutos sur le site à propos de ces espaces de nom.

A+

[Maitre Jiraya]

Merci de ta réponse, j'ai regardé un peu le tuto qui est consacré à ce sujet sur le site.

J'ai juste une dernière question : Avec l'utilisation des namespaces, j'alourdis en quelques sorte mon code non ?

[BaBeuH]

Je suis d'accord avec toi sur le fait que ça peut alourdir ton code, mais d'un autre coté, ça sécurise ton code.

A toi de voir selon tes contraintes si cela en vaut la peine, mais je pense que ça reste malgré tout une bonne pratique.

[SpaceFrog]

pourquoi ne pas juste modifier les nom de variables ?

[Maitre Jiraya]

@BaBeuh : Si tu le dis, je vais lire attentivement le tuto proposé ici

@SpaceFrog : C'est ce que j'ai fait.

Et j'ai enfin compris pourquoi ça plantait. () est une méthode d'un objet (car une fonction en Js est un objet), donc appelé () sur un constructeur ne peut que bugger si un objet du même nom que le type a déjà été créé (enfin j'espère avoir bien compris ).