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. 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.