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 whole code is written inside of 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 to this 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 implemented version of code inside 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 functions 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 is the problem exactly so I posted the whole code. Sorry for the long expression.

>Solution :

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.