circleByThreePoints
find the circle by three points
by Cibeles Garcia
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas></canvas>
JavaScript
// ******************** HELPS *********************
function dragger(el,onDragIni,onDragMove,onDragStop, centered){
var $el=$(el);
var drag=false;
$el.on('mousedown touchstart',function(event){
event.preventDefault();
event=event.originalEvent.touches?event.originalEvent.touches[0]:event.originalEvent;
var x=event.pageX-(centered?$el.width()/2:0), y=event.pageY-(centered?$el.height()/2:0), pos=$el.offset(), size={width:$el.width(),height:$el.height()},
size_canvas={width:$el[0].width,height:$el[0].height};
drag={
a:x-pos.left, b:y-pos.top,
x:x-pos.left, y:y-pos.left,
_a:(x-pos.left)*size_canvas.width/size.width, _b:(y-pos.top)*size_canvas.height/size.height,
_x:(x-pos.left)*size_canvas.width/size.width, _y:(y-pos.top)*size_canvas.height/size.height
};
onDragIni(drag);
return false;
})
$(document).on('mousemove touchmove',function(event){
if(drag){
event=event.originalEvent.touches?event.originalEvent.touches[0]:event.originalEvent;
var x=event.pageX-(centered?$el.width()/2:0), y=event.pageY-(centered?$el.height()/2:0), pos=$el.offset(), size={width:$el.width(),height:$el.height()},
size_canvas={width:$el[0].width,height:$el[0].height};
drag.x=event.pageX; drag.y=event.pageY;
drag._x=(x-pos.left)*size_canvas.width/size.width; drag._y=(y-pos.top)*size_canvas.height/size.height;
onDragMove(drag);
}
}).on('mouseup touchend',function(event){
if(drag){ drag=false; onDragStop(); }
});
}
// ************ FUCTIONS
var linesColition=function(x1,y1,m1,x2,y2,m2){
var mm=m1-m2,x,y;
if(m1==m2) return false;
if(isNaN(m1*0)){
x=x1;
y=m2*(x-x2)+y2;
}else
if(isNaN(m2*0)){
x=x2;
y=m1*(x-x1)+y1;
}else{
x=( m1*x1 -m2*x2 +y2 -y1 )/mm;
y=( m2*y1 -m1*y2 +m1*m2*(x2 -x1) )/-mm;
}
return [x,y];
};
var getCircleByThreePoints=function(A,B,C){
var x1=(A[0]+B[0])/2, y1=(A[1]+B[1])/2, m1=(A[0]-B[0])/(B[1]-A[1]),
x2=(B[0]+C[0])/2, y2=(B[1]+C[1])/2,...