I know how to check if a circle is about to collide with a square, and I know how to detect if a square is about to collide with a square, but how would I go about detecting if a polygon is about to collide with a square?

Or better yet, when a polygon is about to collide with a polygon.

OR better yet, when a shape made up of lines that are not straight collides with another similar shape, a polygon, or a circle/rectangle

Is there any way to get the pixels a shape would take up maybe and the pixels another shape would take up and check if any of them are the same?

I am hoping there is some solution that doesn't require a ton of shape specific calculation.

I am using javascript and html5 canvas to do this.

I know how to check if a circle is about to collide with a square, and I know how to detect if a square is about to collide with a square, but how would I go about detecting if a polygon is about to collide with a square?

Or better yet, when a polygon is about to collide with a polygon.

OR better yet, when a shape made up of lines that are not straight collides with another similar shape, a polygon, or a circle/rectangle

Is there any way to get the pixels a shape would take up maybe and the pixels another shape would take up and check if any of them are the same?

I am hoping there is some solution that doesn't require a ton of shape specific calculation.

I am using javascript and html5 canvas to do this.

• javascript
• jquery
• html
• canvas
• collision-detection

Share Improve this question Follow edited Jul 7, 2012 at 23:18 Max Hudson asked Jul 6, 2012 at 18:47 Max HudsonMax Hudson 10.2k1515 gold badges6161 silver badges110110 bronze badges 2

• possible duplicate of Javascript: Collision detection – jbabey Commented Jul 6, 2012 at 19:02
• 3 @jbabey, I'm not sure this is aduplicate of that question -- here, the OP specifies a polygon-to-polygon requirement, whereas the proposed duplicate seems (implicitly) concerned with only rectangular collisions. I admit it is difficult to judge, though, since the linked question omits the scope of shapes used; I assume they are strictly rectangular because the asker there mentions divs in particular. – apsillers Commented Jul 6, 2012 at 19:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This is not a simple stuff. If you are satisfied that a function can tell if two polygons are colliding (and you can roll back them), then the solution is not so hard. You just need to check if any two of the polygon's sides are crossing each other or not. This can be done by some math, and with big shapes or lot polygons it can eat away the performance. To solve this, you may use space partitioning and bounding volumes.

UPDATE: You can calculate the intersection of lines based on this. Then you need to check if this point is in both segment or not. To do this, you can use the endpoints of the segments, and the ua and ub variables will be between 0-1 if the segment actually contains the point.

The simplest is to use a bounding box, just find the mins and maxs of the object and make a box from that. To do polygon to polygon you need a way to store the edges of the polygon and another method to determine which points or edges have collided with another object. From here you can then determine how to react to the collision.

Bounding boxes are simple to implement, but not very accurate. Using the actual edges of the polygon itself is more accurate but more difficult to handle and is much slower.