Bonjour,

Je viens de faire un script parfaitement inutile mais joli (au niveau du visuel, pas du code). Je suis en train de l'optimiser un maximum et j'ai déjà diviser la charge CPU par 4 ce qui n'est déjà pas mal... Mais... Et bien oui il y a un mais sinon il n'y aurait pas de problème ;-)
Il me reste quelque chose que je sais consommer du temps inutilement mais je n'arrive pas à trouver de solution... Tout d'abord, un peu de code :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
var radConstant = Math.PI / 180;
var degConstant = 180 / Math.PI;
 
function decHex(number) {
	if (number < 16){
		return '0'+number.toString(16);
	}
	else{
		return number.toString(16);
	}
}
 
function hexDec(number) {
	return parseInt(number,16);
}
 
function rad(degree){
	return degree * radConstant;
}
 
function deg(radian){
	return radian * degConstant;
}
 
function createEDiagContainer(containerName){
	var stdDiv = document.createElement('div');
	stdDiv.className = 'absoluteDiv';
	stdDiv.id = containerName;
	document.body.appendChild(stdDiv);
	return stdDiv;
}
 
function multipleRotate(centerX,centerY,rotatorNumber,width,namePrefix,distance){
	var objRotator = [];
	var objPosition = rad(width/rotatorNumber);
	for(var i=0;i<rotatorNumber;i++){
		objRotator.push(createEDiagContainer(namePrefix+'_'+i));
		objRotator[i].innerHTML = i;
		rotateObject(objRotator[i].id,centerX,centerY,objPosition*i,distance);
	}
}
 
function rotateObject(objId,centerX,centerY,currentDegreeAngle,distance){
	var sinusAngle = Math.sin(currentDegreeAngle);
	var obj = document.getElementById(objId); // To Be improved...
	var factor = 15;
	var zoomModifier = sinusAngle * factor;
	var dimensionXY = Math.round(20 + zoomModifier);
	var colorLevel = Math.round(127 + (127 / factor * zoomModifier));
	var alphaLevel = decHex(colorLevel);
	var invertedAplhaLevel = decHex(255-colorLevel);
 
	obj.style.left = Math.round(centerX + distance*Math.cos(currentDegreeAngle))+'px';
	obj.style.top = Math.round(centerY + distance*sinusAngle - (zoomModifier*4))+'px';
	obj.style.height = dimensionXY+'px';
	obj.style.width = dimensionXY+'px';
	obj.style.fontSize = (dimensionXY/2)+'px';
	obj.style.backgroundColor = '#'+alphaLevel+alphaLevel+alphaLevel;
	obj.style.zIndex = Math.round(1000 + zoomModifier);
	obj.style.borderStyle = 'solid';
	obj.style.borderWidth = '1px';
	obj.style.borderColor = '#'+invertedAplhaLevel+invertedAplhaLevel+invertedAplhaLevel;
 
	if(deg(currentDegreeAngle) > 360){
		currentDegreeAngle = rad(deg(currentDegreeAngle) - 360);
	}
 
	setTimeout(function(){rotateObject(objId,centerX,centerY,(currentDegreeAngle+0.10),distance)},40);
}
Attention je fait usage d'une classe CSS 'absoluteDiv' qui se trouve dans une feuille de style que vous n'avez pas, mais qui en gros ne fait que définir l'attribut 'position' à 'absolute'...

Le lancement de l'ensemble se fait via la commande suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
multipleRotate(500,500,16,270,'rotatora',100);
  • Les deux premiers paramètres sont la position x,y du centre de rotation.
  • Le troisième c'est le nombre d'éléments.
  • Le quatrième c'est la portion de l'ellipse sur laquelle seront répartis les éléments. (360 = tout le cercle, 270 = 3/4, etc)
  • Le cinquième, c'est le préfixe du nom des 'div' qui seront créée
  • Le sixième, c'est le diamètre de l'ellipse



Voilà le décor est posé...

Mon but serait maintenant pouvoir passer directement l'objet "objRotator[i]" dans la fonction exécutée par setTimeout() au lieu de l'horrible getElementById()... Et c'est là que çà coince à cause du "scope" de la fonction évaluée par setTimeout()...
La première solution que j'ai trouvée mais qui ne me plait pas serait de déclarer mon array d'objets (objRotator) comme variable globale et de ne passer que l'index (i) à la fonction setTimeout()...
Mais mon but serait de pouvoir vraiment passer directement l'objet d'une autre manière.

Quelqu'un a-t-il une autre solution ?

Merci d'avance !