How to detect collision of half circle in html5 canvas?

Question

I am writing a collision detection of two circles. But what I really want is that the main object will only collide with other objects on half of its surface, like the image below shows:

The half cricle surface will be colliding with other circles from different directions. How should I write the function to simulate this?

What I have found out at the moment for two circles detection is like this:

var dx = circle1.x - circle2.x;
var dy = circle1.y - circle2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < circle1.radius + circle2.radius) {
    // collision detected!
}

But how about only half of the main circle gets involved? How about only a fraction of the circle surface gets involved in the collision? Say only Math.PI / 2 degree of the circle will be detecting the collision?

I wrestled a bear once. I wrestled a bear once. · Accepted Answer · 2016-06-16T12:40:59

Assuming your code for detecting collision is correct (I didn't test it) all you have to do is determine which circle is further to the right to know which one will collide.

Consider that your half circle in the image is circle1.

if (distance < circle1.radius + circle2.radius) {
    // collision detected!
    if(circle1.x < circle2.x){
        // Circle collided on the right side of the other circle,
        // which means it's a real collision..
    }
}

How to detect collision of half circle in html5 canvas?

2 Answers