How to Calculate Collision of rotated Rectangle

Question

I try to calculate the collision of the edges of an rotated Rectangle.

Here is an example on jsFiddle : http://jsfiddle.net/XgHxx/

Something like this:

if( mask.x < img.x * rotate_Factor ) mask.x = img.x * rotate_Factor ;

As you see my Collision is only for the not rotated Image. And i want the Rectangle to be inside of the image even when its rotated.

Thanks, Mottenmann.

ps.: I made an example of how i think it could be calculated : RotatedImgColl

possible duplicate of [How to check intersection between 2 rotated rectangles?](http://stackoverflow.com/questions/10962379/how-to-check-intersection-between-2-rotated-rectangles) — Gajus, Aug 19 '15 at 18:17
I hope my live [answer](https://stackoverflow.com/a/41513341/2401386) helps as well. — Blauharley, Dec 19 '17 at 18:17

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

It looks like it already has been answered: see this question How to check intersection between 2 rotated rectangles?, there's also an answer that provides a JS implementation.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 16 '13 at 10:13

Charles François Rey

52
1
4

this doesnt help me much since its about polygons where the coordinates of the edges are set. – Mottenmann Apr 16 '13 at 11:44
Rectangles are convex polygons, so it should apply, don't you agree ? Now, the remaining problem is to find the coordinates of the rotated rectangle (the image). – Charles François Rey Apr 16 '13 at 13:49
indeed, thats my main problem to find them :) – Mottenmann Apr 16 '13 at 14:42
1

OK then ... rotating the rectangle clockwise, the new coordinates of the corners should be something like x' = x*cos(alpha) + y*sin(alpha) and y' = x*sin(alpha) - y*cos(alpha). – Charles François Rey Apr 16 '13 at 15:46

score 0 · Answer 2 · answered Apr 16 '13 at 09:52

0

Thinking from my weak mathematical mind, you can check that by finding out if any of the corner points of the mask is contained by the boundary lines of your image.

You can do that by calculating the line equations of your image (based on its position), then check to see if any of the corner points of the mask lie on any of the boundaries and then stop the movement of the box in that direction in which the corner point is hitting the boundary.

Just a couple of mathematical formulas.

There is probably a better way to do this in jquery but you don't need any library for the above solution :)

answered Apr 16 '13 at 09:52

Undefined

31
1
7

Yes i thought it would work that way too. But i dont know how to get the coordinates of each edge. – Mottenmann Apr 16 '13 at 11:41
Maybe I am missing something but can't you just get the coordinates of the image/mask by getting the top and left points of the image/mask? once you have the coordinates of all the four corners then you can easily compute the equation of the boundaries. – Undefined Apr 16 '13 at 13:54
it should be able but even the size of the image doesn't change. it should be as wide as its height was etc. when its on 90° but it is still the same size as before :/ – Mottenmann Apr 16 '13 at 14:42
As for the size issue that is happening because of the "height:auto" attribute for img tags. Just set both the height and width in css and then the browser won't try to maintain the aspect ratio of the image. As for getting the coordinates I did "$('#elementid').css('top')" and was able to get them. Though i like the solution pointed out by "Charles François Rey". That's more robust and generic. – Undefined Apr 16 '13 at 15:14
Thank you both for helping me out and yes his solution is pretty nice. I try to add it to my script and i hope i get it working. :) – Mottenmann Apr 16 '13 at 15:49

How to Calculate Collision of rotated Rectangle

2 Answers2