JSXGraph
JSXGraph share

Share

Speed test
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/speed-test" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Speed test" 
    allowfullscreen
></iframe>
This code has to 
<input type="button" id="startbutton" value="Start speed test">

<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, i, p, col;
    board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-4, 4, 4, -4],
        minimizeReflow: 'none', keepaspectratio: true });
    p = [];
    for (i = 0; i < 2 * 3 + 1; i++) {
        if (i % 3 == 0) {
            col = 'red';
        } else {
            col = 'blue';
        }
        if (i == 0) {
            p.push(board.create('point', [-3, 3], { size: 8, strokeColor: col, fillColor: col }));
        } else {
            p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], { size: 8, strokeColor: col,
                fillColor: col }));
        }
    }
    var c = board.create('curve', JXG.Math.Numerics.bezier(p), { strokecolor: 'blue', name: "curve", strokeWidth: 5,
        lastArrow: true });
    
    var count = 0,
        maxcount = 1000,
        sgn = 1,
        startTime = 0;
    
    var unit = function() {
        var len = p.length,
            j = Math.floor(len * Math.random()),
            now;
        p[j].setPosition(JXG.COORDS_BY_USER, [sgn * 3 * Math.random(), -sgn * 3 * Math.random()]);
        board.update();
        sgn *= -1;
        count++;
        if (count % 100 == 0) {
            now = new Date();
            document.getElementById('output').innerHTML = "Update speed: " + (Math.round(100 * (1000 * count / (now
                .getTime() - startTime.getTime()))) / 100.0) + ' fps';
        }
        if (count < maxcount)
            setTimeout(unit, 0);
    }
    
    var speedtest = function() {
        var count = 0;
        var startTime = new Date();
        var ti = setTimeout(unit, 0);
    };
    
    document.getElementById("startbutton").addEventListener('click', speedtest);
 </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, i, p, col;
board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-4, 4, 4, -4],
    minimizeReflow: 'none', keepaspectratio: true });
p = [];
for (i = 0; i < 2 * 3 + 1; i++) {
    if (i % 3 == 0) {
        col = 'red';
    } else {
        col = 'blue';
    }
    if (i == 0) {
        p.push(board.create('point', [-3, 3], { size: 8, strokeColor: col, fillColor: col }));
    } else {
        p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], { size: 8, strokeColor: col,
            fillColor: col }));
    }
}
var c = board.create('curve', JXG.Math.Numerics.bezier(p), { strokecolor: 'blue', name: "curve", strokeWidth: 5,
    lastArrow: true });

var count = 0,
    maxcount = 1000,
    sgn = 1,
    startTime = 0;

var unit = function() {
    var len = p.length,
        j = Math.floor(len * Math.random()),
        now;
    p[j].setPosition(JXG.COORDS_BY_USER, [sgn * 3 * Math.random(), -sgn * 3 * Math.random()]);
    board.update();
    sgn *= -1;
    count++;
    if (count % 100 == 0) {
        now = new Date();
        document.getElementById('output').innerHTML = "Update speed: " + (Math.round(100 * (1000 * count / (now
            .getTime() - startTime.getTime()))) / 100.0) + ' fps';
    }
    if (count < maxcount)
        setTimeout(unit, 0);
}

var speedtest = function() {
    var count = 0;
    var startTime = new Date();
    var ti = setTimeout(unit, 0);
};

document.getElementById("startbutton").addEventListener('click', speedtest);
Benchmarking the speed of your browser. This application does 1000 updates of a JSXGraph construction. The main cpu work is spent on computing the Bezier curve and plot it and on updating the SVG image of the construction.
<input type="button" id="startbutton" value="Start speed test">
// Define the id of your board in BOARDID

var board, i, p, col;
board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-4, 4, 4, -4],
    minimizeReflow: 'none', keepaspectratio: true });
p = [];
for (i = 0; i < 2 * 3 + 1; i++) {
    if (i % 3 == 0) {
        col = 'red';
    } else {
        col = 'blue';
    }
    if (i == 0) {
        p.push(board.create('point', [-3, 3], { size: 8, strokeColor: col, fillColor: col }));
    } else {
        p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], { size: 8, strokeColor: col,
            fillColor: col }));
    }
}
var c = board.create('curve', JXG.Math.Numerics.bezier(p), { strokecolor: 'blue', name: "curve", strokeWidth: 5,
    lastArrow: true });

var count = 0,
    maxcount = 1000,
    sgn = 1,
    startTime = 0;

var unit = function() {
    var len = p.length,
        j = Math.floor(len * Math.random()),
        now;
    p[j].setPosition(JXG.COORDS_BY_USER, [sgn * 3 * Math.random(), -sgn * 3 * Math.random()]);
    board.update();
    sgn *= -1;
    count++;
    if (count % 100 == 0) {
        now = new Date();
        document.getElementById('output').innerHTML = "Update speed: " + (Math.round(100 * (1000 * count / (now
            .getTime() - startTime.getTime()))) / 100.0) + ' fps';
    }
    if (count < maxcount)
        setTimeout(unit, 0);
}

var speedtest = function() {
    var count = 0;
    var startTime = new Date();
    var ti = setTimeout(unit, 0);
};

document.getElementById("startbutton").addEventListener('click', speedtest);

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.