having trouble with getting circle coordinates
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>
You need to use radians, not degrees. Multiply by a factor of pi / 180 to convert:
var theta = angle * Math.PI / 180;
oDot.style.left = (t1Radius*(Math.cos(theta)) + ccX)+ "px"
// ...
Math.cos() and its kin expect radians, not degrees. You can convert from degrees to radians by multiplying by π and then dividing by 180. (2π radians = 360 degrees)
You need to convert the angle from degrees to radians first.
function moveDots(){
var rad_angle = angle * Math.PI / 180;
...
... Math.cos(rad_angle) ...
}
The trigonometric functions on JavaScript expect angles in radians, you should convert your degree values to radians before invoking them.
You can do it easily, just multiply the number in degrees by π/180, i.e, a simple function:
function toRad(deg) {
return deg * Math.PI / 180;
}
Because:
(source: krellinst.org)
Kevin's answer is correct, but incomplete. Javascript uses radians, not degrees.
When you measure with degrees, there are 360 degrees in a circle.
When you measure with radians, there are 2*pi radians in a circle.
To convert from degrees to radians, multiply by 2*pi / 360, or approximately 0.017453.
加载中,请稍侯......
精彩评论