JSFiddle - React, Tailwind, and code Playground
HTML
<p>These are the points:</p>
<ul id='pointlist'></ul>
<p>These points <span id='result'></span> form a square.</p>
JavaScript
$(function () {
var points = [{ x: 4, y: 6 },
{ x: 5, y: 5 },
{ x: 5, y: 6 },
{ x: 4, y: 5 }];
for (var i = 0; i < points.length; i++) {
$('#pointlist').append('<li>(' + points[i].x + ', ' + points[i].y + ')</li>');
}
// Determine if our four points form a square...
var isSquare = false; // Assume not until proven otherwise.
// Condition 1, there are two equal arbitrary distance and one unequal arbitrary distance.
var sides = [];
sides.push(distance(points[0],points[1]));
sides.push(distance(points[0],points[2]));
sides.push(distance(points[0],points[3]));
// Are there two equal sides, and if so, what are they?
var equalSide1 = -1;
var equalSide2 = -1;
var unequalSide = -1;
if (sides[0] == sides[1]) {
if (sides[0] != sides[2]) {
equalSide1 = 0;
equalSide2 = 1;
unequalSide = 2;
}
} else if (sides[1] == sides [2]) {
if (sides[1] != sides[0]) {
equalSide1 = 1;
equalSide2 = 2;
unequalSide = 0;
}
} else if (sides[0] == sides[2]) {
if (sides[0] != sides[1]) {
equalSide1 = 0;
equalSide2 = 2;
unequalSide = 1;
}
}
// If failed to satisfy the first condition, then we're done.
// Otherwise we can check the second condition...
if (equalSide1 != -1)
{
// Condition 2. Since there is one unequal side.
// The opposing corners must also be this same
// distance apart...
var opposing = 0;
switch (unequalSide) {
case 0:
opposing = distance(points[2], points[3]);
break;
case 1:
opposing = distance(points[1], points[3]);
break;
case 2:
opposing = distance(points[1], points[2]);
...