VincentGarreau / particles.js

A lightweight JavaScript library for creating particles
https://vincentgarreau.com/particles.js/
MIT License
28.66k stars 4.81k forks source link

The particles are moving too fast on 120/144 hz monitors #117

Open Arkounay opened 8 years ago

Arkounay commented 8 years ago

Hi,

I like this lib and been using it for some times but to my surprise, it was never discussed apparently : the particles are faster on 144 hz monitors, it looks like the higher the refresh rate is, the faster the particles will move. If I switch to 60 hz, they will move at a correct speed. I think this is an issue since there are more and more high frequency monitors coming out

To fix this I think something like delta time should be implemented (just like video games - basically computing the time between each frames to move everything at the same speed regardless of the number of frames per seconds)

Trent-Alvord commented 6 years ago

Finally just found this post and realized this was the issue I was seeing on a friends monitor compared to mine that is moving fine. Is there any fixes for this?

DaveyUS commented 9 months ago

The problem is that frame duration differs between monitors with different refresh rates. There are particle packages that deal with this out of the box, like TsParticles... but this package doesn't have a fix yet. You can add this to fix it yourself in the meantime:

let previousTime = performance.now();

function adjustSpeed(originalSpeed) {
    const currentTime = performance.now();
    const deltaTime = currentTime - previousTime;
    previousTime = currentTime;

    const fixedFrameRate = 60;
    const actualFrameRate = 1 / deltaTime * 1000; // deltaTime is in milliseconds, so we convert it to seconds
    return originalSpeed * (fixedFrameRate / actualFrameRate);
}