Register, upload AVATAR, save SCORES, meet FRIENDS!

Bounding Circle collision detection: KineticJS/HTML5 Tutorial

Posted by Farhan Arshad On July - 23 - 2013

This tutorial explains collision detection using Bounding Circle/Sphere with KineticJS/HTML5. This collision detection technique is one of the simple techniques.

When using Bounding Circle collision detection method, we assume a circle or sphere around the sprite. When an imaginary circle touches or overlaps another imaginary circle (around the sprites) we consider it a collision.

By the way, do you know the difference between the Circle and the Sphere?

Don’t take this question to a Mathematician. He/She would lecture you for an hour and left you even more confused. Math is like love; a simple idea, but it can get complicated. Here comes a joke…

The physicist and the engineer are in a hot-air balloon. Soon, they find themselves lost in a canyon somewhere. They yell out for help: “Helllloooooo! Where are we?”
15 minutes later, they hear an echoing voice: “Helllloooooo! You’re in a hot-air balloon!!”
The physicist says, “That must have been a mathematician.”
The engineer asks, “Why do you say that?”
The physicist replied: “The answer was absolutely correct, and it was utterly useless.”

Let me explain it in simple words for you…the Circle is 2D and the Sphere is 3D. Comfy?

Bounding Circles around sprites of Mario and Turtle

Bounding Circles around sprites of Mario and Turtle

Ok, let’s get back to our business at hand. The algorithm for collision detection is simple. Each object will have a bounding circle defined by a centre point and a radius. To test for collision with another bounding circle, all that needs to be done is compare the distance between the two centre points with the sum of the two radii:

  • If the distance exceeds the sum, the circles are too far apart to intersect.
  • If the distance is equal to the sum, the circles are touching.
  • If the distance is less than the sum of the radii, the circles intersect.

NOTE: I learnt the above algorithm from devmag blog.

I have converted the above mentioned algorithm into Javascript code listed below:

function boundingCirclesColliding(sprite1, sprite2)
    //Get radius of bounding circle around first sprite
    var sprite1Radius = getRadiusForSheetOf(sprite1);

    //-10 and -5 below are just randomly selected numbers to properly center the sprites inside their circles.
    //Center point of bounding circle around first sprite
    var sprite1X = sprite1.getX() + sprite1Radius - 10;
    var sprite1Y = sprite1.getY() + sprite1Radius;

    moveBoundingCircle(sprite1X, sprite1Y);

    var sprite2Radius = getRadiusOf(sprite2);

    //Center point of second sprite
    var sprite2X = sprite2.getX() + sprite2Radius - 5;
    var sprite2Y = sprite2.getY() + sprite2Radius;

    var distanceX = sprite1X - sprite2X;
    var distanceY = sprite1Y - sprite2Y;

    var distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));

    return (distance <= (sprite1Radius + sprite2Radius));


Bounding Circle Algorithm

Bounding Circle Algorithm

In above diagram, “c” is the distance between two center points of the circles.

Let’s have an example:

x1 = 10, x2 = 20, r1 = 4
y1 = 5, y2 = 5, r2 = 4
distanceX = x2 – x1 = 10
distanceY = y2 – y1 = 0
distance =  sqrt((distanceX * distanceX) + (distanceY * distanceY)) = 10 (distance between two center points.)
(distance <= r1 + r2) –> ( 10 <= 8 ) –> False (No collision. The distance exceeds the sum of the two radii, the circles are too far apart to intersect. )

The Javascript code listed takes two arguments. We are passing two sprites to check whether they collide or not. For this specific example, sptite1 is KineticJS’s Kinetic.Sprite object (Mario) and sprite2 is Kinetic.Image object (turtle). You can read more details about animating sprites in this Kinetic.Sprite tutorial.

Demo: Bounding Circle collision detection: KineticJS/HTML5

Source code.

Please lave a comment in case you have any question or suggestion. Enjoy!

PS: You might also want ot read this… Collision Detection using Bounding Rectangle/Box method: KineticJS and HTML5 Canvas tutorial

Be Sociable, Share!
  • Rick

    This is great for the of collision, but not so useful for the actual application of collision mechanics within a 2d/3d game. Followup articles on things like sliding collision would be gems for aspiring programmers to stumble upon.

    • Farhan Arshad

      Rick! Thanks for your suggestions to improve the material on this blog.
      I am new to game development and I am sharing what I am learning, on the way. So, some day you would definitely see more details on all aspects of game development.