javascriptmathgeometrybest-fit-curve

How to calculate a smooth curve between two points, where the curve's trajectory must begin and end at two given angles


I have 2 points on a path (x1, y1) and (x2, y2). Both points has an angle value in degrees (a1 and a2 respectively). These are the angles that a curve intersecting these points must make with the y-axis when it intersects the associated (x, y) value.

For example, a curve that intersects points (x1, y1) and (x2, y2), must have a trajectory of a1 degrees at the point (x1, y1), and also a trajectory of a2 degrees at the points (x2, y2).

I wish to write a function that finds a curve that complies to the above scenario, but don't know where to start. Any help at all would be appreciated.


Solution

  • You can use a bezier to create the curve you want. The control points define the curve tangent at the start and end points. Thus to set the angle at the start and end just define the control points to be along the angles.

    The data

    var x1 = ?;  // in pixels
    var y1 = ?;
    var x2 = ?
    var y2 = ?;
    var ang1 = ?;  // in radians
    var ang2 = ?
    

    Get the length of the line

    var len =  Math.hypot(x2-x1,y2-y1);
    

    Get the vectors for the angles and extend to about 1/3rd the len

    var ax1 = Math.cos(ang1) * len * (1/3); 
    var ay1 = Math.sin(ang1) * len * (1/3);
    
    var ax2 = Math.cos(ang2) * len * (1/3); 
    var ay2 = Math.sin(ang2) * len * (1/3);
    

    Then draw

    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.bezierCurveTo(
        x1 + ax1, y1 + ay1,
        x2 - ax1, y2 - ay2,
        x2, y2
    );
    ctx.stroke();
    

    Note that the angles must be in the same approx directions. If not the curve will go past the end point and then come back.