double pendulum

★★☆☆by JoeCheong (@Joecheong2006)

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 - double pendulum
//!
//! Zig-API translation of examples/shapes/shapes_double_pendulum.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2025 JoeCheong (@Joecheong2006)

const rl = @import("raylib");

// Constant for Simulation
const simulation_steps = 30;
const g: f32 = 9.81;

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

    rl.setConfigFlags(.{ .window_highdpi = true });
    rl.initWindow(screen_width, screen_height, "raylib [shapes] example - double pendulum");
    defer rl.closeWindow(); // Close window and OpenGL context

    // Simulation Parameters
    const l1: f32 = 15.0;
    const m1: f32 = 0.2;
    var theta1: f32 = rl.deg2rad * 170;
    var w1: f32 = 0;
    const l2: f32 = 15.0;
    const m2: f32 = 0.1;
    var theta2: f32 = rl.deg2rad * 0;
    var w2: f32 = 0;
    const length_scaler: f32 = 0.1;
    const total_m = m1 + m2;

    var previous_position = calculateDoublePendulumEndPoint(l1, theta1, l2, theta2);
    previous_position.x += screen_width / 2.0;
    previous_position.y += screen_height / 2.0 - 100;

    // Scale length
    const scaled_l1 = l1 * length_scaler;
    const scaled_l2 = l2 * length_scaler;

    // Draw parameters
    const line_thick: f32 = 20;
    const trail_thick: f32 = 2;
    const fade_alpha: f32 = 0.01;

    // Create framebuffer
    const target = try rl.loadRenderTexture(screen_width, screen_height);
    defer rl.unloadRenderTexture(target);
    rl.setTextureFilter(target.texture, .bilinear);

    rl.setTargetFPS(60);

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Update
        const dt = rl.getFrameTime();
        const step = dt / simulation_steps;
        const step2 = step * step;

        // Update Physics - larger steps = better approximation
        for (0..simulation_steps) |_| {
            const delta = theta1 - theta2;
            const sin_d = @sin(delta);
            const cos_d = @cos(delta);
            const cos_2d = @cos(2 * delta);
            const ww1 = w1 * w1;
            const ww2 = w2 * w2;

            // Calculate a1
            const a1 = (-g * (2 * m1 + m2) * @sin(theta1) -
                m2 * g * @sin(theta1 - 2 * theta2) -
                2 * sin_d * m2 * (ww2 * scaled_l2 + ww1 * scaled_l1 * cos_d)) /
                (scaled_l1 * (2 * m1 + m2 - m2 * cos_2d));

            // Calculate a2
            const a2 = (2 * sin_d * (ww1 * scaled_l1 * total_m +
                g * total_m * @cos(theta1) +
                ww2 * scaled_l2 * m2 * cos_d)) /
                (scaled_l2 * (2 * m1 + m2 - m2 * cos_2d));

            // Update thetas
            theta1 += w1 * step + 0.5 * a1 * step2;
            theta2 += w2 * step + 0.5 * a2 * step2;

            // Update omegas
            w1 += a1 * step;
            w2 += a2 * step;
        }

        // Calculate position
        var current_position = calculateDoublePendulumEndPoint(l1, theta1, l2, theta2);
        current_position.x += screen_width / 2.0;
        current_position.y += screen_height / 2.0 - 100;

        // Draw to render texture
        {
            rl.beginTextureMode(target);
            defer rl.endTextureMode();

            // Draw a transparent rectangle - smaller alpha = longer trails
            rl.drawRectangle(0, 0, screen_width, screen_height, rl.fade(.black, fade_alpha));

            // Draw trail
            rl.drawCircleV(previous_position, trail_thick, .red);
            rl.drawLineEx(previous_position, current_position, trail_thick * 2, .red);
        }

        // Update previous position
        previous_position = current_position;

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

        rl.clearBackground(.black);

        // Draw trails texture (flipped: render textures are stored bottom-up)
        const texture = target.texture;
        rl.drawTextureRec(texture, .{
            .x = 0,
            .y = 0,
            .width = @floatFromInt(texture.width),
            .height = @floatFromInt(-texture.height),
        }, .{ .x = 0, .y = 0 }, .white);

        // Draw double pendulum
        rl.drawRectanglePro(
            .{ .x = screen_width / 2.0, .y = screen_height / 2.0 - 100, .width = 10 * l1, .height = line_thick },
            .{ .x = 0, .y = line_thick * 0.5 },
            90 - rl.rad2deg * theta1,
            .ray_white,
        );

        const endpoint1 = calculatePendulumEndPoint(l1, theta1);
        rl.drawRectanglePro(
            .{ .x = screen_width / 2.0 + endpoint1.x, .y = screen_height / 2.0 - 100 + endpoint1.y, .width = 10 * l2, .height = line_thick },
            .{ .x = 0, .y = line_thick * 0.5 },
            90 - rl.rad2deg * theta2,
            .ray_white,
        );
    }
}

/// Calculate pendulum end point
fn calculatePendulumEndPoint(l: f32, theta: f32) rl.Vector2 {
    return .{ .x = 10 * l * @sin(theta), .y = 10 * l * @cos(theta) };
}

/// Calculate double pendulum end point
fn calculateDoublePendulumEndPoint(l1: f32, theta1: f32, l2: f32, theta2: f32) rl.Vector2 {
    const endpoint1 = calculatePendulumEndPoint(l1, theta1);
    const endpoint2 = calculatePendulumEndPoint(l2, theta2);
    return .{ .x = endpoint1.x + endpoint2.x, .y = endpoint1.y + endpoint2.y };
}

/*******************************************************************************************
*
*   raylib [shapes] example - double pendulum
*
*   Example complexity rating: [★★☆☆] 2/4
*
*   Example originally created with raylib 5.5, last time updated with raylib 5.5
*
*   Example contributed by JoeCheong (@Joecheong2006) 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 JoeCheong (@Joecheong2006)
*
********************************************************************************************/

#include "raylib.h"

#include <math.h>       // Required for: sin(), cos(), PI

// Constant for Simulation
#define SIMULATION_STEPS 30
#define G 9.81f

//----------------------------------------------------------------------------------
// Module Functions Declaration
//----------------------------------------------------------------------------------
static Vector2 CalculatePendulumEndPoint(float l, float theta);
static Vector2 CalculateDoublePendulumEndPoint(float l1, float theta1, float l2, float theta2);

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

    SetConfigFlags(FLAG_WINDOW_HIGHDPI);
    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - double pendulum");

    // Simulation Parameters
    float l1 = 15.0f, m1 = 0.2f, theta1 = DEG2RAD*170, w1 = 0;
    float l2 = 15.0f, m2 = 0.1f, theta2 = DEG2RAD*0, w2 = 0;
    float lengthScaler = 0.1f;
    float totalM = m1 + m2;

    Vector2 previousPosition = CalculateDoublePendulumEndPoint(l1, theta1, l2, theta2);
    previousPosition.x += ((float)screenWidth/2);
    previousPosition.y += ((float)screenHeight/2 - 100);

    // Scale length
    float L1 = l1*lengthScaler;
    float L2 = l2*lengthScaler;

    // Draw parameters
    float lineThick = 20, trailThick = 2;
    float fateAlpha = 0.01f;

    // Create framebuffer
    RenderTexture2D target = LoadRenderTexture(screenWidth, screenHeight);
    SetTextureFilter(target.texture, TEXTURE_FILTER_BILINEAR);

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

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        float dt = GetFrameTime();
        float step = dt/SIMULATION_STEPS, step2 = step*step;

        // Update Physics - larger steps = better approximation
        for (int i = 0; i < SIMULATION_STEPS; i++)
        {
            float delta = theta1 - theta2;
            float sinD = sinf(delta), cosD = cosf(delta), cos2D = cosf(2*delta);
            float ww1 = w1*w1, ww2 = w2*w2;

            // Calculate a1
            float a1 = (-G*(2*m1 + m2)*sinf(theta1)
                         - m2*G*sinf(theta1 - 2*theta2)
                         - 2*sinD*m2*(ww2*L2 + ww1*L1*cosD))
                        /(L1*(2*m1 + m2 - m2*cos2D));

            // Calculate a2
            float a2 = (2*sinD*(ww1*L1*totalM
                         + G*totalM*cosf(theta1)
                         + ww2*L2*m2*cosD))
                        /(L2*(2*m1 + m2 - m2*cos2D));

            // Update thetas
            theta1 += w1*step + 0.5f*a1*step2;
            theta2 += w2*step + 0.5f*a2*step2;

            // Update omegas
            w1 += a1*step;
            w2 += a2*step;
        }

        // Calculate position
        Vector2 currentPosition = CalculateDoublePendulumEndPoint(l1, theta1, l2, theta2);
        currentPosition.x += (float)screenWidth/2;
        currentPosition.y += (float)screenHeight/2 - 100;

        // Draw to render texture
        BeginTextureMode(target);
            // Draw a transparent rectangle - smaller alpha = longer trails
            DrawRectangle(0, 0, screenWidth, screenHeight, Fade(BLACK, fateAlpha));

            // Draw trail
            DrawCircleV(previousPosition, trailThick, RED);
            DrawLineEx(previousPosition, currentPosition, trailThick*2, RED);
        EndTextureMode();

        // Update previous position
        previousPosition = currentPosition;
        //----------------------------------------------------------------------------------

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

            ClearBackground(BLACK);

            // Draw trails texture
            DrawTextureRec(target.texture, (Rectangle){ 0, 0, (float)target.texture.width, (float)-target.texture.height }, (Vector2){ 0, 0 }, WHITE);

            // Draw double pendulum
            DrawRectanglePro((Rectangle){ screenWidth/2.0f, screenHeight/2.0f - 100, 10*l1, lineThick },
                (Vector2){0, lineThick*0.5f}, 90 - RAD2DEG*theta1, RAYWHITE);

            Vector2 endpoint1 = CalculatePendulumEndPoint(l1, theta1);
            DrawRectanglePro((Rectangle){ screenWidth/2.0f + endpoint1.x, screenHeight/2.0f - 100 + endpoint1.y, 10*l2, lineThick },
                (Vector2){0, lineThick*0.5f}, 90 - RAD2DEG*theta2, RAYWHITE);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadRenderTexture(target);

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

    return 0;
}

//----------------------------------------------------------------------------------
// Module Functions Definition
//----------------------------------------------------------------------------------
// Calculate pendulum end point
static Vector2 CalculatePendulumEndPoint(float l, float theta)
{
    return (Vector2){ 10*l*sinf(theta), 10*l*cosf(theta) };
}

// Calculate double pendulum end point
static Vector2 CalculateDoublePendulumEndPoint(float l1, float theta1, float l2, float theta2)
{
    Vector2 endpoint1 = CalculatePendulumEndPoint(l1, theta1);
    Vector2 endpoint2 = CalculatePendulumEndPoint(l2, theta2);
    return (Vector2){ endpoint1.x + endpoint2.x, endpoint1.y + endpoint2.y };
}

From raylib 6.2. The original on GitHub.