A jsxgraph image to visualize how focus point and directrix line impact the shape 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:[-12, 18, 18, -12],showNavigation:false, showcopyright: false, axis: true,
});
var  h = board.create('slider',[[-12,-8],[-8,-8],[-10,3,9]], {name:'h'});
var  p = board.create('slider',[[-12,-5],[-8,-5],[0,2.6,5]], {name:'p'});
var  k = board.create('slider',[[-12,-2],[-8,-2],[-6,1,5]], {name:'k'});
var f1 = board.create('functiongraph',[function(x){ return (x-h.Value())*(x-h.Value())/4/p.Value()+ k.Value();}, -100, 100],{strokeColor:'red'});
var p1 = board.create('point', [function(x){return h.Value();},function(x){return k.Value()+p.Value();}],{name:'F'});
var p2 = board.create('point', [function(x){return h.Value()},function(x){return k.Value()}],{name:'V'});
var f2 = board.create('functiongraph',[function(x){ return k.Value()-p.Value();}, -12, 25],{strokeColor:'red'});
txt1 = board.create('text', [function(x){return h.Value()-5;}, function(x){return k.Value()+p.Value()+5;}, function(){ 
   return 'Focus'+'(h,k+p)';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 
 txt2 = board.create('text', [function(x){return h.Value()-2;},function(x){return k.Value()-1;}, function(){ 
   return 'Vertex'+'(h,k)';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 
  txt3 = board.create('text', [function(x){return h.Value()-3;},function(x){return k.Value()-p.Value()-1;}, function(){ 
   return 'Directrix:'+'y=k-p';
 }], {fontSize: 12,  strokeColor:'red', anchorY: 'top'});
 
 txt4 = board.create('text', [-6,16, function(){ 
   return '(x-h)^2=4p(y-k)';
 }], {fontSize: 12, fixed:true, strokeColor:'red', anchorY: 'top'});
  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 pl1 = board.create('parallel', [l2, p1],{visible:false});
 var i1 = board.create('intersection', [pl1, f1]);
  var i2 = board.create('intersection', [pl1, f1,1]);
 var l1 = board.create('segment', [i1, i2]);

The image appears in the following posts

  1. In mathematics, many of 2D shapes could be seen as the sections by intersection of a 3D object with a plane. For example, intersection of a sphere results in a circle. A square could be obtained by intersecting a cube. These intersections are quite straightforward. However, a parabola is such conic section that is not obvious to determine. A parabola is a conic section that is formed by intersecting a right circular cone with a plane at an angle that is parallel to one of the elements of the cone.

    Definition as a locus of points

    A parabola can also be defined as a set of points, in a plane, such that any point P in the set are equidistant between a fixed point F (focus) and a line l (directrix). The focus is a point located on the line of the axis of symmetry, while the directrix is a line perpendicular to the axis of symmetry. Sets for all the points on a parabola can be described by the equidistant property inside curly braces.

    {\{P:|PF|=|Pl|\}.}

    Drag the point P so that it moves along the curve of the parabola. It shows wherever P moves on the parabola, the distance between point F and point F is always equal to that to the line l.

    The midpoint V of the perpendicular from the focus F onto the directrix l is called vertex, and the line FV is the axis of symmetry of the parabola.

Triangle posted 2 days ago

Scroll to Top