Difference between revisions of "Speed test"

From JSXGraph Wiki
Jump to navigationJump to search
 
(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:false});  
+
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, lastArrow:true});  
+
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 11: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);