Casual Stuttering Problem

[Dwindows]

Hi,
(and thank you for reading this)

I'm having an issue where: when I run my application and I move my object, sometimes it runs perfectly and with smooth movements, and other times it stutters a lot.
I'm using Windows 10 with an Nvidia GPU (GeForce RTX 2060) and my program uses SFML 2.6.1.


(sorry but I don't know how to put the code in the "white scrollable box")
Minimal Example:

#include <SFML/Graphics.hpp>
//#include <iostream>

void Update(sf::CircleShape* s, float dt, sf::Vector2f* vel)
{
    float mass = 1.f;
    sf::Vector2f force = sf::Vector2f(0.f, 0.f);
    if (sf::Keyboard::isKeyPressed(sf::Keyboard::W))
        force += sf::Vector2f(0.f, -100.f);
    if (sf::Keyboard::isKeyPressed(sf::Keyboard::A))
        force += sf::Vector2f(-100.f, 0.f);
    if (sf::Keyboard::isKeyPressed(sf::Keyboard::S))
        force += sf::Vector2f(0.f, 100.f);
    if (sf::Keyboard::isKeyPressed(sf::Keyboard::D))
        force += sf::Vector2f(100.f, 0.f);

    // Inerzia:
    force += sf::Vector2f(-vel->x * 1.f * mass * 9.81f, -vel->y * 1.f * mass * 9.81f);

    float acceleration_x = force.x / mass;
    float acceleration_y = force.y / mass;
    *vel += sf::Vector2f(acceleration_x * dt, acceleration_y * dt);
    s->move(*vel);
}

int main()
{
    const float dt = 1.f / 60.f;

    sf::RenderWindow window(sf::VideoMode(1200, 800), "Stutter Problem");
    window.setVerticalSyncEnabled(false);
    window.setFramerateLimit(144);
    sf::Clock clock;

    sf::CircleShape shape(100.f);
    shape.setFillColor(sf::Color::Green);
    sf::Vector2f velocity = sf::Vector2f(0.f, 0.f);

    float newTime = 0.f, frameTime = 0.f;
    float currentTime = clock.getElapsedTime().asSeconds();
    float accumulator = 0.f;
    while (window.isOpen())
    {
        newTime = clock.getElapsedTime().asSeconds();
        frameTime = newTime - currentTime;
        if (frameTime > 0.25f)
            frameTime = 0.25f;
        currentTime = newTime;
        accumulator += frameTime;

        // Handle Inputs:
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        while (accumulator >= dt)
        {
            Update(&shape, dt, &velocity);
            accumulator -= dt;
        }

        window.clear();
        window.draw(shape);
        window.display();
        sf::sleep(sf::milliseconds(1));
    }

    return 0;
}

and attached here I put a video with the type of stutter that I encounter often.

[eXpl0it3r]

Note that you've limited your physics frametime to 60fps, yet the rendering is set to 144fps.
What you usually want is a higher physics frametime than the rendering frame, so your calculations are more precise than what you end up rendering.

Looks like you got the first part of the famous Fix Your Timestep! article implemented, what's missing is the crucial part to make it smooth and that is the interpolation.

If you go frame by frame in the video, you can see how the circle sometimes remains two frames in the same location and then it makes a big jump, which your eyes (or rather brain) will read as a stutter.
This might be due to the frame rate discussion above (not enough updates), or might be amplified because of the recording, or it might be because of the lack of interpolation.

The underlying problem is that you're not getting a consistent position calculated for the current frame, so it might be late in one frame and then cause a frame to not update or the update is smaller than other frames. Our brain is very sensitive and detects uneven spacing in the movement as stutter. So even if you're always moving forward, if the distance traveled per frame or rather over time (framerate could drop or increase), we  can perceive it as an uneven movement.

[Dwindows]

Thanks man, you saved me!