Dividing main() function into separated functions

I just copied a very simple animation code from YouTube to learn how to do animations in raylib. But the whole code is written inside of the main() function. I want that to be organized and separated.

Here is the code:

#include "include/raylib.h"

int main()
{
    const int screenWidth = 1200;
    const int screenHeight = 800;

    InitWindow(screenWidth, screenHeight, "2D Platformer");
    SetTargetFPS(60);

    Texture2D run_sprite = LoadTexture("sprites/Fighter/Run.png");
    Rectangle source = {0.f, 0.f, (float)run_sprite.width / 8.0f, (float)run_sprite.height};
    Vector2 position = {0, screenHeight / 2};

    int frame = 0;
    float runningTime{};
    const float updateTime{1.f/12.f};

    while (WindowShouldClose() == false)
    {
        //UPDATE VARIABLES
        float deltaTime = GetFrameTime();
        runningTime += deltaTime;
        if (runningTime >= updateTime)
        {
            runningTime = 0.f;
            source.x = (float)frame * source.width;
            frame++;
            if (frame > 8)
            {
                frame = 0;
            }
        }


        //START DRAWING
        BeginDrawing();
            ClearBackground(RAYWHITE);
            DrawTextureRec(run_sprite, source, position, WHITE);
        EndDrawing();
    }

    CloseWindow();
}

I tried to divide it into these functions:

Texture2D run_sprite;

void load_textures()
{
    run_sprite = LoadTexture("sprites/Fighter/Run.png");
}

int frame = 0;
float runningTime{};
const float updateTime{1.f/12.f};

Rectangle source = {0.f, 0.f, (float)run_sprite.width / 8.0f, (float)run_sprite.height};
void update_run_animation()
{
    runningTime += deltaTime;
    if (runningTime >= updateTime)
    {
        runningTime = 0.f;
        source.x = (float)frame * source.width;
        frame++;
        if (frame > 8)
        {
            frame = 0;
        }
    }
}

Vector2 position = {0, screenHeight / 2};
void render_run_animation()
{
    DrawTextureRec(run_sprite, source, position, WHITE);
}

And here is the updated version of code inside the main() function:

int main()
{
    const int screenWidth = 1200;
    const int screenHeight = 800;

    InitWindow(screenWidth, screenHeight, "2D Platformer");
    SetTargetFPS(60);

    load_textures();

    while (WindowShouldClose() == false)
    {
        update_run_animation();

        BeginDrawing();
            ClearBackground(RAYWHITE);
            render_run_animation();
        EndDrawing();
    }

    CloseWindow();
}

But when I run this, it's just creating a window and not drawing the texture.

I tried to get output from every single function's variable to debug it. The conclusion is when it comes to the update_run_animation() function, the source.width variable gives the default value which is 0.

I don't know what the problem is exactly, so I posted the whole code.

The initialization of global variables happens before the main function even runs. So the values you use in the initialization of source (and position) will not be what you expect.

You need to explicitly initialize (assign to) those variables in the main function when the values they depend on are known.