I'm making a javascript graph that displays the slope of the function when hovered over by the user's mouse. I have the iterative aspect and event listener handled, but it was at this point that I realized my algebra / calculus was not up to the job. I'm working with this function:


As the user drags his/her mouse over the function, the slope will change, so I'm appending a line segment to represent the slope at each point along the function. The line accepts 4 attributes: $[x_1,y_1,x_2,y_2].$ Basically, these attributes will serve as the end points for the line segment. With javascript it's easy enough to move the line along as the user hovers over the function in coordinate space, but the math has really got me stuck. I managed to compute the derivative correctly (I hope): $${dy\over dx }= {1 \over 2\sqrt{x-10}}$$

I also tried drawing a picture to help me wrap my mind around the problem. It helped a little:

enter image description here

I'm using an $x$-distance of $5$ pixels that will extend either way from the current mouse position, that gives us $5+5=10$ pixels. This is because this value creates about the size of line I want. That also helps me map out $x_1$ and $x_2,$ but I'm still not sure how to handle $y_1$ or $y_2:$ \begin{align*} x_1 &= \text{mousePosition} - 5;\\ y_1 &= \text{???}\\ x_2 &= \text{mouseposition} + 5;\\ y_2 &= \text{???}\\ \end{align*}


Assuming I have all the information that I need from the derivative of the function, how do I bring that information to bear and solve for the $y_1$ and $y_2$ of the line's end points?

If I have framed the problem correctly, what I need to do is use the derivative to find the rise/run and solve for the rise, given that my run is defined, but but for some reason I lack the intuition of how to integrate the algebra and calculus.


One issue I can see is that with different slopes, you're going to get different lengths of these line segments: a steeper slope will produce a longer line. If you want uniform line segment lengths, I'd recommend a different approach to getting your endpoints, maybe something like this:

Given \begin{align*} y(x)&=\sqrt{x-10}+1, \\ \frac{dy}{dx}=y'(x)&=\frac{1}{2\sqrt{x-10}}, \\ \ell&=\text{desired line length,}\\ (x_m, y_m)&=\text{mouse position, assumed to be on the graph,} \end{align*} we actually need to compute the intersection of a line with a circle. The line is described by $y=y_m+y'(x_m)(x-x_m),$ and the circle is the one centered at $\{x_m,y_m\}$ of radius $\ell/2,$ described by $(x-x_m)^2+(y-y_m)^2=\ell^2/4.$ The symmetry of the situation should allow us to find only one intersection point, but we may not be able to take advantage of that. In any case, to find intersection points, we plug one equation into the other: \begin{align*} (x-x_m)^2+(y-y_m)^2&=\frac{\ell^2}{4} \\ (x-x_m)^2+[y'(x_m)(x-x_m)]^2&=\frac{\ell^2}{4} \\ (x-x_m)^2(1+(y'(x_m))^2)&=\frac{\ell^2}{4} \\ (x-x_m)^2&=\frac{\ell^2}{4(1+(y'(x_m))^2)} \\ (x-x_m)&=\pm\frac{\ell}{2\sqrt{1+(y'(x_m))^2}} \\ x&=x_m\pm\frac{\ell}{2\sqrt{1+(y'(x_m))^2}}. \\ \end{align*} The plus gives you $x_1,$ say, and the minus gives you $x_2.$ You can plug these values of $x$ into the equation of the line above to find the corresponding $y$ values:

$$y_{1,2}=y_m+y'(x_m)(x_{1,2}-x_m). $$

A little simplification is possible when we plug in the expression for $y'(x):$ \begin{align*} x&=x_m\pm\frac{\ell}{2\sqrt{1+(y'(x_m))^2}} \\ x&=x_m\pm\frac{\ell}{2\sqrt{1+\dfrac{1}{4(x_m-10)}}} \\ x&=x_m\pm\frac{\ell}{2\sqrt{\dfrac{4x_m-39}{4x_m-40}}} \\ x&=x_m\pm\frac{\ell}{2}\sqrt{\dfrac{4x_m-40}{4x_m-39}}. \end{align*}

  • $\begingroup$ @AdrianKister This helps so much, thank you for this awesome answer. But I'm stuck with solving for y after getting x1 and x2. I think algebra is my weak link. Would you mind adding an equation that is solved for y? $\endgroup$ – Arash Howaida Dec 19 '18 at 3:05
  • $\begingroup$ namely, I got $y1 = ym+\sqrt{(10+x1-xm)(10-x1+xm)}$ which seems to be undefined for stretches at a time. $\endgroup$ – Arash Howaida Dec 19 '18 at 4:02
  • $\begingroup$ @ArashHowaida: I've added the formula. The points are on the line, so that's the easiest thing to use. $\endgroup$ – Adrian Keister Dec 19 '18 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.