Remove excess points from polygon sides in JavaScript / D3 - polygon

Question

There is a random polygon where each side could have a random number of collinear points and, eventually, some of them lie between its ends and could be removed.
In other words, I need a function which go through polygon points and check if point lie within existing side it would be eliminated, so you would get
const output = [
{ x: 252, y: 475 },
{ x: 201, y: 303 },
{ x: 306, y: 206 },
{ x: 504, y: 215 },
{ x: 566, y: 292 },
{ x: 631, y: 303 },
{ x: 648, y: 434 },
{ x: 606, y: 535 },
{ x: 476, y: 636 },
{ x: 315, y: 642 },
{ x: 180, y: 546 }
];
from original set of points
const data = [
{ x: 216, y: 510.5 },
{ x: 252, y: 475 },
{ x: 201, y: 303 },
{ x: 306, y: 206 },
{ x: 359.6, y: 208.4 },
{ x: 417.4, y: 211.1 },
{ x: 504, y: 215 },
{ x: 566, y: 292 },
{ x: 598.5, y: 297.5 },
{ x: 631, y: 303 },
{ x: 648, y: 434 },
{ x: 606, y: 535 },
{ x: 577.5, y: 557.1 },
{ x: 553.2, y: 576.1 },
{ x: 521.5, y: 600.7 },
{ x: 476, y: 636 },
{ x: 395.5, y: 639 },
{ x: 315, y: 642 },
{ x: 268.2, y: 608.7 },
{ x: 253.9, y: 598.5 },
{ x: 218, y: 573 },
{ x: 180, y: 546 }
];
const data = [
{ x: 216, y: 510.5 },
{ x: 252, y: 475 },
{ x: 201, y: 303 },
{ x: 306, y: 206 },
{ x: 359.6, y: 208.4 },
{ x: 417.4, y: 211.1 },
{ x: 504, y: 215 },
{ x: 566, y: 292 },
{ x: 598.5, y: 297.5 },
{ x: 631, y: 303 },
{ x: 648, y: 434 },
{ x: 606, y: 535 },
{ x: 577.5, y: 557.1 },
{ x: 553.2, y: 576.1 },
{ x: 521.5, y: 600.7 },
{ x: 476, y: 636 },
{ x: 395.5, y: 639 },
{ x: 315, y: 642 },
{ x: 268.2, y: 608.7 },
{ x: 253.9, y: 598.5 },
{ x: 218, y: 573 },
{ x: 180, y: 546 }
];
const svg = d3.select("#scene"), colors = ["#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00", "#ca6702", "#bb3e03", "#ae2012"];
let paths = svg.append("path")
.attr("class", "debug")
.attr("d", (id_) => generatePathFromPoints(data, true))
.attr("fill", colors[0]);
let dots = svg.selectAll(".circle")
.data(data)
.enter()
.append("g")
.attr("transform", d_ => `translate(${d_.x},${d_.y})`)
dots.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 3);
dots.append("text")
.attr("x", -4)
.attr("y", -4)
.attr("font-family", "arial")
.attr("font-size", 10)
.text((d_, i_) => i_);
function generatePathFromPoints(points_, closed_){
let d = `M${points_[0].x} ${points_[0].y}`;
for(let i = 1; i < points_.length; i++) { d += `L${points_[i].x} ${points_[i].y}`; }
if(closed_) { d += "Z"; }
return d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg id="scene" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet"></svg>

Answer 1

You need to loop through all points and check each side's angle.
A side would be defined by these points:
p1 = data[i];
p2 = data[i+1];
The angles are calculated like so
let angle = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI;
If the angle changes - push it to a new point array.
let dataNew = removeInbetweenPoints(data);
// render original polygon
let newPolyO = [];
data.forEach((p) => {
newPolyO.push(p.x, p.y);
});
polygonOrig.setAttribute("points", newPolyO.join(" "));
// render reduced polygon
let newPoly = [];
dataNew.forEach((p) => {
newPoly.push(p.x, p.y);
});
polygon.setAttribute("points", newPoly.join(" "));
// remove inbetween poly vertices
function removeInbetweenPoints(points) {
let pointsNew = [];
let currentAngle = +getAngle(points[0], points[1]).toFixed(0);
for (i = 0; i < points.length; i++) {
let p1 = points[i];
// p2 gets get first point if last index
let n = points[i + 1] ? i + 1 : 0;
let p2 = points[n];
let angle = +getAngle(p1, p2).toFixed(0);
// angle change - add vertex to reduced point array
if (angle != currentAngle || i == 0) {
pointsNew.push(p1);
// update current angle for next segment checks
currentAngle = angle;
}
// remove start if it intersects with first side
if (i == points.length - 1) {
let pLast = points[points.length - 1];
let pSecond = points[1];
let angle2 = +getAngle(pLast, pSecond).toFixed(0);
pointsNew.shift();
}
}
return pointsNew;
}
// get angle helper
function getAngle(p1, p2) {
let angle = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI;
return angle;
}
svg {
width: 45vw;
border: 1px solid #ccc;
overflow: visible;
margin: 0.5vw;
}
polygon {
marker-start: url(#markerStart);
marker-mid: url(#markerRound);
stroke: transparent;
stroke-width: 0.25%;
}
<svg id="svgOrig" viewBox="175.6 201.6 476.8 444.8">
<polygon id="polygonOrig" points="216 510.5 252 475 201 303 306 206 359.6 208.4 417.4 211.1 504 215 566 292 598.5 297.5 631 303 648 434 606 535 577.5 557.1 553.2 576.1 521.5 600.7 476 636 395.5 639 315 642 268.2 608.7 253.9 598.5 218 573 180 546"></polygon>
</svg>
<svg id="svg" viewBox="175.6 201.6 476.8 444.8">
<polygon id="polygon" fill="green"></polygon>
</svg>
<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
<defs>
<marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="3.5" fill="purple" />
</marker>
<marker id="markerRound" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="3.5" fill="red" />
</marker>
</defs>
</svg>
<script>
const data = [{
x: 216,
y: 510.5
},
{
x: 252,
y: 475
},
{
x: 201,
y: 303
},
{
x: 306,
y: 206
},
{
x: 359.6,
y: 208.4
},
{
x: 417.4,
y: 211.1
},
{
x: 504,
y: 215
},
{
x: 566,
y: 292
},
{
x: 598.5,
y: 297.5
},
{
x: 631,
y: 303
},
{
x: 648,
y: 434
},
{
x: 606,
y: 535
},
{
x: 577.5,
y: 557.1
},
{
x: 553.2,
y: 576.1
},
{
x: 521.5,
y: 600.7
},
{
x: 476,
y: 636
},
{
x: 395.5,
y: 639
},
{
x: 315,
y: 642
},
{
x: 268.2,
y: 608.7
},
{
x: 253.9,
y: 598.5
},
{
x: 218,
y: 573
},
{
x: 180,
y: 546
}
];
</script>