I am currently working on finding a point that is equidistant from the midpoint of a perpendicular line. This point will be used to create a Bézier curve using the starting and ending points, along with this intermediate point.
After calculating the perpendicular line and being able to plot points on it, I encountered an issue where depending on the angle of the line, the plotted points either move farther away or closer to the original line. My goal is to have these points always remain X units apart from each other.
You can view the JSFiddle demonstrating the original line with some example points plotted along the perpendicular line here:
Adjusting the start and end points in the fiddle will show how the plotted points move closer together or further apart based on the angle.
How can I ensure that these points stay uniformly spaced apart regardless of the angle?
Snippet of code provided below:
// Definition of start and end points
var startX = 120
var startY = 150
var endX = 180
var endY = 130
// Calculation for control point position
var centrePointX = ((startX + endX) / 2);
var centrePointY = ((startY + endY) / 2);
// Calculate slopes and Y intersects
var lineSlope = (endY - startY) / (endX - startX);
var perpendicularSlope = -1 / lineSlope;
var yIntersect = centrePointY - (centrePointX * perpendicularSlope);
// Drawing a line between the two original points
R.path('M '+startX+' '+startY+', L '+endX+' '+endY);