Detecting collision of rectangle with circle

by

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

More Related Contents:

  1. Maximum size of a element
  2. Get a pixel from HTML Canvas?
  3. Resize image with javascript canvas (smoothly)
  4. How to draw an inline svg (in DOM) to a canvas?
  5. Pdf.js: rendering a pdf file using a base64 file source instead of url
  6. MediaStream Capture Canvas and Audio Simultaneously
  7. Convert SVG to PNG with applied images as background to svg elements
  8. Any way to clone HTML5 canvas element with its content?
  9. Best way to detect that HTML5 is not supported
  10. Use as a CSS background
  11. Capture frames from video with HTML5 and JavaScript
  12. JavaScript: getting ImageData without canvas
  13. Use Javascript to get Maximum font size in canvas
  14. jQuery equivalent of getting the context of a Canvas
  15. How do I clean up and unload a WebGL canvas context from GPU after use?
  16. Most modern method of getting mouse position within a canvas in native JavaScript [duplicate]
  17. make canvas as wide and as high as parent
  18. Drawing a rectangle using click, mouse move, and click
  19. How to pixelate an image with canvas and javascript
  20. HTML5 responsive canvas: resizing the browser canvas draw disappear
  21. Get mouse position within div? [duplicate]
  22. HTML canvas – drawing disappear on resizing
  23. Downloading Canvas element to an image
  24. Is there a way to curve / arc text using CSS3 / Canvas
  25. dotted stroke in
  26. How to convert array of png image data into video file
  27. Canvas text rendering (blurry)
  28. How to detect shape on a transparent canvas?
  29. Why changing canvas size resets its parameters?
  30. Update HTML5 canvas rectangle on hover?

Leave a Comment