From 737c565cb44fb2009696cb3992fea6b3a7d44512 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 8 Apr 2010 12:51:26 +0100 Subject: [PATCH] First --- README | 21 ++++++++++ src/stats.js | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 134 insertions(+) create mode 100644 README create mode 100644 src/stats.js diff --git a/README b/README new file mode 100644 index 0000000..03e7bbb --- /dev/null +++ b/README @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2010 Mr.doob + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/src/stats.js b/src/stats.js new file mode 100644 index 0000000..453d804 --- /dev/null +++ b/src/stats.js @@ -0,0 +1,113 @@ +/* + * stats.js 1.2 + * http://code.google.com/p/mrdoob/wiki/stats_js + * + * Released under MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * How to use: + * + * var stats = new Stats(); + * dom_element.appendChild( stats.getDisplayElement() ); + * + * setInterval(loop, 1000/60); + * + * function loop() + * { + * stats.update(); + * } + * + * version log: + * + * 10.03.01 1.2 Mr.doob + Simplified + * 10.02.21 1.1 Mr.doob + Accurate FPS calculation (thx Spite!) + * 09.08.10 1.0 Mr.doob + Base code + * + */ + +function Stats() +{ + this.init(); +} + +Stats.prototype = +{ + init: function() + { + this.frames = 0; + this.framesMin = 1000; + this.framesMax = 0; + + this.time = new Date().getTime(); + this.timePrev = new Date().getTime(); + + this.container = document.createElement("div"); + this.container.style.position = 'absolute'; + this.container.style.fontFamily = 'Arial'; + this.container.style.fontSize = '10px'; + this.container.style.backgroundColor = '#000020'; + this.container.style.opacity = '0.9'; + this.container.style.width = '80px'; + this.container.style.paddingTop = '2px'; + + this.framesText = document.createElement("div"); + this.framesText.style.color = '#00ffff'; + this.framesText.style.marginLeft = '3px'; + this.framesText.style.marginBottom = '3px'; + this.framesText.innerHTML = 'FPS'; + this.container.appendChild(this.framesText); + + this.canvas = document.createElement("canvas"); + this.canvas.width = 74; + this.canvas.height = 30; + this.canvas.style.display = 'block'; + this.canvas.style.marginLeft = '3px'; + this.canvas.style.marginBottom = '3px'; + this.container.appendChild(this.canvas); + + this.context = this.canvas.getContext("2d"); + this.context.fillStyle = '#101030'; + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height ); + + this.contextImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height); + }, + + getDisplayElement: function() + { + return this.container; + }, + + update: function() + { + this.frames++ + + this.time = new Date().getTime(); + + if (this.time >= this.timePrev + 1000) + { + this.fps = Math.round((this.frames * 1000 ) / (this.time - this.timePrev)); + + this.framesMin = Math.min(this.framesMin, this.fps); + this.framesMax = Math.max(this.framesMax, this.fps); + + this.framesText.innerHTML = '' + this.fps + ' FPS (' + this.framesMin + '-' + this.framesMax + ')'; + + this.contextImageData = this.context.getImageData(1, 0, this.canvas.width - 1, 30); + this.context.putImageData(this.contextImageData, 0, 0); + + this.context.fillStyle = '#101030'; + this.context.fillRect(this.canvas.width - 1, 0, 1, 30); + + this.index = ( Math.floor(30 - Math.min(30, (this.fps / 60) * 30)) ); + + this.context.fillStyle = '#80ffff'; + this.context.fillRect(this.canvas.width - 1, this.index, 1, 1); + + this.context.fillStyle = '#00ffff'; + this.context.fillRect(this.canvas.width - 1, this.index + 1, 1, 30 - this.index); + + this.timePrev = this.time; + this.frames = 0; + } + } +}