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
71
72
|
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);
rotateObject(objRotator[i],centerX,centerY,objPosition*i,distance);
}
}
function rotateObject(obj,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);
setTimeout(function(){rotateObject(obj,centerX,centerY,(currentDegreeAngle+0.10),distance)},40);
} |
