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

Question

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.

Answer 1

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.