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?

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; //Distances var distanceX = sprite1X - sprite2X; var distanceY = sprite1Y - sprite2Y; var distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY)); return (distance <= (sprite1Radius + sprite2Radius)); }

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

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

Farhan Arshad on Google+