# Get angle given center coordinates and a random point on a circle

• 01-02-2014, 06:01 AM
codingrox
Get angle given center coordinates and a random point on a circle
In a circle I have coordinates of center with reference to starting of the document. Also I have coordinates of another point inside the circle also with reference to start of the document. Now using distance formuale I can calculate the hypotenuse of the right angles triangle formed. Using this information can I find the angle thetha formed at the circle center.
• 01-02-2014, 12:58 PM
vwphillips
see the function degree in this code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title></title>
<style type="text/css">
/*<![CDATA[*/
.reddot {
position:absolute;width:2px;height:2px;background-Color:red;
}

/*]]>*/

<body>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/
// Mouse Degrees. (26-December-2013)
// by Vic Phillips

var zxcMouseDegrees={

init:function(o){
var c=this.coords(o.coords);
o.c=this.ellipse(c,o.testclass);
o.x=c[0]-c[2];
o.rx=c[2];
o.y=c[1]-c[3];
o.ry=c[3];
},

move:function(e,o){
var xy=this.mse(e),x=Math.round(xy[0]-o.x),y=Math.round(xy[1]-o.y);
if (o.c[x]&&y>=o.c[x][0]&&y<=o.c[x][1]){
o.degrees(this.degree(o,x,y));
}
},

degree:function(o,x,y){
document.Show.Show1.value=x; // the mouse position x - (the ellipse center - x radius)
document.Show.Show2.value=y; // the mouse position y - (the ellipse center - y radius)
// o.rx = the x radius
// o.ry = the y radius
var a=x-o.rx+0.0001,b=y-o.ry,c=Math.sqrt(a*a+b*b-(2*a*b*Math.cos(90*Math.PI/180)));
return Math.abs((y>o.ry?0:360)-Math.acos((a*a+c*c-b*b)/(2*a*c))*180/Math.PI);
},

mse:function(e){
var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
},

coords:function(c){
var a=typeof(c)=='string'?c.split(','):c,d=[0,0,50],z0=0;
for (;z0<4;z0++){
a[z0]=Math.round(isFinite(a[z0]*1)?a[z0]*1:d[z0]);
}
a[3]=a[3]||a[2];
return a;
},

ellipse:function(a,cls){
var ca=this.circum(a[0],a[1],a[2],a[3]),d,n,x=[],c=[],z0=1,z1=0,z1a;
for (;z0<ca.length;z0++){
if (cls){  // draw ellipse for testing purposes
d=document.createElement('DIV')
d.className=cls;
d.style.left=a[0]-a[2]+ca[z0][0]+'px';
d.style.top=a[1]-a[3]+ca[z0][1]+'px';
document.body.appendChild(d);
}
n=ca[z0][0];
x[n]=x[n]||[]; // create an array for each x of y coords
x[n].push(ca[z0][1]);
}
for (;z1<x.length;z1++){  // conver x array to min an max y coords
c[z1]=[5000,-1000];
for (z1a=0;z1a<x[z1].length;z1a++){
c[z1]=[Math.min(x[z1][z1a],c[z1][0]),Math.max(x[z1][z1a],c[z1][1])]
}
}
return c;
},

var pi=Math.PI/180,xy=[],ca=[],z0=0,z1=1;
for (;z0<362;z0++){        // an array of basic xy coordinates
}
for (;z1<xy.length;z1++){  // add the coords for each missing x coordinate
ca=ca.concat(this.line([xy[z1-1],xy[z1]]));
}
return ca;
},

line:function(sf){  // produces a line array from a start finish dimentioned array.
var sf=sf.sort(function(a,b){ return a[0]-b[0]; }),s=sf[0],f=sf[1],w=f[0]-s[0],h=f[1]-s[1],hyp=Math.sqrt(w*w+h*h);
for (var ary=[],z0=0;z0<hyp;z0++){
ary[z0]=[Math.round(s[0]+w*z0/hyp),Math.round(s[1]+h*z0/hyp)];
}
return ary;
},

var oop=this;
}

}

zxcMouseDegrees.init({
coords:[660,260,150,100],  // the ellipse coordinates.                              (array)
// field 0 = the left position of the ellipse center. (number, default = 0)
// field 1 = the top position of the ellipse center.  (number, default = 0)
// field 2 = the radius of the ellipse.              (number, default = 0)
// field 3 = the Y radius of the ellipse.            (number, default = field 2)
degrees:function(d){      // function to return the mouse degrees over the ellipse. (function)
var a=(Math.round(d+90))%360;
if (a>10&&a<50){
document.Show.Show0.value='segment 1';
}
else if (a>50&&a<150){
document.Show.Show0.value='segment 2';
}
else if (a>150&&a<250){
document.Show.Show0.value='segment 3';
}
else if (a>250&&a<310){
document.Show.Show0.value='segment 4';
}
else{
document.Show.Show0.value='segment 5';
}
},
testclass:'reddot'        //(optional) the class name to draw the ellipse.          (string, default = no draw)
})

/*]]>*/
</script>
</body>

</html>

and the attachment Triangles.zip

or http://www.vicsjavascripts.org/Triangles/Triangles1.htm