<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>
<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);
<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);
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.