# 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"> <head>   <title></title> <style type="text/css"> /*<![CDATA[*/ .reddot {   position:absolute;width:2px;height:2px;background-Color:red; } /*]]>*/ </style></head> <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];   this.addevt(document,'mousemove','move',o)  },  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;  },  circum:function(lft,top,radx,rady){  // produces an array of x/y coordinates of an ellipse.   var pi=Math.PI/180,xy=[],ca=[],z0=0,z1=1;   for (;z0<362;z0++){        // an array of basic xy coordinates   xy.push([Math.floor(radx*Math.cos(z0*pi)+radx),Math.floor(rady*Math.sin((z0)*pi)+rady)]);   }   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;  },  addevt:function(o,t,f,p,p1){   var oop=this;   o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;  } } 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