Speed test: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(8 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
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. | 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. | ||
<html> | <html> | ||
<form><input type="button" | <form><input type="button" id="startbutton" value="Start speed test"> | ||
</form> | </form> | ||
<h2 id="output">Update speed: - fps</h2> | <h2 id="output">Update speed: - fps</h2> | ||
Line 8: | Line 8: | ||
<jsxgraph width="400" height="400" box="box"> | <jsxgraph width="400" height="400" box="box"> | ||
var board, i, p, col; | var board, i, p, col; | ||
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true}); | board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true, minimizeReflow:'none'}); | ||
p = []; | p = []; | ||
for (i=0;i<2*3+1;i++) { | for (i = 0; i < 2*3 + 1; i++) { | ||
if (i%3==0) { | if (i%3 == 0) { | ||
col = 'red'; | col = 'red'; | ||
} else { | } else { | ||
col = 'blue'; | col = 'blue'; | ||
} | } | ||
if (i==0) { | if (i == 0) { | ||
p.push(board. | p.push(board.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col})); | ||
} else { | } else { | ||
p.push(board. | p.push(board.create('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col})); | ||
} | } | ||
} | } | ||
var c = board. | var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true}); | ||
count = 0 | var count = 0, | ||
maxcount = 1000 | maxcount = 1000, | ||
sgn = 1 | sgn = 1, | ||
startTime = 0; | startTime = 0; | ||
unit = function() { | var unit = function() { | ||
var len = p.length, | var len = p.length, | ||
j = Math.floor(len*Math.random()), | j = Math.floor(len*Math.random()), | ||
Line 45: | Line 45: | ||
} | } | ||
speedtest = function() { | var speedtest = function() { | ||
count = 0; | count = 0; | ||
startTime = new Date(); | startTime = new Date(); | ||
var ti = setTimeout(unit,0); | var ti = setTimeout(unit,0); | ||
}; | }; | ||
document.getElementById("startbutton").addEventListener('click', speedtest); | |||
</jsxgraph> | </jsxgraph> | ||
Line 55: | Line 57: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var board, i, p, col; | var board, i, p, col; | ||
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true}); | board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true, minimizeReflow:'none'}); | ||
p = []; | p = []; | ||
for (i=0;i<2*3+1;i++) { | for (i = 0; i < 2*3 + 1; i++) { | ||
if (i%3==0) { | if (i%3 == 0) { | ||
col = 'red'; | col = 'red'; | ||
} else { | } else { | ||
col = 'blue'; | col = 'blue'; | ||
} | } | ||
if (i==0) { | if (i == 0) { | ||
p.push(board. | p.push(board.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col})); | ||
} else { | } else { | ||
p.push(board. | p.push(board.create('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col})); | ||
} | } | ||
} | } | ||
var c = board. | var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5}); | ||
count = 0 | var count = 0, | ||
maxcount = 1000 | maxcount = 1000, | ||
sgn = 1 | sgn = 1, | ||
startTime = 0; | startTime = 0; | ||
unit = function() { | var unit = function() { | ||
var len = p.length, | var len = p.length, | ||
j = Math.floor(len*Math.random()), | j = Math.floor(len*Math.random()), | ||
Line 92: | Line 94: | ||
} | } | ||
speedtest = function() { | var speedtest = function() { | ||
count = 0; | count = 0; | ||
startTime = new Date(); | startTime = new Date(); | ||
var ti = setTimeout(unit,0); | var ti = setTimeout(unit,0); | ||
}; | }; | ||
document.getElementById("startbutton").addEventListener('click', speedtest); | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Interpolation]] | [[Category:Interpolation]] |
Latest revision as of 10:02, 15 June 2021
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.
Update speed: - fps
The underlying JavaScript code
var board, i, p, col;
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true, minimizeReflow:'none'});
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});
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() {
count = 0;
startTime = new Date();
var ti = setTimeout(unit,0);
};
document.getElementById("startbutton").addEventListener('click', speedtest);