easings rectangles

★★★☆by Ramon Santamaria (@raysan5)

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 - easings rectangles
//!
//! Zig-API translation of examples/shapes/shapes_easings_rectangles.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)

const rl = @import("raylib");
const reasings = @import("reasings"); // Required for easing functions

const recs_width = 50;
const recs_height = 50;

const max_recs_x = 800 / recs_width;
const max_recs_y = 450 / recs_height;

const play_time_in_frames = 240; // At 60 fps = 4 seconds

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

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

    var recs: [max_recs_x * max_recs_y]rl.Rectangle = undefined;
    for (&recs, 0..) |*rec, i| {
        const x: f32 = @floatFromInt(i % max_recs_x);
        const y: f32 = @floatFromInt(i / max_recs_x);
        rec.* = .{
            .x = recs_width / 2.0 + recs_width * x,
            .y = recs_height / 2.0 + recs_height * y,
            .width = recs_width,
            .height = recs_height,
        };
    }

    var rotation: f32 = 0.0;
    var frames_counter: i32 = 0;
    var finished = false; // Rectangles animation state: playing or finished

    rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Update
        if (!finished) {
            frames_counter += 1;
            const t: f32 = @floatFromInt(frames_counter);

            for (&recs) |*rec| {
                rec.height = @max(reasings.easeCircOut(t, recs_height, -recs_height, play_time_in_frames), 0);
                rec.width = @max(reasings.easeCircOut(t, recs_width, -recs_width, play_time_in_frames), 0);

                if (rec.height == 0 and rec.width == 0) finished = true; // Finish playing

                rotation = reasings.easeLinearIn(t, 0.0, 360.0, play_time_in_frames);
            }
        } else if (rl.isKeyPressed(.space)) {
            // When animation has finished, press space to restart
            frames_counter = 0;

            for (&recs) |*rec| {
                rec.height = recs_height;
                rec.width = recs_width;
            }

            finished = false;
        }

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

        rl.clearBackground(.ray_white);

        if (!finished) {
            for (recs) |rec| {
                rl.drawRectanglePro(rec, .{ .x = rec.width / 2, .y = rec.height / 2 }, rotation, .red);
            }
        } else rl.drawText("PRESS [SPACE] TO PLAY AGAIN!", 240, 200, 20, .gray);
    }
}

/*******************************************************************************************
*
*   raylib [shapes] example - easings rectangles
*
*   Example complexity rating: [★★★☆] 3/4
*
*   NOTE: This example requires 'easings.h' library, provided on raylib/src. Just copy
*   the library to same directory as example or make sure it's available on include path
*
*   Example originally created with raylib 2.0, last time updated with raylib 2.5
*
*   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) 2014-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"

#include "reasings.h"            // Required for easing functions

#define RECS_WIDTH              50
#define RECS_HEIGHT             50

#define MAX_RECS_X              800/RECS_WIDTH
#define MAX_RECS_Y              450/RECS_HEIGHT

#define PLAY_TIME_IN_FRAMES     240                 // At 60 fps = 4 seconds

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

    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - easings rectangles");

    Rectangle recs[MAX_RECS_X*MAX_RECS_Y] = { 0 };

    for (int y = 0; y < MAX_RECS_Y; y++)
    {
        for (int x = 0; x < MAX_RECS_X; x++)
        {
            recs[y*MAX_RECS_X + x].x = RECS_WIDTH/2.0f + RECS_WIDTH*x;
            recs[y*MAX_RECS_X + x].y = RECS_HEIGHT/2.0f + RECS_HEIGHT*y;
            recs[y*MAX_RECS_X + x].width = RECS_WIDTH;
            recs[y*MAX_RECS_X + x].height = RECS_HEIGHT;
        }
    }

    float rotation = 0.0f;
    int framesCounter = 0;
    int state = 0;                  // Rectangles animation state: 0-Playing, 1-Finished

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        if (state == 0)
        {
            framesCounter++;

            for (int i = 0; i < MAX_RECS_X*MAX_RECS_Y; i++)
            {
                recs[i].height = EaseCircOut((float)framesCounter, RECS_HEIGHT, -RECS_HEIGHT, PLAY_TIME_IN_FRAMES);
                recs[i].width = EaseCircOut((float)framesCounter, RECS_WIDTH, -RECS_WIDTH, PLAY_TIME_IN_FRAMES);

                if (recs[i].height < 0) recs[i].height = 0;
                if (recs[i].width < 0) recs[i].width = 0;

                if ((recs[i].height == 0) && (recs[i].width == 0)) state = 1;   // Finish playing

                rotation = EaseLinearIn((float)framesCounter, 0.0f, 360.0f, PLAY_TIME_IN_FRAMES);
            }
        }
        else if ((state == 1) && IsKeyPressed(KEY_SPACE))
        {
            // When animation has finished, press space to restart
            framesCounter = 0;

            for (int i = 0; i < MAX_RECS_X*MAX_RECS_Y; i++)
            {
                recs[i].height = RECS_HEIGHT;
                recs[i].width = RECS_WIDTH;
            }

            state = 0;
        }
        //----------------------------------------------------------------------------------

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

            ClearBackground(RAYWHITE);

            if (state == 0)
            {
                for (int i = 0; i < MAX_RECS_X*MAX_RECS_Y; i++)
                {
                    DrawRectanglePro(recs[i], (Vector2){ recs[i].width/2, recs[i].height/2 }, rotation, RED);
                }
            }
            else if (state == 1) DrawText("PRESS [SPACE] TO PLAY AGAIN!", 240, 200, 20, GRAY);

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

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

    return 0;
}

From raylib 6.2. The original on GitHub.