Search code examples
javascriptjsxgraph

Drawing an indifference curve that tangents a line in JSXGraph

I've started to use JSXGraph to draw a function. It should be a simple straight line (budget curve) that has a half-circle as his tangent (an indifference curve). Furthermore the tangent should move with the line, if the line is moved.

Is this possible in JSXGraph?

Edit: The Curve and the function should look similar to this graph: https://www.economicsonline.co.uk/Pictures2017/Grid-indifference-Basic-Equilibrium-new.png

Thanks, Mike

Solution

  • Yes, it is possible with JSXGraph. One approach is to start with a point A and fix the slope s of the budget curve through A as well as the radius r of the circle line. Doing the relatively straightforward math gives as coordinates of the center M of the circle: 

    M = A + r / sqrt(r*r + 1) * [-s, 1]

    The equation of the circle line is 

    (y - M_y)^2 + (x - M_x)^2 = r^2

    It follows that the indifference curve is 

    y = -sqrt(r^2 - (x - M_x)^2) + M_y

    We take the negative square root, since we want to take the lower semicircle as indifference curve. A working example is at http://jsfiddle.net/4sg1dpq8/