Middle line from vertices
by Raul Bojalil
HTML
<canvas width="600" height="600"></canvas>
JavaScript
// \
var vertices = [
{ x: 4, y: 21 },
{ x: 125, y: 58 },
{ x: 12, y: 4 },
{ x: 117, y: 74 }
];
// /
var vertices2 = [
{ x: 60, y: 54 },
{ x: 63, y: 71 },
{ x: 4, y: 108 },
{ x: 6, y: 124 }
];
// -
var vertices3 = [
{ x: 120, y: 20 },
{ x: 120, y: 20 },
{ x: 300, y: 20 },
{ x: 120, y: 40 },
{ x: 300, y: 40 },
{ x: 120, y: 20 },
];
// |
var vertices4 = [
{ x: 84, y: 4 },
{ x: 100, y: 4 },
{ x: 84, y: 200 },
{ x: 100, y: 200 },
];
var getMaxMinVertices = (vertices) => {
var maxMins = {
minX: { x: 99999999, y: 99999999 }, //TL
maxX: { x: -99999999, y: -99999999 }, //BR
minY: { x: 99999999, y: 99999999 }, //TR
maxY: { x: -99999999, y: -99999999 } //BL
};
for(var i=0; i < vertices.length; i++) {
var currentPoint = vertices[i];
maxMins.minX = currentPoint.x < maxMins.minX.x
|| (currentPoint.x <= maxMins.minX.x && (currentPoint.y < maxMins.minX.y || currentPoint.x < maxMins.minX.x) )
? { x: currentPoint.x, y: currentPoint.y }
: maxMins.minX;
maxMins.minY = currentPoint.y < maxMins.minY.y
|| (currentPoint.y <= maxMins.minY.y && (currentPoint.y > maxMins.minY.y || currentPoint.x > maxMins.minY.x) )
? { x: currentPoint.x, y: currentPoint.y }
: maxMins.minY;
maxMins.maxX = currentPoint.x > maxMins.maxX.x
|| (currentPoint.x >= maxMins.maxX.x && (currentPoint.y > maxMins.maxX.y || currentPoint.x > maxMins.maxX.x) )
? { x: currentPoint.x, y: currentPoint.y }
: maxMins.maxX;
maxMins.maxY = currentPoint.y > maxMins.maxY.y
|| (currentPoint.y >= maxMins.maxY.y && (currentPoint.y < maxMins.maxY.y || currentPoint.x < maxMins.maxY.x) )
? { x: currentPoint.x, y: currentPoint.y }
: maxMins.maxY;
}
return maxMins;
}
var getMiddlePoint = (p1, p2) => {
var middleX = Math.abs(p2.x - p1.x) / 2;
var middleY = Math.abs(p2.y - p1.y) / 2;
return {
x: p1.x < p2.x ? p1.x + middleX : p2.x + middleX,
y: p1.y < p2.y ? p1.y +...