JSXGraph
JSXGraph share

Share

Polygon with ordered set of gliders
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/polygon-through-ordered-set-of-gliders" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Polygon with ordered set of gliders" 
    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: 100%;" data-ar="1 / 1"></div>
</div>

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

        var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 5, 7, -5], keepaspectratio: true });
    
        var p = [];
        p[0] = board.create('point', [-1, 2], { size: 2, name: '' });
        p[1] = board.create('point', [0, -2], { size: 2, name: '' });
        p[2] = board.create('point', [2, 1], { size: 2, name: '' });
    
        var graph = board.create('curve', JXG.Math.Numerics.Neville(p), { strokeWidth: 5, strokeOpacity: 0.5 });
    
        var gliders = [];
        gliders[0] = board.create('glider', [-1, 0, graph], { size: 4 });
        gliders[1] = board.create('glider', [-0.5, -2, graph], { size: 4 });
        gliders[2] = board.create('glider', [1, -3, graph], { size: 4 });
        gliders[3] = board.create('glider', [1.5, -1, graph], { size: 4 });
    
        board.create('polygon', gliders, { strokeColor: 'red' });
    
        board.updateConditions = function() {
            var i;
            for (i = 1; i < gliders.length; i++) {
                if (gliders[i].position < gliders[i - 1].position) {
                    gliders[i].coords = new JXG.Coords(JXG.COORDS_BY_USER, gliders[i - 1].coords.usrCoords, board);
                    gliders[i].update();
                }
            };
        }
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

    var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 5, 7, -5], keepaspectratio: true });

    var p = [];
    p[0] = board.create('point', [-1, 2], { size: 2, name: '' });
    p[1] = board.create('point', [0, -2], { size: 2, name: '' });
    p[2] = board.create('point', [2, 1], { size: 2, name: '' });

    var graph = board.create('curve', JXG.Math.Numerics.Neville(p), { strokeWidth: 5, strokeOpacity: 0.5 });

    var gliders = [];
    gliders[0] = board.create('glider', [-1, 0, graph], { size: 4 });
    gliders[1] = board.create('glider', [-0.5, -2, graph], { size: 4 });
    gliders[2] = board.create('glider', [1, -3, graph], { size: 4 });
    gliders[3] = board.create('glider', [1.5, -1, graph], { size: 4 });

    board.create('polygon', gliders, { strokeColor: 'red' });

    board.updateConditions = function() {
        var i;
        for (i = 1; i < gliders.length; i++) {
            if (gliders[i].position < gliders[i - 1].position) {
                gliders[i].coords = new JXG.Coords(JXG.COORDS_BY_USER, gliders[i - 1].coords.usrCoords, board);
                gliders[i].update();
            }
        };
    }
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Polygon with ordered set of gliders" 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 ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
       var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 5, 7, -5], keepaspectratio: true });
   
       var p = [];
       p[0] = board.create('point', [-1, 2], { size: 2, name: '' });
       p[1] = board.create('point', [0, -2], { size: 2, name: '' });
       p[2] = board.create('point', [2, 1], { size: 2, name: '' });
   
       var graph = board.create('curve', JXG.Math.Numerics.Neville(p), { strokeWidth: 5, strokeOpacity: 0.5 });
   
       var gliders = [];
       gliders[0] = board.create('glider', [-1, 0, graph], { size: 4 });
       gliders[1] = board.create('glider', [-0.5, -2, graph], { size: 4 });
       gliders[2] = board.create('glider', [1, -3, graph], { size: 4 });
       gliders[3] = board.create('glider', [1.5, -1, graph], { size: 4 });
   
       board.create('polygon', gliders, { strokeColor: 'red' });
   
       board.updateConditions = function() {
           var i;
           for (i = 1; i < gliders.length; i++) {
               if (gliders[i].position < gliders[i - 1].position) {
                   gliders[i].coords = new JXG.Coords(JXG.COORDS_BY_USER, gliders[i - 1].coords.usrCoords, board);
                   gliders[i].update();
               }
           };
       }
</jsxgraph>
This example shows a curve that can be manipulated by dragging the small points. This curve hosts four "glider elements", named A, B, C, and D. Now, these gliders can be moved on the curve, but their order from the start of the curve to the end of the curve (usually that is from left to right) will always stay A, B, C, D. For this, `board.updateConditions` are supplied. 
// Define the id of your board in BOARDID

    var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 5, 7, -5], keepaspectratio: true });

    var p = [];
    p[0] = board.create('point', [-1, 2], { size: 2, name: '' });
    p[1] = board.create('point', [0, -2], { size: 2, name: '' });
    p[2] = board.create('point', [2, 1], { size: 2, name: '' });

    var graph = board.create('curve', JXG.Math.Numerics.Neville(p), { strokeWidth: 5, strokeOpacity: 0.5 });

    var gliders = [];
    gliders[0] = board.create('glider', [-1, 0, graph], { size: 4 });
    gliders[1] = board.create('glider', [-0.5, -2, graph], { size: 4 });
    gliders[2] = board.create('glider', [1, -3, graph], { size: 4 });
    gliders[3] = board.create('glider', [1.5, -1, graph], { size: 4 });

    board.create('polygon', gliders, { strokeColor: 'red' });

    board.updateConditions = function() {
        var i;
        for (i = 1; i < gliders.length; i++) {
            if (gliders[i].position < gliders[i - 1].position) {
                gliders[i].coords = new JXG.Coords(JXG.COORDS_BY_USER, gliders[i - 1].coords.usrCoords, board);
                gliders[i].update();
            }
        };
    }

license

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