Speed test: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (6 intermediate revisions by the same user not shown) | |||
| 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++) {  | ||
| Line 22: | Line 22: | ||
     }  |      }  | ||
}  | }  | ||
var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:  | var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true});    | ||
var count = 0,  | var count = 0,  | ||
| Line 57: | 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.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));  |          p.push(board.create('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));  | ||
     } else {  |      } else {  | ||
| Line 71: | Line 71: | ||
     }  |      }  | ||
}  | }  | ||
var c = board.create('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5  | 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 94: | 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);