<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/hyperbola-principal-axis-transformation" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Hyperbola: principal axis transformation" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    JXG.Options.label.autoPosition = true;
    JXG.Options.text.fontSize = 16;
    JXG.Options.line.strokeWidth = 0.8;
    JXG.Options.point.size = 1;
    
    const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});
    
    const sq5 = Math.sqrt(5);
    
    // Start with the Euclidean normal form of the quadric,
    // because we easily can read off the focal points.
    var f1 = board.create('point', [0, -sq5], {name:"f'", fixed: true});
    var f2 = board.create('point', [0, sq5], {name:"f", fixed: true});
    var p  = board.create('point', [2, Math.sqrt(2)], {name:"p", fixed: true});
    
    var o = board.create('point', [0, 0], {withLabel:false, color: 'blue', fixed: true, trace:true});
    var e1 = board.create('point', [1, 0], {withLabel:false, color: 'blue', fixed: true});
    var e2 = board.create('point', [0, 1], {withLabel:false, color: 'blue', fixed: true});
    
    // Undo the principal axis transformation to recompute the original form of the quadric
    var phi0 = board.create('transform', [-Math.PI * 0.25], {type: 'rotate'});
    var t0 = board.create('transform', [-2, 1], {type: 'translate'});
    t0.bindTo([f1, f2, p, o, e1, e2]);
    phi0.bindTo([f1, f2, p, o, e1, e2]);
    
    var hyp = board.create('hyperbola', [f1, f2, p]);
    
    // Create transformed axes
    var ax_z1 = board.create('line', [o, e1], {lastArrow: true, strokeColor:'black'});
    var ax_z2 = board.create('line', [o, e2], {lastArrow: true, strokeColor:'black'});
    board.update();
    
    // Visualization of the principal axis transformation
    var alpha = board.create('slider', [[1,4], [3,4], [0, 0, 45]], {name:'α', unitLabel:'°'});
    var f = board.create('slider', [[1,3.5], [3,3.5], [0, 0, 1]], {name:'f'});
    
    var phi = board.create('transform', [function(){ return alpha.Value() * Math.PI / 180; }], {type: 'rotate'});
    var t = board.create('transform', [function(){ return 2*f.Value(); }, function(){ return -f.Value(); }], {type: 'translate'});
    
    phi.bindTo([f1, f2, p, e1, e2, o]);
    t.bindTo([f1, f2, p, e1, e2, o]);
    
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Hyperbola: principal axis transformation" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   JXG.Options.label.autoPosition = true;
   JXG.Options.text.fontSize = 16;
   JXG.Options.line.strokeWidth = 0.8;
   JXG.Options.point.size = 1;
   
   const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});
   
   const sq5 = Math.sqrt(5);
   
   // Start with the Euclidean normal form of the quadric,
   // because we easily can read off the focal points.
   var f1 = board.create('point', [0, -sq5], {name:"f'", fixed: true});
   var f2 = board.create('point', [0, sq5], {name:"f", fixed: true});
   var p  = board.create('point', [2, Math.sqrt(2)], {name:"p", fixed: true});
   
   var o = board.create('point', [0, 0], {withLabel:false, color: 'blue', fixed: true, trace:true});
   var e1 = board.create('point', [1, 0], {withLabel:false, color: 'blue', fixed: true});
   var e2 = board.create('point', [0, 1], {withLabel:false, color: 'blue', fixed: true});
   
   // Undo the principal axis transformation to recompute the original form of the quadric
   var phi0 = board.create('transform', [-Math.PI * 0.25], {type: 'rotate'});
   var t0 = board.create('transform', [-2, 1], {type: 'translate'});
   t0.bindTo([f1, f2, p, o, e1, e2]);
   phi0.bindTo([f1, f2, p, o, e1, e2]);
   
   var hyp = board.create('hyperbola', [f1, f2, p]);
   
   // Create transformed axes
   var ax_z1 = board.create('line', [o, e1], {lastArrow: true, strokeColor:'black'});
   var ax_z2 = board.create('line', [o, e2], {lastArrow: true, strokeColor:'black'});
   board.update();
   
   // Visualization of the principal axis transformation
   var alpha = board.create('slider', [[1,4], [3,4], [0, 0, 45]], {name:'α', unitLabel:'°'});
   var f = board.create('slider', [[1,3.5], [3,3.5], [0, 0, 1]], {name:'f'});
   
   var phi = board.create('transform', [function(){ return alpha.Value() * Math.PI / 180; }], {type: 'rotate'});
   var t = board.create('transform', [function(){ return 2*f.Value(); }, function(){ return -f.Value(); }], {type: 'translate'});
   
   phi.bindTo([f1, f2, p, e1, e2, o]);
   t.bindTo([f1, f2, p, e1, e2, o]);
   
</jsxgraph>