Intersection of two circles

Plain JavaScript source code

Introduction

Fig.1: Drag the green dots to move the circles.

Used JavaScript library: JSXGraph.

Two circles and geometrical denotations.
Fig.2.

Given (see figure 1 and figure 2): M 1 = x 1 y 1 , M 2 = x 2 y 2 , r 1 and r 2 .

From Pythagoras:

d = x 2 x 1 2 + y 2 y 1 2

  • If d > r 1 + r 2 , then no solutions; one circle completely outside the other.
  • If d < r 1 r 2 , then no solutions; one circle completely inside the other.
  • If d = 0 and r 1 = r 2 , then infinite number of solutions; circles are coincident.

Pythagoras again:

1 M 1 M P : a 2 + h 2 = r 1 2 M 2 M P : b 2 + h 2 = r 2 2

Subtract both equations:

a 2 b 2 = r 1 2 r 2 2 a 2 d a 2 = r 1 2 r 2 2 a 2 d 2 + 2 d a a 2 = r 1 2 r 2 2 d 2 + 2 d a = r 1 2 r 2 2

Hence:

a = r 1 2 r 2 2 + d 2 2 d

How much is a when the two circles touch at one point, i.e. d = r 1 + r 2 ?

Then substituting a in [1] yields:

h = r 1 2 a 2

Two circles and geometrical denotations.
Fig.3.

Similar triangles in figure 3:

W M 1 M 2 U M P :

x m x p y 2 y 1 = h d Or for the other intersection point (not visible in figure 3): x p x m y 2 y 1 = h d

Hence:

x p = x m ± h d y 2 y 1

W M 1 M 2 V M 1 M :

x m x 1 a = x 2 x 1 d x m = a d x 2 x 1 + x 1

And substituting x m in the previous equation for x p results in:

x p = a d x 2 x 1 + x 1 ± h d y 2 y 1

And similar for the y-coordinates:

y p = a d y 2 y 1 + y 1 h d x 2 x 1

So, this yields two xy-coordinates x p y p , one for each intersection point. If both circles touch in one point (h = 0), then x p y p 1 = x p y p 2 .