Real Time Animations and Maximum FPS Limiter #366
Conversation
Kept formatting consistent with your code
Unchanged
# Conflicts: # package.json
Notification for fork repo. Includes suggested documentation change for particles JSON configuration.
Suggested change on line 171, header for your perusal (or people visiting the fork I guess).
Minor inconsistency bug fix. fps_limit variable lives at top level of JSON object, not in particles.
Added delta time measurment to update particles based on world time and adjusted max FPS to use request animation frame rather than set timeout.
| @@ -153,6 +154,7 @@ particlesJS.load('particles-js', 'assets/particles.json', function() { | |||
|
|
|||
| key | option type / notes | example | |||
| ----|---------|------ | |||
| `.fps_limit` | Limits the fps of the animation redraw, set to 0 for no limit | `30` | |||
There was a problem hiding this comment.
| `.fps_limit` | Limits the fps of the animation redraw, set to 0 for no limit | `30` | |
| `.fps_limit` | Limits the fps of the animation redraw, set to 0 for no limit | `60` |
Should this be 60?
There was a problem hiding this comment.
It should be merged is what it should be!
| // If we are too fast, just draw without updating | ||
| var fps_limit = pJS.fps_limit; | ||
| if(timestamp < lastFrameTime + (1000 / fps_limit)) { | ||
| requestAnimFrame(pJS.fn.vendors.draw); |
There was a problem hiding this comment.
I may be wrong but I think requestAnimationFrame MUST be called on each loop but you can then check if the function is not suppose to run and just return.
So basically but the requestAnimFrame(...) before the if statement.
There was a problem hiding this comment.
In the code below it's called the function, it's handled by other if/else because the animation stops if the particles.move.enable flag is disabled (and it shouldn't IMO). Thisif is used because it's needed to check the delta between the previous frame to see if a new draw is needed, if it's not needed the values are not updated so the next rAF call could be the right one to update everything. For example, if you want 30FPS instead of 60, you need to skip one frame, because rAF is called the fastest possible depending on the monitor refresh rate (60 Hz - 60 fps).
The issue solved by this PR is that this library doesn't handle well different frequencies, on my MBP 2021 when I use Chrome I have 120FPS I see faster animations than Safari, limited to 60FPS. Every speed is doubled on Chrome, and this is a bad behavior.
Uses delta time provided by request anim frame to measure time since last animation and move particles according to real time.
Objects no longer move based on CPU power, but rather always a set distance based on time.