Circle circle intersection

by Richard Morris

HTML

<p>Finds the intersection of two circles. Click and drag either of the points, enter the radii in the text boxes.</p>

<table border="0">
<tr>
    <td> 
       <label for="amount">r1:</label>
    <input type="text" id="r1disp" size="5" value="100" readonly />
    </td>
    <td> <div id="r1"></div>
    </td>
</tr>
  <tr>
    <td> 
      <label for="amount">r2:</label>
      <input type="text" id="r2disp" size="5" value="50" readonly />
    </td>
    <td><div id="r2"></div></td>
  </tr>
</table>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}
#r1disp, #r2disp { font: inherit; border:0;  background-color: ivory; }
#r1, #r2 {  font-size: 8px; width: 200px; }

JavaScript

// Find the points of intersection of two circles

// Global variables 
var    x1 = 100; // center of first circle
var    y1 = 150;
var    d1 = 100; // radius

var    x2 = 230; // center of second circle
var    y2 = 150;
var    d2 = 50;  // radius

var    x3 = -10; // first point of intersection
var    y3 = -10;
var    x4 = -10; // second point of intersection
var    y4 = -10;

// calculate the intersections 
function calc() {
    if(d1 < 0 || d2 < 0) return;
    var a = d2;
    var b = d1;
    var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    var d = (b*b+c*c-a*a)/(2*c);
    var h = Math.sqrt(b*b-d*d);
    console.log(a,b,c,d,h);
    x3 = (x2-x1)*d/c + (y2-y1)*h/c +  x1;
    y3 = (y2-y1)*d/c - (x2-x1)*h/c +  y1;
    x4 = (x2-x1)*d/c - (y2-y1)*h/c +  x1;
    y4 = (y2-y1)*d/c + (x2-x1)*h/c +  y1;
}

// first method using trig
function calctrig() {
    if(d1 < 0 || d2 < 0) return;
    var a = d2;
    var b = d1;
    var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    var A = Math.acos((b*b+c*c-a*a)/(2*b*c));
    var theta = Math.atan2(y2-y1,x2-x1);
    console.log(a,b,c,A,theta);
    var phi1 = theta+A;
    var phi2 = theta-A;
    x3 = d1 * Math.cos(phi1) + x1;
    y3 = d1 * Math.sin(phi1) + y1;

    x4 = d1 * Math.cos(phi2) + x1;
    y4 = d1 * Math.sin(phi2) + y1; 
}


    $( "#r1" ).slider( {
      min: 0, max: 300, value: 100,
      slide: function( event, ui ) {
        $( "#r1disp" ).val( ui.value );
        d1 = ui.value;
          calc(); draw();
      }
    });


    $( "#r2" ).slider({
      min: 0, max: 300, value: 50,
      slide: function( event, ui ) {
        $( "#r2disp" ).val( ui.value );
        d2 = ui.value;
          calc(); draw();
      }
    });
 
// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX =...