Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    43
    Thanks
    15
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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
    Attached Files Attached Files
    Last edited by vwphillips; 01-02-2014 at 01:10 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •