rectangle advanced
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.
//! raylib [shapes] example - rectangle advanced
//!
//! Zig-API translation of examples/shapes/shapes_rectangle_advanced.c (raylib 6.2).
//! Example contributed by Everton Jr. (@evertonse) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2024-2025 Everton Jr. (@evertonse) and Ramon Santamaria (@raysan5)
const rl = @import("raylib");
pub fn main() void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.initWindow(screen_width, screen_height, "raylib [shapes] example - rectangle advanced");
defer rl.closeWindow(); // Close window and OpenGL context
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 rectangle bounds
const sw: f32 = @floatFromInt(rl.getScreenWidth());
const sh: f32 = @floatFromInt(rl.getScreenHeight());
const width = sw / 2.0;
const height = sh / 6.0;
var rec: rl.Rectangle = .{
.x = sw / 2.0 - width / 2,
.y = sh / 2.0 - 5 * (height / 2),
.width = width,
.height = height,
};
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white);
// Draw All Rectangles with different roundess for each side and different gradients
drawRectangleRoundedGradientH(rec, 0.8, 0.8, 36, .blue, .red);
rec.y += rec.height + 1;
drawRectangleRoundedGradientH(rec, 0.5, 1.0, 36, .red, .pink);
rec.y += rec.height + 1;
drawRectangleRoundedGradientH(rec, 1.0, 0.5, 36, .red, .blue);
rec.y += rec.height + 1;
drawRectangleRoundedGradientH(rec, 0.0, 1.0, 36, .blue, .black);
rec.y += rec.height + 1;
drawRectangleRoundedGradientH(rec, 1.0, 0.0, 36, .blue, .pink);
}
}
/// Draw rectangle with rounded edges and horizontal gradient, with options to choose side of roundness
/// NOTE: Adapted from both 'DrawRectangleRounded()' and 'DrawRectangleGradientH()' raylib [rshapes] implementations
fn drawRectangleRoundedGradientH(rec: rl.Rectangle, roundness_left: f32, roundness_right: f32, segments: i32, left: rl.Color, right: rl.Color) void {
// Neither side is rounded
if ((roundness_left <= 0.0 and roundness_right <= 0.0) or rec.width < 1 or rec.height < 1) {
rl.drawRectangleGradientEx(rec, left, left, right, right);
return;
}
// Calculate corner radius both from right and left
const rec_size = @min(rec.width, rec.height);
const radius_left = @max((rec_size * @min(roundness_left, 1.0)) / 2, 0.0);
const radius_right = @max((rec_size * @min(roundness_right, 1.0)) / 2, 0.0);
if (radius_right <= 0.0 and radius_left <= 0.0) return;
const step_length = 90.0 / @as(f32, @floatFromInt(segments));
// P0____________________P1
// /| |\
// /1| 2 |3\
// P7 /__|____________________|__\ P2
// | |P8 P9| |
// | 8 | 9 | 4 |
// | __|____________________|__ |
// P6 \ |P11 P10| / P3
// \7| 6 |5/
// \|____________________|/
// P5 P4
//
// Diagram copied here for reference, original at 'DrawRectangleRounded()' source code
// Coordinates of the 12 points also apdated from `DrawRectangleRounded`
const right_x = rec.x + rec.width;
const bottom_y = rec.y + rec.height;
const point = [12]rl.Vector2{
// P0, P1, P2
.{ .x = rec.x + radius_left, .y = rec.y },
.{ .x = right_x - radius_right, .y = rec.y },
.{ .x = right_x, .y = rec.y + radius_right },
// P3, P4
.{ .x = right_x, .y = bottom_y - radius_right },
.{ .x = right_x - radius_right, .y = bottom_y },
// P5, P6, P7
.{ .x = rec.x + radius_left, .y = bottom_y },
.{ .x = rec.x, .y = bottom_y - radius_left },
.{ .x = rec.x, .y = rec.y + radius_left },
// P8, P9
.{ .x = rec.x + radius_left, .y = rec.y + radius_left },
.{ .x = right_x - radius_right, .y = rec.y + radius_right },
// P10, P11
.{ .x = right_x - radius_right, .y = bottom_y - radius_right },
.{ .x = rec.x + radius_left, .y = bottom_y - radius_left },
};
// Draw all of the 4 corners: [1] Upper Left Corner, [3] Upper Right Corner, [5] Lower Right Corner, [7] Lower Left Corner
const Corner = struct { center: rl.Vector2, angle: f32, color: rl.Color, radius: f32 };
const corners = [4]Corner{
.{ .center = point[8], .angle = 180.0, .color = left, .radius = radius_left }, // [1] Upper Left Corner
.{ .center = point[9], .angle = 270.0, .color = right, .radius = radius_right }, // [3] Upper Right Corner
.{ .center = point[10], .angle = 0.0, .color = right, .radius = radius_right }, // [5] Lower Right Corner
.{ .center = point[11], .angle = 90.0, .color = left, .radius = radius_left }, // [7] Lower Left Corner
};
// Here we use the 'Diagram' to guide ourselves to which point receives what color
// By choosing the color correctly associated with a pointe the gradient effect
// will naturally come from OpenGL interpolation
// But this time instead of Quad, we think in triangles
rl.gl.begin(rl.gl.triangles);
defer rl.gl.end();
for (corners) |corner| {
const center = corner.center;
var angle = corner.angle;
for (0..@intCast(segments)) |_| {
color(corner.color);
rl.gl.vertex2f(center.x, center.y);
rl.gl.vertex2f(center.x + @cos(rl.deg2rad * (angle + step_length)) * corner.radius, center.y + @sin(rl.deg2rad * (angle + step_length)) * corner.radius);
rl.gl.vertex2f(center.x + @cos(rl.deg2rad * angle) * corner.radius, center.y + @sin(rl.deg2rad * angle) * corner.radius);
angle += step_length;
}
}
// [2] Upper Rectangle
color(left);
vertex(point[0]);
vertex(point[8]);
color(right);
vertex(point[9]);
vertex(point[1]);
color(left);
vertex(point[0]);
color(right);
vertex(point[9]);
// [4] Right Rectangle
color(right);
vertex(point[9]);
vertex(point[10]);
vertex(point[3]);
vertex(point[2]);
vertex(point[9]);
vertex(point[3]);
// [6] Bottom Rectangle
color(left);
vertex(point[11]);
vertex(point[5]);
color(right);
vertex(point[4]);
vertex(point[10]);
color(left);
vertex(point[11]);
color(right);
vertex(point[4]);
// [8] Left Rectangle
color(left);
vertex(point[7]);
vertex(point[6]);
vertex(point[11]);
vertex(point[8]);
vertex(point[7]);
vertex(point[11]);
// [9] Middle Rectangle
color(left);
vertex(point[8]);
vertex(point[11]);
color(right);
vertex(point[10]);
vertex(point[9]);
color(left);
vertex(point[8]);
color(right);
vertex(point[10]);
}
fn color(c: rl.Color) void {
rl.gl.color4ub(c.r, c.g, c.b, c.a);
}
fn vertex(v: rl.Vector2) void {
rl.gl.vertex2f(v.x, v.y);
}/*******************************************************************************************
*
* raylib [shapes] example - rectangle advanced
*
* Example complexity rating: [★★★★] 4/4
*
* Example originally created with raylib 5.5, last time updated with raylib 5.5
*
* Example contributed by Everton Jr. (@evertonse) 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) 2024-2025 Everton Jr. (@evertonse) and Ramon Santamaria (@raysan5)
*
********************************************************************************************/
#include "raylib.h"
#include "rlgl.h"
#include <math.h>
//--------------------------------------------------------------------------------------
// Module Functions Declaration
//--------------------------------------------------------------------------------------
// Draw rectangle with rounded edges and horizontal gradient, with options to choose side of roundness
static void DrawRectangleRoundedGradientH(Rectangle rec, float roundnessLeft, float roundnessRight, int segments, Color left, Color right);
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
const int screenWidth = 800;
const int screenHeight = 450;
InitWindow(screenWidth, screenHeight, "raylib [shapes] example - rectangle advanced");
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 rectangle bounds
//----------------------------------------------------------------------------------
float width = GetScreenWidth()/2.0f, height = GetScreenHeight()/6.0f;
Rectangle rec = {
GetScreenWidth()/2.0f - width/2,
GetScreenHeight()/2.0f - 5*(height/2),
width, height
};
//--------------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
// Draw All Rectangles with different roundess for each side and different gradients
DrawRectangleRoundedGradientH(rec, 0.8f, 0.8f, 36, BLUE, RED);
rec.y += rec.height + 1;
DrawRectangleRoundedGradientH(rec, 0.5f, 1.0f, 36, RED, PINK);
rec.y += rec.height + 1;
DrawRectangleRoundedGradientH(rec, 1.0f, 0.5f, 36, RED, BLUE);
rec.y += rec.height + 1;
DrawRectangleRoundedGradientH(rec, 0.0f, 1.0f, 36, BLUE, BLACK);
rec.y += rec.height + 1;
DrawRectangleRoundedGradientH(rec, 1.0f, 0.0f, 36, BLUE, PINK);
EndDrawing();
//--------------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}
//--------------------------------------------------------------------------------------
// Module Functions Definition
//--------------------------------------------------------------------------------------
// Draw rectangle with rounded edges and horizontal gradient, with options to choose side of roundness
// NOTE: Adapted from both 'DrawRectangleRounded()' and 'DrawRectangleGradientH()' raylib [rshapes] implementations
static void DrawRectangleRoundedGradientH(Rectangle rec, float roundnessLeft, float roundnessRight, int segments, Color left, Color right)
{
// Neither side is rounded
if ((roundnessLeft <= 0.0f && roundnessRight <= 0.0f) || (rec.width < 1) || (rec.height < 1 ))
{
DrawRectangleGradientEx(rec, left, left, right, right);
return;
}
if (roundnessLeft >= 1.0f) roundnessLeft = 1.0f;
if (roundnessRight >= 1.0f) roundnessRight = 1.0f;
// Calculate corner radius both from right and left
float recSize = rec.width > rec.height ? rec.height : rec.width;
float radiusLeft = (recSize*roundnessLeft)/2;
float radiusRight = (recSize*roundnessRight)/2;
if (radiusLeft <= 0.0f) radiusLeft = 0.0f;
if (radiusRight <= 0.0f) radiusRight = 0.0f;
if (radiusRight <= 0.0f && radiusLeft <= 0.0f) return;
float stepLength = 90.0f/(float)segments;
/*
Diagram Copied here for reference, original at 'DrawRectangleRounded()' source code
P0____________________P1
/| |\
/1| 2 |3\
P7 /__|____________________|__\ P2
| |P8 P9| |
| 8 | 9 | 4 |
| __|____________________|__ |
P6 \ |P11 P10| / P3
\7| 6 |5/
\|____________________|/
P5 P4
*/
// Coordinates of the 12 points also apdated from `DrawRectangleRounded`
const Vector2 point[12] = {
// PO, P1, P2
{(float)rec.x + radiusLeft, rec.y}, {(float)(rec.x + rec.width) - radiusRight, rec.y}, { rec.x + rec.width, (float)rec.y + radiusRight },
// P3, P4
{rec.x + rec.width, (float)(rec.y + rec.height) - radiusRight}, {(float)(rec.x + rec.width) - radiusRight, rec.y + rec.height},
// P5, P6, P7
{(float)rec.x + radiusLeft, rec.y + rec.height}, { rec.x, (float)(rec.y + rec.height) - radiusLeft}, {rec.x, (float)rec.y + radiusLeft},
// P8, P9
{(float)rec.x + radiusLeft, (float)rec.y + radiusLeft}, {(float)(rec.x + rec.width) - radiusRight, (float)rec.y + radiusRight},
// P10, P11
{(float)(rec.x + rec.width) - radiusRight, (float)(rec.y + rec.height) - radiusRight}, {(float)rec.x + radiusLeft, (float)(rec.y + rec.height) - radiusLeft}
};
const Vector2 centers[4] = { point[8], point[9], point[10], point[11] };
const float angles[4] = { 180.0f, 270.0f, 0.0f, 90.0f };
#if defined(SUPPORT_QUADS_DRAW_MODE)
rlSetTexture(GetShapesTexture().id);
Rectangle shapeRect = GetShapesTextureRectangle();
rlBegin(RL_QUADS);
// Draw all the 4 corners: [1] Upper Left Corner, [3] Upper Right Corner, [5] Lower Right Corner, [7] Lower Left Corner
for (int k = 0; k < 4; ++k)
{
Color color;
float radius;
if (k == 0) color = left, radius = radiusLeft; // [1] Upper Left Corner
if (k == 1) color = right, radius = radiusRight; // [3] Upper Right Corner
if (k == 2) color = right, radius = radiusRight; // [5] Lower Right Corner
if (k == 3) color = left, radius = radiusLeft; // [7] Lower Left Corner
float angle = angles[k];
const Vector2 center = centers[k];
for (int i = 0; i < segments/2; i++)
{
rlColor4ub(color.r, color.g, color.b, color.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(center.x, center.y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(center.x + cosf(DEG2RAD*(angle + stepLength*2))*radius, center.y + sinf(DEG2RAD*(angle + stepLength*2))*radius);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(center.x + cosf(DEG2RAD*(angle + stepLength))*radius, center.y + sinf(DEG2RAD*(angle + stepLength))*radius);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(center.x + cosf(DEG2RAD*angle)*radius, center.y + sinf(DEG2RAD*angle)*radius);
angle += (stepLength*2);
}
// End one even segments
if ( segments%2)
{
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(center.x, center.y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(center.x + cosf(DEG2RAD*(angle + stepLength))*radius, center.y + sinf(DEG2RAD*(angle + stepLength))*radius);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(center.x + cosf(DEG2RAD*angle)*radius, center.y + sinf(DEG2RAD*angle)*radius);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(center.x, center.y);
}
}
// Here we use the 'Diagram' to guide ourselves to which point receives what color
// By choosing the color correctly associated with a pointe the gradient effect
// will naturally come from OpenGL interpolation
// [2] Upper Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[0].x, point[0].y);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[8].x, point[8].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[9].x, point[9].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[1].x, point[1].y);
// [4] Left Rectangle
rlColor4ub(right.r, right.g, right.b, right.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[2].x, point[2].y);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[9].x, point[9].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[10].x, point[10].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[3].x, point[3].y);
// [6] Bottom Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[11].x, point[11].y);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[5].x, point[5].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[4].x, point[4].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[10].x, point[10].y);
// [8] left Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[7].x, point[7].y);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[6].x, point[6].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[11].x, point[11].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[8].x, point[8].y);
// [9] Middle Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlTexCoord2f(shapeRect.x/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[8].x, point[8].y);
rlTexCoord2f(shapeRect.x/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[11].x, point[11].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, (shapeRect.y + shapeRect.height)/texShapes.height);
rlVertex2f(point[10].x, point[10].y);
rlTexCoord2f((shapeRect.x + shapeRect.width)/texShapes.width, shapeRect.y/texShapes.height);
rlVertex2f(point[9].x, point[9].y);
rlEnd();
rlSetTexture(0);
#else
// Here we use the 'Diagram' to guide ourselves to which point receives what color
// By choosing the color correctly associated with a pointe the gradient effect
// will naturally come from OpenGL interpolation
// But this time instead of Quad, we think in triangles
rlBegin(RL_TRIANGLES);
// Draw all of the 4 corners: [1] Upper Left Corner, [3] Upper Right Corner, [5] Lower Right Corner, [7] Lower Left Corner
for (int k = 0; k < 4; ++k)
{
Color color = { 0 };
float radius = 0.0f;
if (k == 0) color = left, radius = radiusLeft; // [1] Upper Left Corner
if (k == 1) color = right, radius = radiusRight; // [3] Upper Right Corner
if (k == 2) color = right, radius = radiusRight; // [5] Lower Right Corner
if (k == 3) color = left, radius = radiusLeft; // [7] Lower Left Corner
float angle = angles[k];
const Vector2 center = centers[k];
for (int i = 0; i < segments; i++)
{
rlColor4ub(color.r, color.g, color.b, color.a);
rlVertex2f(center.x, center.y);
rlVertex2f(center.x + cosf(DEG2RAD*(angle + stepLength))*radius, center.y + sinf(DEG2RAD*(angle + stepLength))*radius);
rlVertex2f(center.x + cosf(DEG2RAD*angle)*radius, center.y + sinf(DEG2RAD*angle)*radius);
angle += stepLength;
}
}
// [2] Upper Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[0].x, point[0].y);
rlVertex2f(point[8].x, point[8].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[9].x, point[9].y);
rlVertex2f(point[1].x, point[1].y);
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[0].x, point[0].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[9].x, point[9].y);
// [4] Right Rectangle
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[9].x, point[9].y);
rlVertex2f(point[10].x, point[10].y);
rlVertex2f(point[3].x, point[3].y);
rlVertex2f(point[2].x, point[2].y);
rlVertex2f(point[9].x, point[9].y);
rlVertex2f(point[3].x, point[3].y);
// [6] Bottom Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[11].x, point[11].y);
rlVertex2f(point[5].x, point[5].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[4].x, point[4].y);
rlVertex2f(point[10].x, point[10].y);
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[11].x, point[11].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[4].x, point[4].y);
// [8] Left Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[7].x, point[7].y);
rlVertex2f(point[6].x, point[6].y);
rlVertex2f(point[11].x, point[11].y);
rlVertex2f(point[8].x, point[8].y);
rlVertex2f(point[7].x, point[7].y);
rlVertex2f(point[11].x, point[11].y);
// [9] Middle Rectangle
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[8].x, point[8].y);
rlVertex2f(point[11].x, point[11].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[10].x, point[10].y);
rlVertex2f(point[9].x, point[9].y);
rlColor4ub(left.r, left.g, left.b, left.a);
rlVertex2f(point[8].x, point[8].y);
rlColor4ub(right.r, right.g, right.b, right.a);
rlVertex2f(point[10].x, point[10].y);
rlEnd();
#endif
}From raylib 6.2. The original on GitHub.