Question

110

Detecting collision of rectangle with circle

rated 0 times [ 117] [ 7] / answers: 1 / hits: 30974 / 11 Years ago, mon, january 13, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

darennevina questions

1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')

Sun, Jun 5, 22, 00:00, 2 Years ago

1 change the active list when scrolling navbar

Fri, Nov 12, 21, 00:00, 3 Years ago

1 DiscordjsError: Request to use token, but token was unavailable to the client

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to check a checkbox in Google Apps Script and uncheck all the other cells?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 How do I extract data from this NodeList?

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 11 Years ago haylie · Accepted Answer

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

}