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

The heavy use of Physics causes the project to run slowly. But if left alone, the bouncing elements should eventually settle down. Hype uses Matter.js, which can put inactive Physics elements to sleep. This significantly boosts the performance. By watching the historical chart, it’s easy to see when that shift occurs.

If you want to performance test your own projects, here’s a download link to the FPS (Part II) Hype Template.

Changing some of the values can make the project better suit your preferences. Here’s an example…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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('fps');
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.splice(0,0,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 = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height=100% width=100% >";
 
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 + "<line x1=" + (i*3) + " y1=" + y + " x2=" + (i*3) + " y2=" + 100 + " style='stroke:rgb(" + r + ", 0, 0); stroke-width:2;'></line>";
i++;
}
 
lines = lines + "<text x=2 y=14 style='fill:black; font-weight:bold; font-size:14; font-family:Arial, sans-serif; '> FPS: " + fps + "</text>";
lines = lines + "</svg>";
 
document.getElementById("fps").innerHTML = lines; 
 
} // Close up the "total" function
 
 
// Every 1000 milliseconds, run the "total" function
 
setInterval(function(){ 
total();
}, 1000);

By increasing the stroke width by 1 or 2, the chart has a more filled in look. If you want to get fancy, you could use a polygon instead of lines. The colors can be changed too. In this example, the lines change color based on the height of the line. The shorter the line, the more red it gets.

I like the results. It’s professional looking. I started wondering if I should turn this code into an open source project. Since it’s basically pure JavaScript, it could work in projects beyond Hype.

Maybe that’s what my next big project should be — HTML5 game development software. I probably should finish B.R.O.O.M. before I pursue any grandiose ideas though. 😊