I am trying to utilize the example cited here: http://www.physicsforums.com/showthread.php?t=248191
I wrote a simple javascript that takes advantage of this example (or at least I intended it to), however, I'm totally bewildered by how it reacts to what I set as the angle. I'm EXPECTING it to behave where (assuming we use polar coordinates), if I use 0 as my angle, the spot should be on the East side of the circle, 90 on the South, 180 on the west. However, this is not at all how it's working. I can't even begin to explain what it's doing. It seems to go around the circle between 0 and 4.7 or so. It is of course possible (likely even) that I've totally botched this up and am missing something really obvious.
Anyway... my code is beneath in its entirety. to run it just cut and paste into a new .html doc. I'm really curious what I'm doing wrong.
<HTML>
<script>
startMotion = function(){
setInterval("moveDots()", 1000);
}
function moveDots(){
oDot = document.getElementById("oDot");
iDot = document.getElementById("iDot");
tDisplay = document.getElementById("tDisplay");
oDot.style.left = (t1Radius*(Math.cos(angle)) + ccX)+ "px"
oDot.style.top = (t1Radius*(Math.sin(angle)) + ccY)+ "px"
iDot.style.left = (t2Radius*(Math.cos(angle)) + ccX) + "px"
iDot.style.top = (t2Radius*(Math.sin(angle)) + ccY)+ "px"
tDisplay.value = "x=" + iDot.style.left + "\n";
tDisplay.value += "y=" + iDot.style.top + "\n";
tDisplay.value += "angle=" + angle + "\n";
angle += angleSpeed;
angle %= 360;
}
var angleSpeed = 5; //amount of change in angle from animation point to animation point
var ccX = 200; //circle center coordinate X
var ccY = 200; //circle center coordinate Y
var t1Radius = 200; //radius for outside dot
var t2Radius = 100; //radius for inside dot
var angle = 0; //this number will keep changing to move the dots around the circumference
</script>
<style>
body{
text-align:center;
margin:0;
}
#track{
margin: 0 auto;
text-align: left;
position: relative;
width:400px;
height:400px;
background-color:pink;
}
#iDot{
position:absolute;
top:0px;
left:0px;
width:10px;
height:10px;
background-color:green;
}
#oDot{
position:absolute;
top:0px;
left:0px;
width:10px;
height:10px;
background-color:blue;
}
#feedback{
position:absolute;
left:0px;
top:0px;
width:200px;
height:100px;
background-color:black;
}
#tDisplay{
background-color:black;
color:white;
font-size:10px;
font-family:arial, helvetica;
width:300px;
height:100px;
}
#center{
position:absolute;
left:195px;
top:195px;
width:10px;
height:10px;
background-color:white;
}
</style>
<body onLoad="startMotion()">
<div id="feedback">
<textarea id="tDisplay"></textarea>
</div>
<div id="track">
<div id="center"></div>
<div id="iDot"></div>
<div id="oDot"></div>
</div>
</body>
</html>
