A right triangle 6-8-10 with a rotating angle

						JXG.Options.text.useKatex = true;
JXG.Options.axis.ticks.majorHeight = 10;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.ticksDistance = 100;
var board = JXG.JSXGraph.initBoard('box1', {
boundingbox:[-2, 10, 10, -2],showNavigation:false, showcopyright: false, axis: false,
});
var p1 = board.create('point', [9, 2],{fixed:true,size:0});
var p2 = board.create('point', [1, 8],{fixed:true,size:0});
var p3 = board.create('point', [1, 2],{fixed:true,size:0,label:{offset:[0,-15]}});

 
var l1 = board.create('segment', [p1, p2]);
var l2 = board.create('segment', [p3, p2]);
var l3 = board.create('segment', [p3, p1]);
var P   = board.create('midpoint', [p1, p2],{name:'P'});
var  n = board.create('slider',[[1, -1],[6.5,-1],[0,2,9.00]], {name:'N',digits:3});
var pa = 5;
var nx = p1.X()-n.Value();
var ang = Math.acos(4/5);
var N = board.create('point', [function(){return p1.X()-n.Value()}, function(){return p1.Y() }],{name:"N",label:{offset:[0,-15]}});
 
var M =  board.create('point', [function(){
an = n.Value();
pn = Math.sqrt( pa**2+an**2-2*pa*an*4/5);
cosN = (pn**2+an**2-pa**2)/(2*pn*an)
Na= Math.acos(cosN);
ma = Na-ang;
mn = 3/5*pn/Math.sin(ma);
mx = p1.X()-an-mn;
return mx;}, function(){return p1.Y() }],{name:"M",label:{offset:[0,-15]}});
var PN = board.create('segment', [P, N]);
var PM = board.create('segment', [P,M]);