Circle Collision Detection HTML5 Canvas

Circle collision detection in HTML5 Canvas involves checking whether two circles intersect by calculating the distance between their centers and comparing it to the sum of their radii.

How Circle Collision Detection Works

Two circles collide when the distance between their centers is less than or equal to the sum of their radii. If the distance is greater, they don't collide.

Basic Formula

The collision detection formula uses the Pythagorean theorem to calculate distance:

distance = Math.sqrt((x2 - x1)² + (y2 - y1)²)
collision = distance <= (r1 + r2)

Simple Circle Collision Function

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
function checkCircleCollision(circle1, circle2) {
    const dx = circle2.x - circle1.x;
    const dy = circle2.y - circle1.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    return distance <= (circle1.radius + circle2.radius);
}

// Test with two circles
const circle1 = { x: 100, y: 150, radius: 40 };
const circle2 = { x: 160, y: 150, radius: 30 };

const collision = checkCircleCollision(circle1, circle2);
console.log("Collision:", collision);

// Draw circles on canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(circle1.x, circle1.y, circle1.radius, 0, 2 * Math.PI);
ctx.strokeStyle = collision ? 'red' : 'blue';
ctx.stroke();

ctx.beginPath();
ctx.arc(circle2.x, circle2.y, circle2.radius, 0, 2 * Math.PI);
ctx.strokeStyle = collision ? 'red' : 'green';
ctx.stroke();
</script>

Collision: true

Optimized Version (Avoiding Math.sqrt)

For better performance, compare squared distances instead of using Math.sqrt:

<script>
function fastCircleCollision(circle1, circle2) {
    const dx = circle2.x - circle1.x;
    const dy = circle2.y - circle1.y;
    const distanceSquared = dx * dx + dy * dy;
    const radiusSum = circle1.radius + circle2.radius;
    
    return distanceSquared <= (radiusSum * radiusSum);
}

// Test performance difference
const start = performance.now();
for (let i = 0; i < 10000; i++) {
    fastCircleCollision(circle1, circle2);
}
const end = performance.now();
console.log("Fast collision time:", end - start, "ms");
</script>

Multiple Circle Collision Detection

<canvas id="multiCanvas" width="400" height="300"></canvas>
<script>
const circles = [
    { x: 50, y: 50, radius: 25 },
    { x: 100, y: 80, radius: 20 },
    { x: 150, y: 60, radius: 30 },
    { x: 200, y: 100, radius: 25 }
];

function checkAllCollisions(circles) {
    const collisions = [];
    
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            if (fastCircleCollision(circles[i], circles[j])) {
                collisions.push([i, j]);
            }
        }
    }
    
    return collisions;
}

const collisions = checkAllCollisions(circles);
console.log("Colliding pairs:", collisions);

// Draw all circles
const canvas2 = document.getElementById('multiCanvas');
const ctx2 = canvas2.getContext('2d');

circles.forEach((circle, index) => {
    ctx2.beginPath();
    ctx2.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
    ctx2.strokeStyle = collisions.some(pair => pair.includes(index)) ? 'red' : 'blue';
    ctx2.stroke();
});
</script>

Colliding pairs: [[0, 1], [1, 2]]

Comparison of Methods

Conclusion

Circle collision detection compares the distance between centers to the sum of radii. Use squared distances for better performance in games and animations with multiple circles.