Search code examples
javascriptpointcurvebezierquadratic

Find the control point of a quadratic curve

I have the start and end point of the curve and the top point of the curve. I would like to know how i can get the control point with this ?

I have a graph with links. When a link is on a node, i want that the links dodge the nodes. So I recover the point that I would like to have as the top point.

let x = node.GetX  + node.GetRadius * Math.sin(angle) + 10 * Math.sign(Math.sin(angle))
let y = node.GetY  + node.GetRadius * Math.cos(angle) + 10 * Math.sign(Math.cos(angle))

I have the t too between 0 and 1

let t = Distance(link.GetFrom.GetX, link.GetFrom.GetY, perpendicular.x, perpendicular.y).distance / Distance(link.GetFrom.GetX, link.GetFrom.GetY, link.GetTo.GetX, link.GetTo.GetY).distance

I have too the point on the line between the start and end point.

let perpendicular = PerpendicularIntersection(link.GetFrom.GetPosition, link.GetTo.GetPosition,{x:node.GetX, y:node.GetY})

I tried different formula from this forum and gpt but nothing good. researchs

Thank you in advance for your help

Solution 

  • /*
https://en.wikipedia.org/wiki/B%C3%A9zier_curve
I took the formula of Quadratic Bézier curves
And then i isolate P1 as it's what we are looking for
*/
export function FindControlPoint(s_x, s_y, t_x, t_y, e_x, e_y, t) {
    const inv = 1-t

   return{
        "x": (t_x-inv*inv*s_x-t*t*e_x) / (2*inv*t),
        "y": (t_y-inv*inv*s_y-t*t*e_y) / (2*inv*t),
   }
}