gavin/Tessellate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

display FPS

Browse Source
This commit is contained in:
Gavin McDonald
2018-09-24 21:31:13 -04:00
parent b77e9b6a40
commit 9fc0ca46c5
4 changed files with 75 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/main.css
View File

@@ -101,6 +101,7 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
font-family: sans-serif;
} }
#container { #container {
@@ -109,6 +110,42 @@ body {
overflow: hidden; 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 Helper classes
========================================================================== */ ========================================================================== */

6
public/index.html
View File

@@ -8,7 +8,11 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<div id="container" style="width: 100vw; height: 100vh;"></div> <div id="container"></div>
<div class="overlay">
<div id="fps"></div>
</div>
<script src="js/tessellate.js"></script> <script src="js/tessellate.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

24
src/fps.js Normal file
View File

@@ -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 = [];
}
}
}

11
src/main.js
View File

@@ -1,3 +1,5 @@
import FPS from './fps.js';
const ONE_SECOND = 1000; const ONE_SECOND = 1000;
const PRESS_RIPPLE = ONE_SECOND / 3; const PRESS_RIPPLE = ONE_SECOND / 3;
@@ -43,6 +45,10 @@ class Demo {
this.mines = {}; this.mines = {};
this.ripples = []; this.ripples = [];
this.fps = new FPS({
element: document.querySelector('#fps'),
});
this.setOriginTile(); this.setOriginTile();
this.setFadeToGray(); this.setFadeToGray();
@@ -215,7 +221,9 @@ class Demo {
Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile); 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, { Tessellate.Shapes.background(context, height, width, {
red: 64, red: 64,
green: 32, green: 32,
@@ -224,7 +232,6 @@ class Demo {
tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale)); tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
const now = Date.now();
this.ripples.forEach(({timestamp, cell}) => { this.ripples.forEach(({timestamp, cell}) => {
const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1); const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1);