Following up from my last post on how to draw the altitude of a side of a triangle through a vertex, I wanted to draw the 3 perpendicular bisectors of a triangle and the circumcircle of the triangle.
Let us get some definitions for these terms, the perpendicular bisectors of a circle are described as:
the lines passing through the midpoint of each side of which are perpendicular to the given side.
Below is a triangle with one perpendicular bisector running through side AB
.
The circumcircle of a triangle is:
The point of concurrency of the 3 perpendicular bisectors of each side of the triangle.
The centre point of the circumcircle is the point of intersection of all the perpendicular bisectors of a triangle.
Below is a triangle with all 3 perpendicular bisectors and the circumcircle drawn with d3.js
.
The first step was to draw one perpendicular bisector of a triangle.
I chose 3 arbitary points for the vertices of the triangle.
1 2 3 4 5 

This is all the information I need, to calculate the perpendicular bisectors and the circumcircle.
If I wanted to find the perpendicular bisector of AB
using pen and paper, I would perform the following steps:
 I would find the gradient or slope (for US readers) of the point
AB
.  I would then find the perpendicular gradient or slope which would give me the ratio of rise over run that the perpendicular line flows through. If lines are perpendicular then M_{1} x M_{2} = 1.
 I would find the midpoint of the line using the distance formula ((x_{1} + x_{2} / 2), (y_{1} + y_{2} / 2)).
 I could then plug these values into the equation of a line which takes the form of
y = mx + c
.
I have blogged previously in this post about how to set up the graduated x and y axis and a more managable scale for positioning vertices etc.
My first step was to find the perpendicular bisector of the line AB
.
Below are two helper functions that take javascript point objects as arguments with x and y properties that map to coordinates and return either a gradient/slope or the perpendicular gradient/slope that occurrs between the 2 coordinates:
1 2 3 4 5 6 7 

Below is a helper function to find the midpoint between two vertices or points:
1 2 3 

Using these values, I can then find the yintercept or the point where the perpendicular line will cut the yaxis.
Below is a function that will find the yintercept given a vertex and a gradient/slope:
1 2 3 

You can think of the above function as rearranging y = mx + c
to solve for c
or c = y  mx
.
All that is left is to find the xintercept or the point where the bisector line cuts the xaxis.
Below is the code that brings this all together:
1 2 3 4 5 

The xintercept on line 5
is again rearranging the equation of the line formula y = mx + c
to solve for x.
The finshed function looks like this and there are a number of if statements I had to add for the conditions when the slope or gradient function might end up undefined or equalling infinity when it encounters horizontal or vertical values that have catches with the formula. I would love to know if there is an algorithm that will avoid such checks:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 

The drawTriangleLine
function looks like this and simply adds a d3.js
line:
1 2 3 4 5 6 7 8 9 

Every time I call the perpendicularBisector
function, I return an object that contains a vertex and point that I can use to draw the circumcircle.
1


All that is left is to draw the circumcircle and here is the function I wrote to do just that:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 

In order to find the centre of the circumcirle or the point of intersection of the perpendicular bisectors, the function takes two arguments lineA
and lineB
which are two of the perpendicular bisectors of the traingle. The function then arranges these line objects into y = mx + c
format on lines 6 to 11 of the above. I then solve these equations simulataneously using matrices and specifically using cramer’s rule to find the point where the line intersect.
Once I have the 2x2 matrix assembled on lines 1316, I then pass it to the solveMatrix
function with the 2 yintercept values that will apply cramer’s rule:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 

I now have the point of intersection of the perpendicular bisectors. All I need to know now is the radius of the circle. The calculation I used is to use the distance formula. From the point of intersection we just found to one of the vertices of the triangle.
Below is a helper function for the distance formuala:
1 2 3 

All I have to do now is draw the circle from the two knowns, i.e. the point of intersection and the radius:
1 2 3 4 5 6 7 8 9 10 

Here is a working jsbin that illustrates all I have wrote about.
I have also added drag and drop so you can drag the vertices around by the red circles and watch it all redraw.
Please leave a comment below if I could have achieved this in a more efficient way.