Are there any function that can detect collisions between 2 rotated rectangles in javascript with this kind of information:

r1 = {x:0,y:0,w:2,h:2,transformX:5,transformY:Y,rot:30}
r2 = {x:1,y:1,w:2,h:2,transformX:5,transformY:Y,rot:30}
//rot is degrees
function rectColliding(rect1,rect2){

  • 1
    \$\begingroup\$ Google "2D OBB Intersection". OBB is Oriented Bounding Box which is an arbitrarily rotated rectangle. \$\endgroup\$ – user2927848 May 16 '19 at 20:21
  • \$\begingroup\$ I get x, y, w, and h, but what does transformX and transformY mean? \$\endgroup\$ – mackycheese21 May 16 '19 at 22:00
  • \$\begingroup\$ @mackycheese21 The origin of rotation. I'm using Javascript Transform and rotate, dont forget. \$\endgroup\$ – Noah Gerard May 17 '19 at 10:27
  • \$\begingroup\$ @user2927848 I've seen that before, and I would very much liek to try it, but I dont know how to gte the vertecies of a roated angle. \$\endgroup\$ – Noah Gerard May 17 '19 at 10:34
  • \$\begingroup\$ Then search/ask how to get the vertices after rotating by that angle. This is just highschool math, not an insurmountable barrier. \$\endgroup\$ – DMGregory Jun 16 '19 at 13:38

Since you get no answers I will try to help. I am not super proficient in math etc, but your best approach would be to check if one or more of the vertices of one of the rectangles are inside the other rectangle BUT not all of them obviously.

So you will have to map your rects vertices taking the angle in to consideration... and then use a raycast/raytrace algorithm to determine if the vertices are inside other rect.

I hope this overview will get you started: https://en.m.wikipedia.org/wiki/Ray_casting

  • \$\begingroup\$ The only issue I have with this is I'm not proficient in Javascript. I don't know how to implement that. I don't know how to get the vertecies either. \$\endgroup\$ – Noah Gerard May 17 '19 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.