Search code examples
javascriptcanvaslinecollision-detectiongeometry

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 like the one below that simply returns true if collided or false if not would be awesome. I might even donate a baby to you.

function isCollided(lineP1x, lineP1y, lineP2x, lineP2y, circlex, circley, radius) {

    ...
}

I've found plenty of formulas, like this one, but they are over my head.


Solution

  • Here you will need some Math:

    enter image description here 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: enter image description here Finding collisions in JavaScript is kind of complicated.