JSXGraph
JSXGraph share

Share

Random points
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/random-points" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Random points" 
    allowfullscreen
></iframe>
This code has to 
<input type='button' value="Reload" onClick="reload();">

<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>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    var board = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-0.02, 1.02, 1.02, -0.02],
        keepaspectratio: true
    });
    
    function reload() {
        var i;
    
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02, 1.02, 1.02, -0.02] });
    
        board.suspendUpdate();
        for (i = 0; i < 50; i++) {
            var p = board.create('point', [Math.random(), Math.random()], { size: 3, withLabel: false });
        }
        board.unsuspendUpdate();
    }
    reload();
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-0.02, 1.02, 1.02, -0.02],
        keepaspectratio: true
    });
    var i;
    
    board2.suspendUpdate();
    for (i = 0; i < 50; i++) {
        var p2 = board2.create('point', [() => Math.random(), () => Math.random()], { size: 3, withLabel: false });
    }
    board2.unsuspendUpdate();
    
    JXG.addEvent(document.getElementById(BOARDID1), 'mousemove', function() { this.update(); }, board2);
 </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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!

var board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-0.02, 1.02, 1.02, -0.02],
    keepaspectratio: true
});

function reload() {
    var i;

    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02, 1.02, 1.02, -0.02] });

    board.suspendUpdate();
    for (i = 0; i < 50; i++) {
        var p = board.create('point', [Math.random(), Math.random()], { size: 3, withLabel: false });
    }
    board.unsuspendUpdate();
}
reload();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-0.02, 1.02, 1.02, -0.02],
    keepaspectratio: true
});
var i;

board2.suspendUpdate();
for (i = 0; i < 50; i++) {
    var p2 = board2.create('point', [() => Math.random(), () => Math.random()], { size: 3, withLabel: false });
}
board2.unsuspendUpdate();

JXG.addEvent(document.getElementById(BOARDID1), 'mousemove', function() { this.update(); }, board2);
__Draw 50 random points - version 1__ In the first version each point receives random coordinates once at construction time. __Draw 50 random points - version 2__ Here, at construction time each point receives a function pair as coordinates. In each update these functions which return `Math.random()` are called. Thus, in each update each point receives new random coordinates. The 50 points are updated on the `mousemove` event.
<input type='button' value="Reload" onClick="reload();">
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-0.02, 1.02, 1.02, -0.02],
    keepaspectratio: true
});

function reload() {
    var i;

    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02, 1.02, 1.02, -0.02] });

    board.suspendUpdate();
    for (i = 0; i < 50; i++) {
        var p = board.create('point', [Math.random(), Math.random()], { size: 3, withLabel: false });
    }
    board.unsuspendUpdate();
}
reload();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-0.02, 1.02, 1.02, -0.02],
    keepaspectratio: true
});
var i;

board2.suspendUpdate();
for (i = 0; i < 50; i++) {
    var p2 = board2.create('point', [() => Math.random(), () => Math.random()], { size: 3, withLabel: false });
}
board2.unsuspendUpdate();

JXG.addEvent(document.getElementById(BOARDID1), 'mousemove', function() { this.update(); }, board2);

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.