CODEWITHSUNDEEP
javascriptcanvascollision-detection
Gurjit
Gurjit

Reputation: 564

Detecting collision of rectangle with circle

Actually I am trying to detect thee collision of the Rectangle with the circle in the following piece of code:-

function checkCollision() {
     //checking of the Collision
     if (ry + rh > cy - radius && rx + rw > cx - radius && rx + rw < cx + radius ) {
          dy = -dy;
     }
}

This is also the part of my code:-

var rx = 50; //distance from the x-axis of the Rect. 
var ry = 50; //distance from the y-axis of the Rect.
var rw = 80; //width of the Rect
var rh = 30; //Height of the Rect.

// Distance to moved of the Rect.
var dx = 2;
var dy = 2;

// Center of the circle from the x-axis and y-axis.
var cx = 105;
var cy = 135;
var radius = 16;
var cx1 = 6;
var cy1 = 6;

Can anyone help me out here to figure out what is wrong?

Upvotes: 15

Views: 33537

Answers (2)

thatOneGuy
thatOneGuy

Reputation: 10642

I found I came across problems with the selected answer. Here's mine that, I think works well:

function collisionCheckCircleRect(circle, rect)
{
    var distx = Math.abs(circle.x - rect.x);
    var disty = Math.abs(circle.y - rect.y);

    if (distx > (rect.width/2 + circle.radius)) { return false; }
    if (disty > (rect.height/2 + circle.radius)) { return false; }

    if (distx <= (rect.width/2)) { return true; } 
    if (disty <= (rect.height/2)) { return true; }

    var hypot = (distx - rect.width/2)*(distx- rect.width/2) +
                         (disty - rect.height/2)*(disty - rect.height/2);

//console.log(hypot <= (circle.radius*circle.radius))
    return (hypot <= (circle.radius*circle.radius));
}

Upvotes: 2

markE
markE

Reputation: 105035

Detecting circle-rect collisions is not trivial (but not that complicated either).

@kuroi neko's solution is correct and about as simple as the code is going to get.

Luckily, you don't need to fully understand the math theory to use the hit-test function.

If you do want more details about how the function works, here is a description using 4 steps to test if a circle and a rectangle are colliding:

Demo: http://jsfiddle.net/m1erickson/n6U8D/

First, define a circle and a rectangle

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

Step#1: Find the vertical & horizontal (distX/distY) distances between the circle’s center and the rectangle’s center

    var distX = Math.abs(circle.x - rect.x-rect.w/2);
    var distY = Math.abs(circle.y - rect.y-rect.h/2);

Step#2: If the distance is greater than halfCircle + halfRect, then they are too far apart to be colliding

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

Step#3: If the distance is less than halfRect then they are definitely colliding

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

Step#4: Test for collision at rect corner.

  • Think of a line from the rect center to any rect corner
  • Now extend that line by the radius of the circle
  • If the circle’s center is on that line they are colliding at exactly that rect corner

Using Pythagoras formula to compare the distance between circle and rect centers.

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

Heres the full code:

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));
}

Upvotes: 56

Related Questions