Collision response issue - basic circle within rectangle

Question

I have an animation using JS and Fabric.js whereby circles more around the screen. I'm trying to contain them to a specific area but having some issues.

After some reading yesterday I thought that testing to see if the circle was inside the rectangle (their container) would be quite simple but I've yet to get it working properly.

The circles are created at the bottom of the screen which is also where their container is. With the code that I have they 'float' to the top and stay there in one spot.

The console logs that I have indicate that they are outside the rectangle immediately so I'm assuming that something is wrong with my collision function.

My aim is for them to stay within the containing moving about and when they hit the edges they should change direction so that they will stay inside again.

Thanks for any help.

EDIT : EDITED TO ENABLE A TOUCH OF CLARITY AND USING THE COLSIOSN DETECTION FROM BELOW ANSWER AS NOW THINK THE PROBLEM IS WITH THE RESPONSE INSTEAD OF THE DETECTION.

Collision function:

function testCollision(circle, rectangle) {

return circle.left + circle.radius < rectangle.left + rectangle.width/2 //right side
    && circle.left - circle.radius < rectangle.left - rectangle.width/2 //left side
    && circle.top + circle.radius < rectangle.top + rectangle.height/2 //top
    && circle.top - circle.radius < rectangle.top - rectangle.height/2;

}

left = x & top = y

There are maxX and maxY values which is the width and height of the container.
this is the test:

if(testCollision(circle, rect) == false){
        var r = Math.atan2(y - maxY / 2, x - maxX / 2);
        vx = -Math.cos(r);
        vy = -Math.sin(r);
    }

any help is hugely appreciated, thanks!

Answer 1

The way i see it, a circle defined by (x,y,r) coordinates of the center and radius is inside an axis-aligned rectangle defined by (x,y,w,h) coordinates of the center, the width and the height if the 4 points top,right,bottom,left of the circle are inside the rectangle:

function testCollision(circle, rectangle) {
  return circle.x + circle.r < rectangle.x + rectangle.w/2
      && circle.x - circle.r > rectangle.x - rectangle.w/2
      && circle.y + circle.r < rectangle.y + rectangle.h/2
      && circle.y - circle.r > rectangle.y - rectangle.h/2
}

I considered the positive direction of y to be towards the bottom, as is usual in coordinate systems on the web.