How to consider polygon's corners

Question

I have a canvas code which render polygon shapes. I can drag a figure and move it to another place. I have move event functions which change the color of the nearest polygons and the draggable polygon. The problem is that I don't know how to make them change their color only when I touching a corner of a figure with my draggable figure. I did what I did considering only width and height of a figure so when I drag a figure near the others some of them change their colors when I even don't touch them. So I should somehow consider their corners ... It's just too complicated to me.

There are relatively much code so I did codepen where you can see what I'm talking about.

PS: only javascript's API allowed.

First thing I noticed in your example is that they are all convex shapes. I believe this greatly simplifies the algorithm you will need to use. If you need to handle concave shapes as well, that will change things up. — Luple, Feb 23 '18 at 23:29
^^^ unless you want someone to write the code for you, there are many resources for this all over. Including lots of code for it that will likely need very few adjustments. Try here: https://stackoverflow.com/questions/753140/how-do-i-determine-if-two-convex-polygons-intersect — Luple, Feb 23 '18 at 23:37
@M. Koval, I didn't mean that. I just want to find an algorithm or solution to this "how to consider polygon's corners" problem. — Dennis Braun, Feb 23 '18 at 23:40
I see. Sorry a lot of people ask for people to write the answers for them. I would recommend the link I posted. I have used the separating axis theorem for this before. Neat trick that works well. — Luple, Feb 23 '18 at 23:43
I will tell you that you should use `ctx.isPointInPath(x, y)` to grab your shapes with accuracy. — StackSlave, Feb 23 '18 at 23:48
@Patrick Roberts, I don't know what `bitmap` is, but I should solve this problem using only standart javascript's API. — Dennis Braun, Feb 23 '18 at 23:54

score 2 · Accepted Answer · answered Feb 24 '18 at 01:44

There are many different ways to do hit detection, depending on what you want to detect, how efficiently you want to detect it etc. The link below gives some nice solutions to finding points inside arbitrary polygons by looking at the relationship between the point in question and any y axis intercepts.

http://alienryderflex.com/polygon/

By comparing the given point to the y intercepts, the counts on either side can be used to determine if there is a hit.

This is solved using a function like the one below, providing an array of x and y coordinates of the polygons vertices, as well as the x and y of the test point.

function pointInPolygon(xs, ys, x, y) {

  var j = xs.length - 1
  var oddNodes = false

  for (var i=0; i<xs.length; i++) {
    if ((ys[i] < y && ys[j] >= y ||
         ys[j] < y && ys[i] >= y)
    &&  (xs[i] <= x || xs[j] <= x)) {
      oddNodes ^= (xs[i] + (y - ys[i]) / (ys[j] - ys[i]) * (xs[j] - xs[i]) < x)
    }
    j=i
  }

  return oddNodes
}

I have created a fiddle that shows this in action (clicking on the poly will change its colour).

https://jsfiddle.net/95k3t26q/19/

How to consider polygon's corners

1 Answers1