I am attempting to make an HTML5 canvas-based game which involves framerate-independent motion (objects move at the same rate, regardless of FPS).
I know how to implement framerate-independent motion on an object moving at a constant rate. However, in my new game, objects don't move at a constant rate - they accelerate.
I want an object to accelerate at a speed of one pixel per second, so that at the end of each second, the object will be at a certain position, regardless of FPS, as shown below (starting from position = 0, velocity = 0:
Second 1: position: 1, velocity: 1
Second 2: position: 3, velocity: 2
Second 3: position: 6, velocity: 3
Second 4: position: 10, velocity: 4
...
Unless I am mistaken, this type of situation can be recreated with a formula such as position += velocity += acceleration (1).
How can I implement this with framerate-independence?
If acceleration is constant a, and at time t=0 velocity is V0 and position is X0 then at some later time t the velocity and position will be:
V = V0 + a t
X = X0 + V0 t + a t2/2
For example, if we take a = 1 and start at position = 0, velocity = 0, and we sample velocity and position at intervals of 1.0:
Second 1: position: 0.5 velocity: 1
Second 2: position: 2 velocity: 2
Second 3: position: 4.5 velocity: 3
Second 4: position: 8 velocity: 4
But we can calculate position and velocity for any time. The frame rate does not appear in the formula.