# 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:

- The arrow head has to be on one side of the line, let’s call that “the end” of the line.
- Both sides of the line are draggable (check! covered that in the last post).
- Each line of the arrow head should extend in a 45 degree angle off the main line.
- Each line of the arrow should be a constant length, say… 40 pixels, no matter how long the line is.
- 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.

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.