Free Template Tuesday #8 – Tumult Hype “FPS” (Part II)

The previous FPS project used a significant amount of CPU power. On my Mac mini, approximately 12.5% CPU power was used for the FPS gauge and text display. That drain on the processor significantly skews the performance numbers. The original project was intentionally left flawed and unfinished. The idea was to encourage Hype users to improve their programming skills. But since no one seems to have taken on the challenge, I decided to improve the template by myself.

The new version uses about 2.4% CPU power. That’s much better – an 80% improvement. It’s basically pure JavaScript too. By using SVG and an array, a bar graph can be drawn dynamically. No additional elements are needed, except a parent element. (Even that can be done within JavaScript. See the descriptive code comments.)

Here’s the code…

var fps = 0; // Variable for showing the current Frames Per Second
var frames = 0; // Variable for collecting the number of frames
var data = [0]; // Create an empty array to store FPS values
var lines = "SVG"; // Variable for combined SVG code
var i = 0; // Variable for loops
var r = 0; // "R" value in RGB
var f = 0; // FPS value while in loop
var y = 0; // "Y" value for SVG while in loop
 
 
// Adding element (div) to the scene
 
var fpsbox = document.createElement("div");
fpsbox.id = "fps";
fpsbox.style.position = "absolute";
fpsbox.style.left = "0";
fpsbox.style.top = "0";
fpsbox.style.backgroundColor = "rgba(255,255,255,0.75)";
fpsbox.style.width = "180px";
fpsbox.style.height = "50px";
fpsbox.style.zIndex = "2147483647";
 
 
// Adding element to parent element
background.appendChild(fpsbox);
// ...but here's an alternate location... 
// document.body.appendChild(fpsbox); 
 
 
// Creating new FPS data set – All Zeros
 
while (i < 59) {
data.push(0);
i++;
}
 
 
// This is the function that runs with every frame
 
function frame() {
requestAnimationFrame(frame); // It loops by running itself
frames++; // It's a simple function — just add 1 to the variable
}	
 
// ...but it needs a jumpstart
frame();
 
 
// After 60 seconds, what's the total amount of frames?
 
function total() {
data.splice(0,1); // Remove the first row
data.push(frames); // Add the new "frames" value at the last row
fps = frames; // The FPS is the number of "frames" recorded
frames = 0; // Clean up for the next round
 
// Pretty SVG Bar Lines for the FPS Graph
 
lines = "";
 
i = 1;
 
while (i < 60) {
f = data[i];
y = 48-(f/2);
r = Math.round(255-(f*4.25)); // Lines are redder at lower frame values
lines = lines + "";
i++;
}
 
lines = lines + " FPS: " + fps + "";
lines = lines + "";
 
document.getElementById("fps").innerHTML = lines; 
 
} // Close up the "total" function
 
 
// Every 1000 milliseconds, run the "total" function
 
setInterval(function(){ 
total();
}, 1000);

To see the project in action, load the next page.

Pages: 12