Skip to content
Advertisement

calculating intersection point of quadratic bezier curve

This is definitely pushing the limits for my trig knowledge.

Is there a formula for calculating an intersection point between a quadratic bezier curve and a line?

Example:

in the image below, I have P1, P2, C (which is the control point) and X1, X2 (which for my particular calculation is just a straight line on the X axis.)

What I would like to be able to know is the X,Y position of T as well as the angle of the tangent at T. at the intersection point between the red curve and the black line.

curve example

After doing a little research and finding this question, I know I can use:

JavaScript

to calculate my X,Y position at any given point along the curve. So using that I could just loop through a bunch of points along the curve, checking to see if any are on my intersecting X axis. And from there try to calculate my tangent angle. But that really doesn’t seem like the best way to do it. Any math guru’s out there know what the best way is?

I’m thinking that perhaps it’s a bit more complicated than I want it to be.

Advertisement

Answer

enter image description here

Quadratic curve formula:

JavaScript

Line formula:

JavaScript

The curve & line intersect where both equations are true for the same [x,y]:

Here’s annotated code and a Demo:

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement