CODEWITHSUNDEEP
javascripttrigonometry
Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

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>

Upvotes: 1

Views: 691

Answers (5)

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827366

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:

formula
(source: krellinst.org)

Upvotes: 2

Chip Uni
Chip Uni

Reputation: 7504

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.

Upvotes: 0

John Feminella
John Feminella

Reputation: 311526

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"
// ...

Upvotes: 4

kennytm
kennytm

Reputation: 523284

You need to convert the angle from degrees to radians first.

 function moveDots(){
     var rad_angle = angle * Math.PI / 180;
     ...
     ... Math.cos(rad_angle) ...
 }

Upvotes: 3

easeout
easeout

Reputation: 8734

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)

Upvotes: 4

Related Questions