FPS debug mode

This commit is contained in:
Robert Bendun 2021-04-26 21:15:22 +02:00
parent 8cd815418f
commit 62a761d270
3 changed files with 40 additions and 5 deletions

View File

@ -34,6 +34,10 @@
</head>
<body>
<div id="fps">
30
</div>
<main>
<div class="header">

View File

@ -8,4 +8,27 @@ window.addEventListener('DOMContentLoaded', () => document.fonts.ready.then(() =
const grid = new Grid(gridCanvas);
const agent = new Agent(agentCanvas);
const products = new Products(productsCanvas);
const fpsElement = document.getElementById('fps');
if (window.location.hash == '#debug') {
displayFPS(fpsElement);
} else {
document.body.removeChild(fpsElement);
}
}));
function displayFPS(fpsElement) {
let old = new Date();
let i = 0;
(function updateFPS() {
const current = new Date();
if (i++ > 10) {
i = 0;
const fps = 1 / ((current.getTime() - old.getTime()) * 0.001);
fpsElement.innerText = Math.floor(fps);
}
old = current;
requestAnimationFrame(updateFPS);
})();
}

View File

@ -2,6 +2,14 @@
/* # Main styling # */
/* ######################################## */
#fps {
position: absolute;
right: 10px;
top: 10px;
color: white;
font-size: 30px;
}
html, body {
height: 100vh;
width: 100%;