jsxgraph demo equidistant property of a parabola

						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:[-8, 18, 18, -8],showNavigation:false, showcopyright: false, axis: true,
});

 
var h = 5;
var p = 2.6;
var k = 1
 
var f1 = board.create('functiongraph',[function(x){ return (x-h)*(x-h)/4/p+ k;}, -100, 100],{strokeColor:'red'});
 var p1 = board.create('point', [h,k+p],{name:'F',fixed:true});
var p2 = board.create('point', [h,k],{name:'V',fixed:true});
var f2 = board.create('functiongraph',[k-p, -12, 25],{strokeColor:'red'});
txt1 = board.create('text', [h-5, k+p+5, function(){ 
   return 'Focus'+'(h,k+p)';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 
 txt2 = board.create('text', [h-2,k-1, function(){ 
   return 'Vertex'+'(h,k)';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 
  txt3 = board.create('text', [h-3,k-p-1, function(){ 
   return 'Directrix:'+'y=k-p';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 

 var g1 = board.create('glider', [-4.0, 8, f1],{name:'P'});
 var l1 = board.create('segment', [p1, g1]);
  var g2 = board.create('glider', [-4.0, 8, f2],{visible:false});
  var g3 = board.create('glider', [-1.0, 8, f2],{visible:false});
   var l2 = board.create('segment', [g2, g3],{withLabel:true, name:'l',color:'transparent', label:{offset:[-10,-10]},});
 var pp1 = board.create('perpendicularpoint', [g1, l2]);
  var fe = board.create('perpendicularsegment', [l2, g1]);
 board.create('text',[5,15, function(){ return "PF = "+ l1.L().toFixed(2);}]);
board.create('text',[5,12, function(){ return "PC = "+ fe.L().toFixed(2);}]);
 					

The image appears in the following posts

Triangle posted 1 day ago

Scroll to Top