How do i correctly interpolate between 2 positions recieved from server?

Question

I am trying to implement interpolation in client side. I store Vector2 position data recieved from server in a list and try to interpolate (x,y) from previous position to next position as data comes. But i couldnt implement it correctly and its not smooth. Tried many differet ways, some was actually smooth by luck but i want to learn how to implement it in correct way. here i post an example code which is not smooth at all and has missing parts i guess.

Actually data comes from client1 as it moves his mouse which sends the coordinates to the server which just directs it to client2, so i dont know in which rate they are coming. I mean data is not coming in constant rate from server which is correct way to implement a server authorative game but anyway. if data must come in constant rate i can also implement it.

private final float STEP = 1.0f / 240f;
private float accumulator;
public static ArrayList<Vector2> ballPositionList = new ArrayList<>();


public void onPositionData(Vector2 positionVector){ // called when vector2 position comes from server
      ballPositionList.add(positionVector);
}

public void render(float delta) {
        accumulator += delta;
 while (accumulator >= STEP) {
            
            table.act(STEP);
            accumulator -= STEP;
        }
        table.interpolate(accumulator / STEP);
}

public void interpolate(float delta){ // tables interpolate method
if(ballPositionList.size() >1 ){
        while(ballPositionList.size() > 2){ // feel like i add another boolean check here but idk what should i
            ballPositionList.remove(0);


            Vector2 prevPosition = ballPositionList.get(0);
            Vector2 nextPosition = ballPositionList.get(1);
            float interpolationFactor = delta; // this is wrong. what should it be?
            float x = nextPosition.x * interpolationFactor  + prevPosition.x * (1.0f - interpolationFactor );
            float y = nextPosition.y * interpolationFactor  +  prevPosition.y * (1.0f - interpolationFactor );

            getBall().set(x, y);


        }
    }


}

Answer 1

If you're not using a fixed tick-rate, you might receive new, incoming data while your client is still calculating your interpolation. That might be the cause of your implementation being clunky.

You could take into account the distance that you have to interpolate to make it faster or slower, depending on how far the ball has to travel. If it takes the same time to interpolate, regardless of whether the ball moves one foot or ten miles, the end result will look clunky.