From 9fc0ca46c55a6652fbfc930345efd7938d0e01a7 Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Mon, 24 Sep 2018 21:31:13 -0400 Subject: [PATCH] display FPS --- public/css/main.css | 37 +++++++++++++++++++++++++++++++++++++ public/index.html | 6 +++++- src/fps.js | 24 ++++++++++++++++++++++++ src/main.js | 11 +++++++++-- 4 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 src/fps.js diff --git a/public/css/main.css b/public/css/main.css index 600fae6..6fd0e50 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -101,6 +101,7 @@ body { width: 100vw; height: 100vh; overflow: hidden; + font-family: sans-serif; } #container { @@ -109,6 +110,42 @@ body { overflow: hidden; } +.overlay { + position: absolute; + top: 0; + left: 0; + + pointer-events: none; + + display: flex; + align-items: center; + justify-content: space-around; + + height: 100vh; + width: 100vw; + overflow: hidden; + + z-index: 1; +} + +.overlay > * { + pointer-events: auto; +} + +#fps { + position: absolute; + top: 5px; + right: 5px; + display: flex; + content-align: center; + justify-content: space-around; + color: white; + background: rgba(0,0,0, 0.9); + height: 20px; + width: 30px; + border-radius: 3px; +} + /* ========================================================================== Helper classes ========================================================================== */ diff --git a/public/index.html b/public/index.html index 0c05541..c1958d9 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,11 @@ -
+
+ +
+
+
diff --git a/src/fps.js b/src/fps.js new file mode 100644 index 0000000..5260797 --- /dev/null +++ b/src/fps.js @@ -0,0 +1,24 @@ +import {createDomNode} from './utils.js'; + +const DEFAULTS = { + sampleSize: 60, +}; + +export default class FPS { + constructor (config) { + this.frame = this.frame.bind(this); + + this.settings = Object.assign({}, DEFAULTS, config); + + this.framesPerSecond = []; + this.fps = this.settings.element; + } + + frame (now, lastNow) { + this.framesPerSecond.push(1 / ((now - lastNow) / 1000)); + if (this.framesPerSecond.length === this.settings.sampleSize) { + this.fps.innerHTML = parseInt(this.framesPerSecond.reduce((acc, fps) => acc + fps, 0) / this.settings.sampleSize); + this.framesPerSecond = []; + } + } +} diff --git a/src/main.js b/src/main.js index b5099c4..c619d24 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,5 @@ +import FPS from './fps.js'; + const ONE_SECOND = 1000; const PRESS_RIPPLE = ONE_SECOND / 3; @@ -43,6 +45,10 @@ class Demo { this.mines = {}; this.ripples = []; + this.fps = new FPS({ + element: document.querySelector('#fps'), + }); + this.setOriginTile(); this.setFadeToGray(); @@ -215,7 +221,9 @@ class Demo { Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile); } - draw({context, height, width, scale, tilePoints}) { + draw({context, height, width, scale, tilePoints, now, lastNow}) { + this.fps.frame(now, lastNow); + Tessellate.Shapes.background(context, height, width, { red: 64, green: 32, @@ -224,7 +232,6 @@ class Demo { tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale)); - const now = Date.now(); this.ripples.forEach(({timestamp, cell}) => { const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1);