Wait until number of points recommended stops.
-
-
Save mjromper/95fef29a83c43cb116c3 to your computer and use it in GitHub Desktop.
SVG Performance Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>SVG/D3 Performance Test</title> | |
| <style> | |
| svg { | |
| position: absolute; | |
| top: 0; | |
| } | |
| circle { | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <div style="font-size: 22px; position:absolute;z-index:2;"> | |
| <div id="num">Recommended number of points: <span>?</span></div> | |
| <div id="fps">FPS: <span>?</span></div> | |
| </div> | |
| <script src="http://d3js.org/d3.v2.min.js?2.9.1"></script> | |
| <script> | |
| var pointsNumber = 2; | |
| var colors = d3.scale.category10(); | |
| var data = d3.range(pointsNumber).map(function() { | |
| return {xloc: 0, yloc: 0, xvel: 0, yvel: 0}; | |
| }); | |
| var width = 960, | |
| height = 500; | |
| var x = d3.scale.linear() | |
| .domain([-5, 5]) | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([-5, 5]) | |
| .range([0, height]); | |
| var time0 = Date.now(), | |
| time1; | |
| var numEl = d3.select("#num span"); | |
| numEl.text(pointsNumber); | |
| var fps = d3.select("#fps span"); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height).append("g"); | |
| var circle = svg.selectAll("circle") | |
| .data(data); | |
| circle.exit().remove(); | |
| circle.enter().append("circle") | |
| .attr("fill", function(d,i){ | |
| return colors(i); | |
| }) | |
| .attr("cx", 10) | |
| .attr("cy", 10) | |
| .attr("r", 1); | |
| var average_fps = []; | |
| var fpsValue = 0; | |
| d3.timer(function() { | |
| //console.log('here', data); | |
| if (fpsValue > 24){ | |
| for (var g=0; g<10; g++){ | |
| data.push({xloc: 0, yloc: 0, xvel: 0, yvel: 0}); | |
| svg.append("circle") | |
| .attr("cx", 10) | |
| .attr("cy", 10) | |
| .attr("fill", function(d,i){ | |
| return colors(data.length); | |
| }) | |
| .attr("r", 1); | |
| } | |
| circle = svg.selectAll("circle").data(data); | |
| numEl.text(data.length); | |
| } | |
| data.forEach(function(d) { | |
| d.xloc += d.xvel; | |
| d.yloc += d.yvel; | |
| d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc; | |
| d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc; | |
| }); | |
| circle | |
| .attr("transform", function(d) { return "translate(" + x(d.xloc) + "," + y(d.yloc) + ")"; }) | |
| .attr("r", function(d) { return Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10); }); | |
| time1 = Date.now(); | |
| var currentFPS = Math.round(1000 / (time1 - time0)); | |
| if (!isNaN(currentFPS)){ | |
| average_fps.push(currentFPS); | |
| if (average_fps.length === 10){ | |
| var avg = 0; | |
| for (var h=0; h<average_fps.length; h++){ | |
| avg += average_fps[h]; | |
| } | |
| fpsValue = avg/average_fps.length; | |
| fps.text(fpsValue); | |
| average_fps = []; | |
| } | |
| } | |
| time0 = time1; | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment