Not understanding collision detection code

Question

I came across this topic on Stackoverflow about collision detection between a circle and a rectangle.

The original post can be found here @markE: Detecting collision of rectangle with circle

var circle={x:100,y:290,r:10};
var rect={x:100,y:100,w:40,h:100};

// return true if the rectangle and circle are colliding
function RectCircleColliding(circle,rect){
var distX = Math.abs(circle.x - rect.x-rect.w/2);
var distY = Math.abs(circle.y - rect.y-rect.h/2);

if (distX > (rect.w/2 + circle.r)) { return false; }
if (distY > (rect.h/2 + circle.r)) { return false; }

if (distX <= (rect.w/2)) { return true; } 
if (distY <= (rect.h/2)) { return true; }

var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
    return (dx*dx+dy*dy<=(circle.r*circle.r));
}

Can someone please explain the last bit of code to me?

var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
return (dx*dx+dy*dy<=(circle.r*circle.r));

I really don't understand the math behind it.

Maybe someone can post a photo that might help me visualize it? I have attached a photo that I drew while trying to figure it out.

Thank you

Possible duplicate of Detecting collision of rectangle with circle in html5 canvas — Jon
– Jon, Commented Dec 16, 2015 at 22:04
@Jon i tried to leave a comment but it said i need 50 rep points to be able to do that — CheetahBongos
– CheetahBongos, Commented Dec 16, 2015 at 22:10
It's just pythagoras theorem, which gives the distance between two elements (the long side of a triangle). In mathematics it is even defined as the distance (although it is in terms of a metric...). Further more, it's written as dx*dx instead of dx^2 because in some languages it is faster (although in most languages it would be optimized away anyways...) — user228395
– user228395, Commented Dec 16, 2015 at 22:39
@user228395 So does it give the distance from the center of the circle to the nearest corner of the rect. Or is it just the distance from the center of the rect to the corner? Also, why did he square the radius of the circle? thank youu :) — CheetahBongos
– CheetahBongos, Commented Dec 16, 2015 at 22:45

user228395 · Accepted Answer · 2015-12-21 13:43:39Z

3

Ok. So dx is just the "horizontal" distance of the rectangle edge to the circle center. The same for dy: it is the length from the vertical edge of the rectangle to the circle center.

Now according to Pythagoras, if you want the length to the corner of the rectangle (from the circle center), you take the square root of dx^2 + dy^2.

Now you want to know if the corner "sticks" into the circle.

For this the square root of dx^2+dy^2 has to be smaller than (or equal to) the radius of the circle. Thus: sqrt(dx^2 + dy^2) <= circle.r.

Square both sides of the equation to obtain dx^2 + dy^2 <= circle.r^2.

edited Dec 21, 2015 at 13:43

answered Dec 16, 2015 at 23:01

user228395

1,1861 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not understanding collision detection code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related