← ziglang.inraylib-zigGitHub

image processing

★★★☆by Ramon Santamaria (@raysan5)

There is no browser build of this example yet.

Is it the same as C?

//! raylib [textures] example - image processing
//!
//! NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
//!
//! Zig-API translation of examples/textures/textures_image_processing.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2016-2025 Ramon Santamaria (@raysan5)

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

const ImageProcess = enum {
    none,
    color_grayscale,
    color_tint,
    color_invert,
    color_contrast,
    color_brightness,
    gaussian_blur,
    flip_vertical,
    flip_horizontal,

    const all = std.enums.values(ImageProcess);

    fn text(process: ImageProcess) [:0]const u8 {
        return switch (process) {
            .none => "NO PROCESSING",
            .color_grayscale => "COLOR GRAYSCALE",
            .color_tint => "COLOR TINT",
            .color_invert => "COLOR INVERT",
            .color_contrast => "COLOR CONTRAST",
            .color_brightness => "COLOR BRIGHTNESS",
            .gaussian_blur => "GAUSSIAN BLUR",
            .flip_vertical => "FLIP VERTICAL",
            .flip_horizontal => "FLIP HORIZONTAL",
        };
    }

    /// Apply this process to `image` in place.
    fn apply(process: ImageProcess, image: *rl.Image) void {
        switch (process) {
            .none => {},
            .color_grayscale => rl.imageColorGrayscale(image),
            .color_tint => rl.imageColorTint(image, .green),
            .color_invert => rl.imageColorInvert(image),
            .color_contrast => rl.imageColorContrast(image, -40),
            .color_brightness => rl.imageColorBrightness(image, -80),
            .gaussian_blur => rl.imageBlurGaussian(image, 10),
            .flip_vertical => rl.imageFlipVertical(image),
            .flip_horizontal => rl.imageFlipHorizontal(image),
        }
    }

    /// The process `offset` places away, wrapping around.
    fn cycle(process: ImageProcess, offset: isize) ImageProcess {
        const index: isize = @backingInt(process);
        return @fromBackingInt(@intCast(@mod(index + offset, all.len)));
    }
};

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

    rl.initWindow(screen_width, screen_height, "raylib [textures] example - image processing");
    defer rl.closeWindow(); // Close window and OpenGL context

    // NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)

    var im_origin = try rl.loadImage("resources/parrots.png"); // Loaded in CPU memory (RAM)
    defer rl.unloadImage(im_origin); // Unload image-origin from RAM
    rl.imageFormat(&im_origin, .uncompressed_r8g8b8a8); // Format image to RGBA 32bit (required for texture update) <-- ISSUE
    const texture = try rl.loadTextureFromImage(im_origin); // Image converted to texture, GPU memory (VRAM)
    defer rl.unloadTexture(texture); // Unload texture from VRAM

    var im_copy = rl.imageCopy(im_origin);
    defer rl.unloadImage(im_copy); // Unload image-copy from RAM

    var current_process: ImageProcess = .none;
    var texture_reload = false;

    var toggle_recs: [ImageProcess.all.len]rl.Rectangle = undefined;
    for (&toggle_recs, 0..) |*rec, i| {
        rec.* = .{ .x = 40.0, .y = @floatFromInt(50 + 32 * i), .width = 150.0, .height = 30.0 };
    }

    rl.setTargetFPS(60);

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

        // Mouse toggle group logic
        const mouse_hover_rec: ?usize = for (toggle_recs, 0..) |rec, i| {
            if (rl.checkCollisionPointRec(rl.getMousePosition(), rec)) break i;
        } else null;

        if (mouse_hover_rec) |i| {
            if (rl.isMouseButtonReleased(.left)) {
                current_process = ImageProcess.all[i];
                texture_reload = true;
            }
        }

        // Keyboard toggle group logic
        if (rl.isKeyPressed(.down)) {
            current_process = current_process.cycle(1);
            texture_reload = true;
        } else if (rl.isKeyPressed(.up)) {
            current_process = current_process.cycle(-1);
            texture_reload = true;
        }

        // Reload texture when required
        if (texture_reload) {
            rl.unloadImage(im_copy); // Unload image-copy data
            im_copy = rl.imageCopy(im_origin); // Restore image-copy from image-origin

            // NOTE: Image processing is a costly CPU process to be done every frame,
            // If image processing is required in a frame-basis, it should be done
            // with a texture and by shaders
            current_process.apply(&im_copy);

            const pixels = try rl.loadImageColors(im_copy); // Load pixel data from image (RGBA 32bit)
            rl.updateTexture(texture, pixels.ptr); // Update texture with new image data
            rl.unloadImageColors(pixels); // Unload pixels data from RAM

            texture_reload = false;
        }

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

        rl.clearBackground(.ray_white);

        rl.drawText("IMAGE PROCESSING:", 40, 30, 10, .dark_gray);

        // Draw rectangles
        for (toggle_recs, ImageProcess.all, 0..) |rec, process, i| {
            const active = (process == current_process) or (i == mouse_hover_rec);
            const label = process.text();
            rl.drawRectangleRec(rec, if (active) .sky_blue else .light_gray);
            rl.drawRectangleLines(@intFromFloat(rec.x), @intFromFloat(rec.y), @intFromFloat(rec.width), @intFromFloat(rec.height), if (active) .blue else .gray);
            const label_x = rec.x + rec.width / 2 - @as(f32, @floatFromInt(rl.measureText(label, 10))) / 2;
            rl.drawText(label, @intFromFloat(label_x), @as(i32, @intFromFloat(rec.y)) + 11, 10, if (active) .dark_blue else .dark_gray);
        }

        rl.drawTexture(texture, screen_width - texture.width - 60, screen_height / 2 - @divTrunc(texture.height, 2), .white);
        rl.drawRectangleLines(screen_width - texture.width - 60, screen_height / 2 - @divTrunc(texture.height, 2), texture.width, texture.height, .black);
    }
}
/*******************************************************************************************
*
*   raylib [textures] example - image processing
*
*   Example complexity rating: [★★★☆] 3/4
*
*   NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
*
*   Example originally created with raylib 1.4, last time updated with raylib 3.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) 2016-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"

#include <stdlib.h>             // Required for: free()

#define NUM_PROCESSES    9

typedef enum {
    NONE = 0,
    COLOR_GRAYSCALE,
    COLOR_TINT,
    COLOR_INVERT,
    COLOR_CONTRAST,
    COLOR_BRIGHTNESS,
    GAUSSIAN_BLUR,
    FLIP_VERTICAL,
    FLIP_HORIZONTAL
} ImageProcess;

static const char *processText[] = {
    "NO PROCESSING",
    "COLOR GRAYSCALE",
    "COLOR TINT",
    "COLOR INVERT",
    "COLOR CONTRAST",
    "COLOR BRIGHTNESS",
    "GAUSSIAN BLUR",
    "FLIP VERTICAL",
    "FLIP HORIZONTAL"
};

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

    InitWindow(screenWidth, screenHeight, "raylib [textures] example - image processing");

    // NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)

    Image imOrigin = LoadImage("resources/parrots.png");   // Loaded in CPU memory (RAM)
    ImageFormat(&imOrigin, PIXELFORMAT_UNCOMPRESSED_R8G8B8A8);         // Format image to RGBA 32bit (required for texture update) <-- ISSUE
    Texture2D texture = LoadTextureFromImage(imOrigin);    // Image converted to texture, GPU memory (VRAM)

    Image imCopy = ImageCopy(imOrigin);

    int currentProcess = NONE;
    bool textureReload = false;

    Rectangle toggleRecs[NUM_PROCESSES] = { 0 };
    int mouseHoverRec = -1;

    for (int i = 0; i < NUM_PROCESSES; i++) toggleRecs[i] = (Rectangle){ 40.0f, (float)(50 + 32*i), 150.0f, 30.0f };

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

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------

        // Mouse toggle group logic
        for (int i = 0; i < NUM_PROCESSES; i++)
        {
            if (CheckCollisionPointRec(GetMousePosition(), toggleRecs[i]))
            {
                mouseHoverRec = i;

                if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
                {
                    currentProcess = i;
                    textureReload = true;
                }
                break;
            }
            else mouseHoverRec = -1;
        }

        // Keyboard toggle group logic
        if (IsKeyPressed(KEY_DOWN))
        {
            currentProcess++;
            if (currentProcess > (NUM_PROCESSES - 1)) currentProcess = 0;
            textureReload = true;
        }
        else if (IsKeyPressed(KEY_UP))
        {
            currentProcess--;
            if (currentProcess < 0) currentProcess = (NUM_PROCESSES - 1);
            textureReload = true;
        }

        // Reload texture when required
        if (textureReload)
        {
            UnloadImage(imCopy);                // Unload image-copy data
            imCopy = ImageCopy(imOrigin);     // Restore image-copy from image-origin

            // NOTE: Image processing is a costly CPU process to be done every frame,
            // If image processing is required in a frame-basis, it should be done
            // with a texture and by shaders
            switch (currentProcess)
            {
                case COLOR_GRAYSCALE: ImageColorGrayscale(&imCopy); break;
                case COLOR_TINT: ImageColorTint(&imCopy, GREEN); break;
                case COLOR_INVERT: ImageColorInvert(&imCopy); break;
                case COLOR_CONTRAST: ImageColorContrast(&imCopy, -40); break;
                case COLOR_BRIGHTNESS: ImageColorBrightness(&imCopy, -80); break;
                case GAUSSIAN_BLUR: ImageBlurGaussian(&imCopy, 10); break;
                case FLIP_VERTICAL: ImageFlipVertical(&imCopy); break;
                case FLIP_HORIZONTAL: ImageFlipHorizontal(&imCopy); break;
                default: break;
            }

            Color *pixels = LoadImageColors(imCopy);    // Load pixel data from image (RGBA 32bit)
            UpdateTexture(texture, pixels);             // Update texture with new image data
            UnloadImageColors(pixels);                  // Unload pixels data from RAM

            textureReload = false;
        }
        //----------------------------------------------------------------------------------

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

            ClearBackground(RAYWHITE);

            DrawText("IMAGE PROCESSING:", 40, 30, 10, DARKGRAY);

            // Draw rectangles
            for (int i = 0; i < NUM_PROCESSES; i++)
            {
                DrawRectangleRec(toggleRecs[i], ((i == currentProcess) || (i == mouseHoverRec)) ? SKYBLUE : LIGHTGRAY);
                DrawRectangleLines((int)toggleRecs[i].x, (int) toggleRecs[i].y, (int) toggleRecs[i].width, (int) toggleRecs[i].height, ((i == currentProcess) || (i == mouseHoverRec)) ? BLUE : GRAY);
                DrawText( processText[i], (int)( toggleRecs[i].x + toggleRecs[i].width/2 - (float)MeasureText(processText[i], 10)/2), (int) toggleRecs[i].y + 11, 10, ((i == currentProcess) || (i == mouseHoverRec)) ? DARKBLUE : DARKGRAY);
            }

            DrawTexture(texture, screenWidth - texture.width - 60, screenHeight/2 - texture.height/2, WHITE);
            DrawRectangleLines(screenWidth - texture.width - 60, screenHeight/2 - texture.height/2, texture.width, texture.height, BLACK);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadTexture(texture);       // Unload texture from VRAM
    UnloadImage(imOrigin);        // Unload image-origin from RAM
    UnloadImage(imCopy);          // Unload image-copy from RAM

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

    return 0;
}

From raylib 6.2. The original on GitHub.