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 plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

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 plies to the above scenario, but don't know where to start. Any help at all would be appreciated.

• javascript
• math
• geometry
• best-fit-curve

• 1 it's a math question without some code, you tried. – Nina Scholz Commented Aug 25, 2017 at 11:01
• 1 Bézier curve – ASDFGerte Commented Aug 25, 2017 at 11:13
• You can make such a curve out of straight line segments and circular arcs, with the straights being tangent to the arcs where they join. – dmuir Commented Aug 25, 2017 at 11:31

1 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 e back.