JSFiddle - React, Tailwind, and code Playground
HTML
<div id="inputs" style="position:absolute;">
<div>
1 point:
<input type="text" disabled />
<input type="text" disabled />
</div>
<div>
2 point:
<input type="text" disabled />
<input type="text" disabled />
</div>
<div>
3 point:
<input type="text" disabled />
<input type="text" disabled />
</div>
<div>
4 point:
<input type="text" disabled />
<input type="text" disabled />
</div>
<div>
5 point:
<input type="text" disabled />
<input type="text" disabled />
</div>
<br />
<div id="info-x"></div>
<div id="info-y"></div>
<div id="info-r1"></div>
<div id="info-r2"></div>
<div id="info-rotation"></div>
<br / >
<div id="info-ca"></div>
<div id="info-cb"></div>
<div id="info-cc"></div>
<div id="info-cd"></div>
<div id="info-ce"></div>
<div id="info-cf"></div>
</div>
<canvas id="canvas" style="width:100%;height:100%;"></canvas>
CSS
body,
html {
width: 100%;
height: 100%;
}
input {
width: 40px;
}
JavaScript
var offset = 400;
var Points = [
[offset + 200, offset + 100], // x, y
[offset + 100, offset + 100],
[offset + -200, offset + -200],
[offset + -100, offset + -200],
[offset + 100, offset + -100]
];
// You can remove the comment is for visualization. In this case, all is well
/*
var Points = [
[280, 260],
[315, 330],
[520, 285],
[360, 165],
[405, 180]
];
*/
// START! :)
Main = function() {
// get coefficients
var conic = MyMath.getConicEquationFromFivePoints(Points);
// **************************************************
var A = conic[0];
var B = conic[1];
var C = conic[2];
var D = conic[3];
var E = conic[4];
var F = conic[5];
// the center is located at
var xc = (B * E - 2 * C * D) / (4 * A * C - Math.pow(B, 2));
var yc = (B * D - 2 * A * E) / (4 * A * C - Math.pow(B, 2));
var Fs = F + ((D * (B * E - C * D) - A * Math.pow(E,2)) / (4 * A * C - Math.pow(B,2)));
// The polar distance at angle θ is found by rotation of the axes. The major and minor axes are
var R1 = Math.sqrt((-2 * Fs) / (A + C - Math.sqrt(Math.pow(B,2) + Math.pow((A - C),2))));
var R2 = Math.sqrt((-2 * Fs) / (A + C + Math.sqrt(Math.pow(B,2) + Math.pow((A - C),2))));
// The rotation angle is then found by
//var Rotation = 1/2 * Math.atan(B/(A-C)); // Old
// It's WORK!)))))) :)
var Rotation = Math.atan(((C-A)/B) + (Math.sqrt( Math.pow(A-C, 2) + Math.pow(B,2) ) / B));
var Deg = Rotation * (180/Math.PI);
// **************************************************
// draw ellipse
Canvas.ellipse(xc, yc, R2, R1, Rotation, 'rgba(0, 255, 0, 0.4)');
// draw center point
Canvas.arc(xc, yc, 2);
// draw info
$('#info-x').text('X center: ' + xc.toFixed(4));
$('#info-y').text('Y center: ' + yc.toFixed(4));
$('#info-r1').text('Minor axes: ' + R1.toFixed(4));
$('#info-r2').text('Major axes: ' + R2.toFixed(4));
$('#info-rotation').text('Rotation: ' + Rotation.toFixed(4) + ' (' + Deg.toFixed(2) + '°)');
...