Using derivative of function to plot slope lines iteratively

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:

$$y=\sqrt{x-10}+1$$

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: 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*}

Question

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.

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*}
• namely, I got $y1 = ym+\sqrt{(10+x1-xm)(10-x1+xm)}$ which seems to be undefined for stretches at a time. – Arash Howaida Dec 19 '18 at 4:02