How to time frames to make it completely predictible and smooth on all framerates

[Wardzr]

I'm working on a personal project where a simple sprite makes its way down a path aided by a simple physics engine. I need the animation to be completely predictable so that I can set an end state (say, sprite.y > 2000) and given the same start state, the sprite will take the exact same path and reach the exact same end state every single time, regardless of frame rate or lag. This first part I've easily solved by just tying it to requestAnimationFrame and not using any delta in my calculations, thus, every frame is completely determined by the previous frame with no wiggle room and the system is completely deterministic. However as you might guess this means that if I run my animation at 30fps it will look like it's slowed down, and if I run it at 120, it looks like it's sped up.

I can make it look smooth on all framerates by either imposing my own timer or actually using the delta in my movement calculations, but then the system stops being completely deterministic. What's the best way of making it look at least OK on all framerates while keeping it completely deterministic? 

 

Edited December 11, 2019 by Wardzr

[Antriel]

https://gafferongames.com/post/fix_your_timestep/

[Wardzr]

Thanks Antriel, the article was very helpful as is the entire website, especially for someone just getting into it like me.