tholman / cursor-effects

Old-school cursor effects for your browser built with modern JavaScript
https://tholman.com/cursor-effects
3.45k stars 254 forks source link

Make Framerate independent #29

Open greggman opened 2 years ago

greggman commented 2 years ago

Not sure I got everyone perfect but, the effects assumes 60fps. At least in Chrome on M1 Macs they run at 120fps so all the effects run too fast (unless that was the intent)

One thing I didn't fix, at 120fps, effects that spawn particles spawn twice as many particles.

Note: normally I'd compute deltaTime in seconds as in

const deltaTime = (time - lastTime) / 1000

But, all the calculations in the code assumed 60 fps so it seemed easier to pass in a 60fps clock, meaning, if the frame rate is 60fps then deltaTime will equal 1.0 and all the calculations will be the same. If fthe frame rate is 120fps then deltaTime will equal 0.5. If the frame rate is 30fps then deltaTime will equal 2.0.

As for the limit, if the user changes tabs then requestAnimationFrame stop firing. When you get back deltaTime might be giant which could break calculations so the code limits the framerate to 10fps. Below that things will always run at 10fps. This is also useful for debugging because otherwise, stepping through the code, deltaTime would be giant.