Collision Detection Between A Line And A Circle In Javascript

I'm looking for a definitive answer, maybe a function cos I'm slow, that will determine if a line segment and circle have collided, in javascript (working with canvas) A function l

Solution 1:

Here you will need some Math:

This is the basic concept if you don't know how to solve equations in general. I will leave the rest of the thinking to you. ;) Figuring out CD's length isn't that hard.

If you are asking how, that's how: Finding collisions in JavaScript is kind of complicated.

Solution 2:

I Spent about a day and a half to make it perfect.. Hope this helps.

functioncollisionCircleLine(circle,line){ // Both are objectsvar side1 = Math.sqrt(Math.pow(circle.x - line.p1.x,2) + Math.pow(circle.y - line.p1.y,2)); // Thats the pythagoras theoram If I can spell it rightvar side2 = Math.sqrt(Math.pow(circle.x - line.p2.x,2) + Math.pow(circle.y - line.p2.y,2));

    var base = Math.sqrt(Math.pow(line.p2.x - line.p1.x,2) + Math.pow(line.p2.y - line.p1.y,2));

    if(circle.radius > side1 || circle.radius > side2)
        returntrue;

    var angle1 = Math.atan2( line.p2.x - line.p1.x, line.p2.y - line.p1.y ) - Math.atan2( circle.x - line.p1.x, circle.y - line.p1.y ); // Some complicated Mathvar angle2 = Math.atan2( line.p1.x - line.p2.x, line.p1.y - line.p2.y ) - Math.atan2( circle.x - line.p2.x, circle.y - line.p2.y ); // Some complicated Math againif(angle1 > Math.PI / 2 || angle2 > Math.PI / 2) // Making sure if any angle is an obtuse one and Math.PI / 2 = 90 degreturnfalse;


        // Now if none are true thenvar semiperimeter = (side1 + side2 + base) / 2;

        var areaOfTriangle = Math.sqrt( semiperimeter * (semiperimeter - side1) * (semiperimeter - side2) * (semiperimeter - base) ); // Heron's formula for the areavar height = 2*areaOfTriangle/base;

        if( height < circle.radius )
            returntrue;
        elsereturnfalse;

}

And that is how you do it..

Solution 3:

Matt DesLauriers published a Javascript library for this problem at https://www.npmjs.com/package/line-circle-collision. The API is straightforward:

var circle = [5, 5],
    radius = 25,
    a = [5, 6],
    b = [10, 10]

var hit = collide(a, b, circle, radius)

Solution 4:

function pointCircleCollide(point, circle, r) {
    if (r===0) returnfalsevardx= circle[0] - point[0]
    vardy= circle[1] - point[1]
    return dx * dx + dy * dy <= r * r
}

vartmp= [0, 0]

function lineCircleCollide(a, b, circle, radius, nearest) {
    //check to see if start or end points lie within circleif (pointCircleCollide(a, circle, radius)) {
        if (nearest) {
            nearest[0] = a[0]
            nearest[1] = a[1]
        }
        returntrue
    } if (pointCircleCollide(b, circle, radius)) {
        if (nearest) {
            nearest[0] = b[0]
            nearest[1] = b[1]
        }
        returntrue
    }

    varx1= a[0],
        y1 = a[1],
        x2 = b[0],
        y2 = b[1],
        cx = circle[0],
        cy = circle[1]

    //vector dvardx= x2 - x1
    vardy= y2 - y1

    //vector lcvarlcx= cx - x1
    varlcy= cy - y1

    //project lc onto d, resulting in vector pvardLen2= dx * dx + dy * dy //len2 of dvarpx= dx
    varpy= dy
    if(dLen2 > 0) {
        vardp= (lcx * dx + lcy * dy) / dLen2
        px *= dp
        py *= dp
    }

    if (!nearest)
        nearest = tmp
    nearest[0] = x1 + px
    nearest[1] = y1 + py

    //len2 of pvarpLen2= px * px + py * py

    //check collisionreturn pointCircleCollide(nearest, circle, radius)
            && pLen2 <= dLen2 && (px * dx + py * dy) >= 0
}

varcircle= [5, 5],
    radius = 25,
    a = [5, 6],
    b = [10, 10]

varhit= lineCircleCollide(a, b, circle, radius)