How to check if point is in polygon in Javascript

Question

I came across this piece of C code (I think) that's supposed to be a neat way to check if a point is within a concave or convex polygon, and I would like to convert it to a JS equivalent function to use in my JS program:

int pnpoly(int nvert, float *vertx, float *verty, float testx, float testy)
{
  int i, j, c = 0;
  for (i = 0, j = nvert-1; i < nvert; j = i++) {
    if ( ((verty[i]>testy) != (verty[j]>testy)) &&
     (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
       c = !c;
  }
  return c;
}

nvert: Number of vertices in the polygon. Whether to repeat the first vertex at the end.
vertx, verty: Arrays containing the x- and y-coordinates of the polygon's vertices.
testx, testy: X- and y-coordinate of the test point.

Code above taken from this Stack Overflow question.

How would this translate into JS? I've already found out how I can start the for-loop in JS

j = nvert-1
for (i = 0; i < nvert; i++) {
    //The whole if thing
    j = i
}

And I guess that the "float *"s in the first row can just be omitted in JS. But I'm not quite sure what the "int i, j, c = 0;" does or what "!c" means when "c = 0". What's the opposite of 0?

Thanks!

Answer 1

I used your question and the approaches you shared to solve the same problem which I was also having. It works nicely. I share my piece of code in processing for any future queries. Thanks.

// generate a random amount of points
PVector [] points = new PVector[1000];
// the list of points for a drawable edge
ArrayList<PVector> edgePnts = new ArrayList<PVector>();
PVector oldViewer ;
void setup(){
    size(800,400);
    for(int i =0; i< points.length;i++){
        points[i]=new PVector(random(width), random(height));
    }
oldViewer= new PVector(0,0);
}
void draw(){
    background(255);
    noStroke();
    // turning the arraylist of vectors into an array of vectors
    PVector[] polyVerts = edgePnts.toArray(new PVector[edgePnts.size()]);
    for(int i =0; i< points.length;i++){

        if(edgePnts.size()>0){
            if(pnInPoly(edgePnts.size(),polyVerts,points[i])<0){
                fill(0,255,0);
                ellipse(points[i].x,points[i].y, 10,10);
            }else{
                fill(0);
                ellipse(points[i].x,points[i].y, 5,5);
            }
        }else{
            fill(0);
            ellipse(points[i].x,points[i].y, 5,5);
        }
    }
    if(edgePnts.size()>0){
        fill(255,0,0);
        stroke(255,0,0);
        for(int i =0; i< edgePnts.size();i++){
        // for(PVector p : edgePnts){
            ellipse(edgePnts.get(i).x,edgePnts.get(i).y,2,2);
            if(i>0){
                line(edgePnts.get(i).x,edgePnts.get(i).y,edgePnts.get(i-1).x,edgePnts.get(i-1).y);
            }
        }
    }

    if (mousePressed){
    PVector viewer = new PVector(mouseX,mouseY);
        if(oldViewer.dist(viewer)>10){
            edgePnts.add(viewer);
            oldViewer = viewer;
        }
    }   
}

void keyPressed(){
    if(key == 'r' || key == 'R'){
        reset();
    }
}
void reset(){
    edgePnts = new ArrayList<PVector>();
    for(int i =0; i< points.length;i++){
        points[i]=new PVector(random(width), random(height));
    }
}
// the testing function to check if the point in case is inside the polygon
int pnInPoly(int nvert, PVector [] vert, PVector test){
    int i, j;
    int c = 1;
    for (i = 0, j = nvert-1; i < nvert; j = i++) {
        if ( ((vert[i].y>test.y) != (vert[j].y>test.y)) &&
        (test.x < (vert[j].x-vert[i].x) * (test.y-vert[i].y) / (vert[j].y-vert[i].y) + vert[i].x) )
        c = c * (-1);
    }
    return c;
    // if c < 0 means it is inside
}

Answer 2

vertx and verty should be arrays and should have the values there. Initialize them with

vertx = []; verty = [];

Then the function is pretty much the same (assuming it is correct)

function pnpoly(var nvert, var vertx, var verty, var testx, var testy).
{
  var i, j, c = 0;
  for (i = 0, j = nvert-1; i < nvert; j = i++) {
   if ( ((verty[i]>testy) != (verty[j]>testy)) &&
   (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
    c = !c;
}