Draw a mouse trail (position history)

★☆☆☆by Balamurugan R (@Bala050814)

There is no browser build of this example yet.

Is it the same as C?

Desktop:verified The Zig version renders a final frame that is byte-identical to the C example.
Browser:verified In headless Chrome, the Zig version gives a final frame byte-identical to the C example built for the web.

ZigC (original)

//! raylib [shapes] example - Draw a mouse trail (position history)
//!
//! Zig-API translation of examples/shapes/shapes_mouse_trail.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2025 Balamurugan R (@Bala050814)

const std = @import("std");
const rl = @import("raylib");

/// The maximum number of positions to store in the trail
const max_trail_length = 30;

pub fn main() void {
    // Initialization
    const screen_width = 800;
    const screen_height = 450;

    rl.initWindow(screen_width, screen_height, "raylib [shapes] example - mouse trail");
    defer rl.closeWindow(); // Close window and OpenGL context

    // History of mouse positions (our fixed-size queue), newest first
    var trail_positions: [max_trail_length]rl.Vector2 = @splat(.{ .x = 0, .y = 0 });

    rl.setTargetFPS(60);

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Update
        const mouse_position = rl.getMousePosition();

        // Shift all existing positions backward by one slot in the array
        // The last element (the oldest position) is dropped
        std.mem.copyBackwards(rl.Vector2, trail_positions[1..], trail_positions[0 .. max_trail_length - 1]);

        // Store the new, current mouse position at the start of the array (Index 0)
        trail_positions[0] = mouse_position;

        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.black);

        // Draw the trail by looping through the history array
        for (trail_positions, 0..) |position, i| {
            // Ensure we skip drawing if the array hasn't been fully filled on startup
            if (position.x == 0.0 and position.y == 0.0) continue;

            // Calculate relative trail strength (ratio is near 1.0 for new, near 0.0 for old)
            const ratio = @as(f32, @floatFromInt(max_trail_length - i)) / max_trail_length;

            // Fade effect: oldest positions are more transparent
            // Fade (color, alpha) - alpha is 0.5 to 1.0 based on ratio
            const trail_color = rl.fade(.sky_blue, ratio * 0.5 + 0.5);

            // Size effect: oldest positions are smaller
            const trail_radius = 15.0 * ratio;

            rl.drawCircleV(position, trail_radius, trail_color);
        }

        // Draw a distinct white circle for the current mouse position (Index 0)
        rl.drawCircleV(mouse_position, 15.0, .white);

        rl.drawText("Move the mouse to see the trail effect!", 10, screen_height - 30, 20, .light_gray);
    }
}

/*******************************************************************************************
*
* raylib [shapes] example - Draw a mouse trail (position history)
*
* Example complexity rating: [★☆☆☆] 1/4
*
* Example originally created with raylib 5.6, last time updated with raylib 6.0
*
* Example contributed by Balamurugan R (@Bala050814) and reviewed by Ramon Santamaria (@raysan5)
*
* Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
* BSD-like license that allows static linking with closed source software
*
* Copyright (c) 2025 Balamurugan R (@Bala050814)
*
********************************************************************************************/

#include "raylib.h"

#include "raymath.h"

// Define the maximum number of positions to store in the trail
#define MAX_TRAIL_LENGTH 30

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - mouse trail");

    // Array to store the history of mouse positions (our fixed-size queue)
    Vector2 trailPositions[MAX_TRAIL_LENGTH] = { 0 };

    SetTargetFPS(60);
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        Vector2 mousePosition = GetMousePosition();

        // Shift all existing positions backward by one slot in the array
        // The last element (the oldest position) is dropped
        for (int i = MAX_TRAIL_LENGTH - 1; i > 0; i--)
        {
            trailPositions[i] = trailPositions[i - 1];
        }

        // Store the new, current mouse position at the start of the array (Index 0)
        trailPositions[0] = mousePosition;
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(BLACK);

            // Draw the trail by looping through the history array
            for (int i = 0; i < MAX_TRAIL_LENGTH; i++)
            {
                // Ensure we skip drawing if the array hasn't been fully filled on startup
                if ((trailPositions[i].x != 0.0f) || (trailPositions[i].y != 0.0f))
                {
                    // Calculate relative trail strength (ratio is near 1.0 for new, near 0.0 for old)
                    float ratio = (float)(MAX_TRAIL_LENGTH - i)/MAX_TRAIL_LENGTH;

                    // Fade effect: oldest positions are more transparent
                    // Fade (color, alpha) - alpha is 0.5 to 1.0 based on ratio
                    Color trailColor = Fade(SKYBLUE, ratio*0.5f + 0.5f);

                    // Size effect: oldest positions are smaller
                    float trailRadius = 15.0f*ratio;

                    DrawCircleV(trailPositions[i], trailRadius, trailColor);
                }
            }

            // Draw a distinct white circle for the current mouse position (Index 0)
            DrawCircleV(mousePosition, 15.0f, WHITE);

            DrawText("Move the mouse to see the trail effect!", 10, screenHeight - 30, 20, LIGHTGRAY);

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    CloseWindow();         // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.