interpolation.c

Smooth rendering on top of a slow fixed-step simulation, using tick.alpha.

Smooth rendering on top of a slow fixed-step simulation, using tick.alpha.This demo exists to make one idea visible: when your simulation runs at a fixed rate (via a bj_app_fixed_step_fn callback) but your screen redraws faster, most frames fall between two simulation ticks. If you draw the raw simulation position, motion looks like it jumps once per tick. The [0, 1) factor tick.alpha lets you draw the in-between position instead, so motion looks smooth.

The program drives the physics at a deliberately low 10 Hz and draws two balls moving left to right:

• The top ball is drawn at prev + (curr - prev) * alpha, the interpolated position between the last two ticks. It glides.
• The bottom ball is drawn at the raw current position. With only ten updates a second it visibly stutters.

Same simulation, same data; the only difference is whether alpha is used at draw time.

How alpha gets to the drawing code

tick.alpha arrives in the bj_app_step_fn callback, but the drawing happens in the window's draw callback (bj_set_draw_callback), which is not handed a bj_tick_info. The demo bridges the two with a single variable: step stashes tick.alpha, and on_draw reads it. That is the normal pattern.

What you'll learn

• Why a fixed-step simulation needs interpolation to look smooth at higher render rates.
• How to keep the previous and current simulation state and blend them with tick.alpha.
• That the fixed-step rate (bj_set_fixed_step_rate) and the render rate (the default frame cap, bj_set_frame_rate) are independent: here 10 Hz physics under 60 Hz rendering.

See also

bj_tick_info, bj_app_fixed_step_fn, physics_particle.c, physics_kinematics.c

 
#include <banjo/app.h>
#include <banjo/main.h>
#include <banjo/bitmap.h>
#include <banjo/draw.h>
#include <banjo/event.h>
#include <banjo/system.h>
#include <banjo/window.h>
 
#define WIDTH    640
#define HEIGHT   360
#define BALL_R    24
#define SPEED    320.0f   /* pixels per second */
#define FIXED_HZ  10      /* deliberately low so the stutter is obvious */
#define TOP_Y    120      /* smooth (interpolated) ball */
#define BOT_Y    240      /* raw (un-interpolated) ball */
 
static bj_window* window = 0;
 
/* Physics state, advanced only in fixed_step at FIXED_HZ. We keep the
   previous position alongside the current one so the draw callback can
   interpolate between them. */
static float prev_x;
static float curr_x;
static float vx = SPEED;
 
/* The interpolation factor for the current render. The step callback
   receives it in tick.alpha and stashes it here; on_draw reads it. The
   draw callback isn't handed a bj_tick_info, so this hand-off is how
   alpha reaches the place that actually draws. */
static float render_alpha;
 
/* Advance the simulation by exactly one fixed tick (1 / FIXED_HZ s).
   Save the old position first so we can interpolate toward the new one. */
static void fixed_step(struct bj_app* app, struct bj_tick_info tick, void* ud) {
    (void)app; (void)ud;
    prev_x = curr_x;
    curr_x += vx * tick.delta;
    if (curr_x < BALL_R)          { curr_x = BALL_R;          vx = +SPEED; }
    if (curr_x > WIDTH - BALL_R)  { curr_x = WIDTH - BALL_R;  vx = -SPEED; }
}
 
static void on_draw(
    struct bj_window*        w,
    struct bj_render_target* target,
    const struct bj_rect*    dirty,
    void*                    user_data
) {
    (void)w; (void)dirty; (void)user_data;
    bj_bitmap* fb = bj_render_target_bitmap(target);
    bj_clear_bitmap(fb);
 
    const uint32_t green = bj_make_bitmap_pixel(fb, 0x40, 0xE0, 0x60);
    const uint32_t red   = bj_make_bitmap_pixel(fb, 0xE0, 0x50, 0x50);
 
    /* Smooth: render between the last two physics positions using alpha. */
    const float smooth_x = prev_x + (curr_x - prev_x) * render_alpha;
    bj_draw_filled_circle(fb, (int)smooth_x, TOP_Y, BALL_R, green);
 
    /* Raw: render the current physics position directly. At FIXED_HZ it
       only changes 10 times a second, so it visibly jumps. */
    bj_draw_filled_circle(fb, (int)curr_x, BOT_Y, BALL_R, red);
}
 
static void step(struct bj_app* app, struct bj_tick_info tick, void* user_data) {
    (void)user_data;
    render_alpha = (float)tick.alpha;   /* hand alpha to on_draw */
    bj_dispatch_events();
    bj_invalidate_window(window);       /* render every frame at the cap rate */
 
    if (bj_should_close_window(window)) {
        bj_quit_app(app, 0);
    }
}
 
static void* setup(struct bj_app* app, void* init_data) {
    (void)init_data;
    bj_set_fixed_step_rate(app, FIXED_HZ);  /* slow physics on purpose */
    if (!bj_begin(BJ_VIDEO_SYSTEM, 0)) {
        bj_quit_app(app, 1);
        return 0;
    }
    window = bj_bind_window("Interpolation: smooth (top) vs raw (bottom), ESC to quit",
                            100, 100, WIDTH, HEIGHT, 0, 0);
    bj_set_key_callback(bj_close_on_escape, 0);
    bj_set_draw_callback(window, on_draw, 0);
    prev_x = curr_x = BALL_R;
    return 0;
}
 
static void teardown(struct bj_app* app, void* user_data) {
    (void)app; (void)user_data;
    bj_unbind_window(window);
    bj_end();
}
 
int main(int argc, char* argv[]) {
    (void)argc; (void)argv;
    /* Frame rate stays at the default 60, so ~6 renders happen between
       each physics tick. That gap is exactly what alpha interpolates. */
    return bj_run_app(setup, step, fixed_step, teardown, 0);
}