Collision detection of irregular shapes

Question

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.

Answer 1

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.

Answer 2

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.