JSXGraph
JSXGraph share

Share

Conic section: ellipse
QR code 
<iframe 
    src="https://www.jsxgraph.org/share/iframe/conic-section-ellipse" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Conic section: ellipse" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    (function() {
        const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
            boundingbox: [-3, 3, 3, -3],
            keepaspectratio: true
        });
    
        var A = board1.create('point', [-1, 1]);
        var B = board1.create('point', [1, 0]);
        var C = board1.create('point', [0, -1]);
        var ell = board1.create('ellipse', [A, B, C]);
    })();
    
    
    (function() {
        const board2 = JXG.JSXGraph.initBoard(BOARDID1, {
            boundingbox: [-3, 3, 3, -3],
            keepaspectratio: true
        });
    
        var A = board2.create('point', [-1, 0]);
        var B = board2.create('point', [1, 0]);
        var s = board2.create('slider', [
            [-1, -2],
            [1, -2],
            [0, 4, 10]
        ]);
        var ell = board2.create('ellipse', [A, B, function() {
            return s.Value();
        }]);
    })();
 </script> 
/*
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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!

(function() {
    const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-3, 3, 3, -3],
        keepaspectratio: true
    });

    var A = board1.create('point', [-1, 1]);
    var B = board1.create('point', [1, 0]);
    var C = board1.create('point', [0, -1]);
    var ell = board1.create('ellipse', [A, B, C]);
})();


(function() {
    const board2 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-3, 3, 3, -3],
        keepaspectratio: true
    });

    var A = board2.create('point', [-1, 0]);
    var B = board2.create('point', [1, 0]);
    var s = board2.create('slider', [
        [-1, -2],
        [1, -2],
        [0, 4, 10]
    ]);
    var ell = board2.create('ellipse', [A, B, function() {
        return s.Value();
    }]);
})();
<jsxgraph width="50%, 50%" aspect-ratio="1 / 1, 1 / 1" numberOfBoards="2" title="Conic section: ellipse" 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.
   */
   
   (function() {
       const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
           boundingbox: [-3, 3, 3, -3],
           keepaspectratio: true
       });
   
       var A = board1.create('point', [-1, 1]);
       var B = board1.create('point', [1, 0]);
       var C = board1.create('point', [0, -1]);
       var ell = board1.create('ellipse', [A, B, C]);
   })();
   
   
   (function() {
       const board2 = JXG.JSXGraph.initBoard(BOARDID1, {
           boundingbox: [-3, 3, 3, -3],
           keepaspectratio: true
       });
   
       var A = board2.create('point', [-1, 0]);
       var B = board2.create('point', [1, 0]);
       var s = board2.create('slider', [
           [-1, -2],
           [1, -2],
           [0, 4, 10]
       ]);
       var ell = board2.create('ellipse', [A, B, function() {
           return s.Value();
       }]);
   })();
</jsxgraph>
The input elements for an ellipse are either - three points: the two foci and a point on the ellipse - two point and a number: the two foci and the length of the major axis (may be a function, too).
// Define the ids of your boards in BOARDID0, BOARDID1,...

(function() {
    const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-3, 3, 3, -3],
        keepaspectratio: true
    });

    var A = board1.create('point', [-1, 1]);
    var B = board1.create('point', [1, 0]);
    var C = board1.create('point', [0, -1]);
    var ell = board1.create('ellipse', [A, B, C]);
})();


(function() {
    const board2 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-3, 3, 3, -3],
        keepaspectratio: true
    });

    var A = board2.create('point', [-1, 0]);
    var B = board2.create('point', [1, 0]);
    var s = board2.create('slider', [
        [-1, -2],
        [1, -2],
        [0, 4, 10]
    ]);
    var ell = board2.create('ellipse', [A, B, function() {
        return s.Value();
    }]);
})();

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.