centers of triangles.

by Richard Morris

HTML

<p>You can click and drag the red points to move things.</p>

<canvas id="canvas" width=500 height=500></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

// Are all triangles equalaterial?

// Global variables 
var    x1 = 185; // first point of triangle
var    y1 = 50;

var    x2 = 108; // second point
var    y2 = 171;

var    x3 = 318; // first point of intersection
var    y3 = 177;

var P1=[-10,-10];
var P2=[-10,-10];
var P3=[-10,-10];
var P4=[-10,-10];
var P5=[-10,-10];
var R;
var R2;

// list of lines created
var lines = new Array();
var angbi = new Array();
var perpbi = new Array();

// calculate the intersections 
function calc() {
  lines.splice(0);
  lines.push(makeLine(x1,y1,x2,y2));
  lines.push(makeLine(x1,y1,x3,y3));
  lines.push(makeLine(x2,y2,x3,y3));
    
  perpbi.splice(0);
  l1 = perpBisect(x1,y1,x2,y2);
  perpbi.push(l1);
  l2 = perpBisect(x1,y1,x3,y3);
  perpbi.push(l2);
  l3 = perpBisect(x2,y2,x3,y3);
  perpbi.push(l3);
  
  P4 = l1.intersect(l2);
  dx = P4[0] - x1;
  dy = P4[1] - y1;
  R = Math.sqrt(dx*dx+dy*dy);
  console.log("R",R);

  angbi.splice(0);
  angbi.push(angleBisect(x1,y1,x2,y2,x3,y3));
  angbi.push(angleBisect(x2,y2,x3,y3,x1,y1));
  angbi.push(angleBisect(x3,y3,x1,y1,x2,y2));    
    
  P5 = angbi[0].intersect(angbi[1]);
  R2 = lines[0].dist(P5);
  console.log("r",R2);
}
 
// 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 = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();


// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;


/////////// The line type

// A line defined by  a x + b y + c = 0
function Line(a,b,c) {
    this.a = a;
    this.b = b;
    this.c = c;
}

// given two points create the line
function makeLine(x0,y0,x1,y1) {
    // Line is defined by 
    // (x - x0) * ( y1 - y0) = ( y - y0) * ( x1 - x0)
    // (y1-y0)*x - (x1-x0)* y + x0*(y1-y0)+y0*(x1-x0) = 0
    return new Line(...