Speed test: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| Line 6: | Line 6: | ||
</html>  | </html>  | ||
<jsxgraph width="  | <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:  | board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis:true});  | ||
p = [];  | p = [];  | ||
for (i=0;i<2*3+1;i++) {  | for (i=0;i<2*3+1;i++) {  | ||
| Line 51: | Line 51: | ||
};  | };  | ||
</jsxgraph>  | </jsxgraph>  | ||
=== The underlying JavaScript code ===  | |||
<source lang="javascript">  | |||
var board, i, p, col;  | |||
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,4,-4], keepaspectratio:false, axis: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.createElement('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));  | |||
    } else {  | |||
        p.push(board.createElement('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col}));  | |||
    }  | |||
}  | |||
var c = board.createElement('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true});   | |||
count = 0;  | |||
maxcount = 1000;  | |||
sgn = 1;  | |||
startTime = 0;  | |||
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);  | |||
    }  | |||
speedtest = function() {  | |||
    count = 0;  | |||
    startTime = new Date();  | |||
    var ti = setTimeout(unit,0);  | |||
};  | |||
</source>  | |||
[[Category:Examples]]  | |||
[[Category:Interpolation]]  | |||
Revision as of 10:20, 7 September 2011
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});
p = [];
for (i=0;i<2*3+1;i++) {
    if (i%3==0) {
        col = 'red';
    } else {
        col = 'blue';
    }
    if (i==0) {
        p.push(board.createElement('point',[-3,3], {size:8, strokeColor:col, fillColor:col}));
    } else {
        p.push(board.createElement('point',[Math.random()*8-4,Math.random()*8-4],{size:8, strokeColor:col,fillColor:col}));
    }
}
var c = board.createElement('curve', JXG.Math.Numerics.bezier(p),{strokecolor:'blue', name:"curve", strokeWidth:5, lastArrow:true}); 
count = 0;
maxcount = 1000;
sgn = 1;
startTime = 0;
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);
    }
speedtest = function() {
    count = 0;
    startTime = new Date();
    var ti = setTimeout(unit,0);
};