4

I'm trying to find a point that is equal distance away from the middle of a perpendicular line. I want to use this point to create a Bézier curve using the start and end points, and this other point I'm trying to find.

I've calculated the perpendicular line, and I can plot points on that line, but the problem is that depending on the angle of the line, the points get further away or closer to the original line, and I want to be able to calculate it so it's always X units away.

Take a look at this JSFiddle which shows the original line, with some points plotted along the perpendicular line:

http://jsfiddle.net/eLxcB/1/.

If you change the start and end points, you can see these plotted points getting closer together or further away.

How do I get them to be uniformly the same distance apart from each other no matter what the angle is?

Code snippit below:

// Start and end points
var startX = 120
var startY = 150
var endX = 180
var endY = 130

// Calculate how far above or below the control point should be
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);

// Draw a line between the two original points
R.path('M '+startX+' '+startY+', L '+endX+' '+endY);
Dave Bish
  • 19,263
  • 7
  • 46
  • 63
dKen
  • 3,078
  • 1
  • 28
  • 37

1 Answers1

11

Generally you can get the coordinates of a normal of a line like this:

P1 = {r * cos(a) + Cx, -r * sin(a) + Cy},
P2 = {-r * cos(a) + Cx, r * sin(a) + Cy}.

A demo applying this to your case at jsFiddle.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • Fantastic, worked a charm. Thanks so much for taking the time out to help me on this one, really appreciated. – dKen Aug 01 '13 at 11:32
  • 1
    @dKen You're wellcome. However, there seems to be a little lack in my fiddle code, (start points can't be greater than endpoints). A fixed code (with simplified angle calculation) in a new [fiddle](http://jsfiddle.net/92jWG/5/). – Teemu Aug 01 '13 at 14:21
  • I think you have interchanged `sin` and `cos` in the above code snip. Its different from the fiddle – Anurag Srivastava Aug 11 '21 at 10:39