easings ball
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 - easings ball
//!
//! Zig-API translation of examples/shapes/shapes_easings_ball.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
pub fn main() void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.initWindow(screen_width, screen_height, "raylib [shapes] example - easings ball");
defer rl.closeWindow(); // Close window and OpenGL context
// Ball variable value to be animated with easings
var ball_position_x: i32 = -100;
var ball_radius: i32 = 20;
var ball_alpha: f32 = 0.0;
var state: u32 = 0;
var frames_counter: i32 = 0;
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
switch (state) {
0 => { // Move ball position X with easing
frames_counter += 1;
ball_position_x = @intFromFloat(reasings.easeElasticOut(@floatFromInt(frames_counter), -100, screen_width / 2.0 + 100, 120));
if (frames_counter >= 120) {
frames_counter = 0;
state = 1;
}
},
1 => { // Increase ball radius with easing
frames_counter += 1;
ball_radius = @intFromFloat(reasings.easeElasticIn(@floatFromInt(frames_counter), 20, 500, 200));
if (frames_counter >= 200) {
frames_counter = 0;
state = 2;
}
},
2 => { // Change ball alpha with easing (background color blending)
frames_counter += 1;
ball_alpha = reasings.easeCubicOut(@floatFromInt(frames_counter), 0.0, 1.0, 200);
if (frames_counter >= 200) {
frames_counter = 0;
state = 3;
}
},
3 => { // Reset state to play again
if (rl.isKeyPressed(.enter)) {
// Reset required variables to play again
ball_position_x = -100;
ball_radius = 20;
ball_alpha = 0.0;
state = 0;
}
},
else => {},
}
if (rl.isKeyPressed(.r)) frames_counter = 0;
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white);
if (state >= 2) rl.drawRectangle(0, 0, screen_width, screen_height, .green);
rl.drawCircle(ball_position_x, 200, @floatFromInt(ball_radius), rl.fade(.red, 1.0 - ball_alpha));
if (state == 3) rl.drawText("PRESS [ENTER] TO PLAY AGAIN!", 240, 200, 20, .black);
}
}/*******************************************************************************************
*
* raylib [shapes] example - easings ball
*
* Example complexity rating: [★★☆☆] 2/4
*
* Example originally created with raylib 2.5, 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
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
const int screenWidth = 800;
const int screenHeight = 450;
InitWindow(screenWidth, screenHeight, "raylib [shapes] example - easings ball");
// Ball variable value to be animated with easings
int ballPositionX = -100;
int ballRadius = 20;
float ballAlpha = 0.0f;
int state = 0;
int framesCounter = 0;
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) // Move ball position X with easing
{
framesCounter++;
ballPositionX = (int)EaseElasticOut((float)framesCounter, -100, screenWidth/2.0f + 100, 120);
if (framesCounter >= 120)
{
framesCounter = 0;
state = 1;
}
}
else if (state == 1) // Increase ball radius with easing
{
framesCounter++;
ballRadius = (int)EaseElasticIn((float)framesCounter, 20, 500, 200);
if (framesCounter >= 200)
{
framesCounter = 0;
state = 2;
}
}
else if (state == 2) // Change ball alpha with easing (background color blending)
{
framesCounter++;
ballAlpha = EaseCubicOut((float)framesCounter, 0.0f, 1.0f, 200);
if (framesCounter >= 200)
{
framesCounter = 0;
state = 3;
}
}
else if (state == 3) // Reset state to play again
{
if (IsKeyPressed(KEY_ENTER))
{
// Reset required variables to play again
ballPositionX = -100;
ballRadius = 20;
ballAlpha = 0.0f;
state = 0;
}
}
if (IsKeyPressed(KEY_R)) framesCounter = 0;
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
if (state >= 2) DrawRectangle(0, 0, screenWidth, screenHeight, GREEN);
DrawCircle(ballPositionX, 200, (float)ballRadius, Fade(RED, 1.0f - ballAlpha));
if (state == 3) DrawText("PRESS [ENTER] TO PLAY AGAIN!", 240, 200, 20, BLACK);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}From raylib 6.2. The original on GitHub.