Good thing I learned trigonometry

In my last post I introduced myself to snapsvg.io. In this post, I throw an arrow head onto a line. And am glad for remembering just enough trigonometry to get by.

The requirements are:

  1. The arrow head has to be on one side of the line, let’s call that “the end” of the line.
  2. Both sides of the line are draggable (check! covered that in the last post).
  3. Each line of the arrow head should extend in a 45 degree angle off the main line.
  4. Each line of the arrow should be a constant length, say… 40 pixels, no matter how long the line is.
  5. And, as the line is manipulated (by dragging “the beginning” or end of the line), the arrow head moves in tandem.

Start by:

I want to determine the rules for how an arrow head should be placed at any point in time. Here’s a start:

I’m tryingto come up with x,y coordinates of the points equi-distant from each end of – and 45 degrees out from – the main line.

IMG<em>20150605</em>104353

On the left side of the page pictured above, I tried to do it algebraically. Thinking that might be more performant than using trigonometry functions. But I changed my mind once I got to the equation on bottom. I went with the trig functions on the right.

Thankfully, the SohCahToa functions are built into Javascript, such as Math.asin and Math.tan. So, that’s what I’ll use.