polygon edge handling and detection in canvas

Question

I'm trying to detect polygons on a canvas. I'm using code from this stack overflow question https://stackoverflow.com/a/15308571/3885989

function Vec2(x, y) {
    return [x, y]
}
Vec2.nsub = function (v1, v2) {
    return Vec2(v1[0] - v2[0], v1[1] - v2[1])
}
// aka the "scalar cross product"
Vec2.perpdot = function (v1, v2) {
    return v1[0] * v2[1] - v1[1] * v2[0]
}
// Determine if a point is inside a polygon.
//
// point     - A Vec2 (2-element Array).
// polyVerts - Array of Vec2's (2-element Arrays). The vertices that make
//             up the polygon, in clockwise order around the polygon.
//
function coordsAreInside(point, polyVerts) {
    var i, len, v1, v2, edge, x
    // First translate the polygon so that `point` is the origin. Then, for each
    // edge, get the angle between two vectors: 1) the edge vector and 2) the
    // vector of the first vertex of the edge. If all of the angles are the same
    // sign (which is negative since they will be counter-clockwise) then the
    // point is inside the polygon; otherwise, the point is outside.
    for (i = 0, len = polyVerts.length; i < len; i++) {
        v1 = Vec2.nsub(polyVerts[i], point)
        v2 = Vec2.nsub(polyVerts[i + 1 > len - 1 ? 0 : i + 1], point)
        edge = Vec2.nsub(v1, v2)
        // Note that we could also do this by using the normal + dot product
        x = Vec2.perpdot(edge, v1)
        // If the point lies directly on an edge then count it as in the polygon
        if (x < 0) {
            return false
        }
    }
    return true
}

It's working OK, but with more complex shapes, it doesn't work that well... Here's a link to the isolated code with an example of one shape that works and one that doesn't: http://jsfiddle.net/snqF7/

score 2 · Answer 1 · answered Jul 29 '14 at 10:46

The algorithm you are using require the polygon to be convex.
Convex mean, in a nutshell, that you can draw a line in between any two points in the polygon, all the line will be inside the polygon.
- More or less a potato or a square :) -.

Solution is either to split your polygons in convex parts or to go for a more complex algorithm that handles non-convex polygons.

To handle non convex polygons, idea is to take a reference point you know is (or isn't) in the polygon, then draw a line between your tested point and this reference point, then count how many times and in which direction it intersect with the polygon segments. Count +1 or -1 on each cross, and the point is inside if final sum is null.

Thanks for the explanation! This is my first question to stackoverflow. I really appreciate the help! — jon.s, Jul 29 '14 at 16:24

score 2 · Accepted Answer · edited May 23 '17 at 10:27

ah! like GameAlchemist said, the issue is that this algorithm is meant for convex polygons, here's a new && improved algorithm which works with non-convex ( or complex ) polygons ( not perfect ) which I translated from these C code examples ( http://alienryderflex.com/polygon/ )

function pointInPolygon(point, polyVerts) {
    var j = polyVerts.length - 1,
        oddNodes = false,
        polyY = [], polyX = [],
        x = point[0],
        y = point[1];

    for (var s = 0; s < polyVerts.length; s++) {
        polyX.push(polyVerts[s][0]);
        polyY.push(polyVerts[s][1]);
    };
    for (var i = 0; i < polyVerts.length; i++) {
        if ((polyY[i]< y && polyY[j]>=y
        ||   polyY[j]< y && polyY[i]>=y)
        &&  (polyX[i]<=x || polyX[j]<=x)) {
          oddNodes^=(polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x); 
        }
        j=i;
    }

    return oddNodes;

}

and here's a working fiddle: http://jsfiddle.net/snqF7/3/

polygon edge handling and detection in canvas

2 Answers2