Skip to content
SplashKit
Check out how to use the Graphics functions!

Graphics

Simple Usage Examples

Fill Circle

Basic Blue Circle

The following code shows examples of using Fill Circle to show how to draw a filled-in blue circle.

#include "splashkit.h"


int main()
{
    open_window("Fill Circle", 800, 600);


    clear_screen();
    fill_circle(COLOR_BLUE, 300, 300, 200);
    refresh_screen();


    delay(4000);


    close_all_windows();


    return 0;
}

Output:

fill_circle-1-simple example

Fill Ellipse

Basic Blue Ellipse

The following code shows examples of using Fill Ellipse to show how to draw a filled-in blue ellipse.

#include "splashkit.h"


int main()
{
    open_window("Fill Ellipse", 800, 600);


    clear_screen();
    fill_ellipse(COLOR_BLUE, 200, 200, 400, 200);
    // Added rectangle with same arguments as above for x, y, width and height
    draw_rectangle(COLOR_RED, 200, 200, 400, 200);
    refresh_screen();


    delay(4000);


    close_all_windows();


    return 0;
}

Output:

fill_ellipse-1-simple example

Clear Screen

Background Color

The following code shows an example of using Clear Screen to change the background color to blue.

#include "splashkit.h"


#include "splashkit.h"


int main()
{
    open_window("Blue Background", 800, 600);


    clear_screen(COLOR_BLUE);
    refresh_screen(60);
    delay(4000);


    close_all_windows();


    return 0;
}

Output:

clear_screen-1-simple example

Refresh Screen

House Drawing

The following code shows examples of using Refresh Screen to show how double buffering works.

#include "splashkit.h"


int main()
{
    open_window("House Drawing", 800, 600);


    clear_screen(COLOR_WHITE);
    refresh_screen();
    delay(1000);


    fill_ellipse(COLOR_BRIGHT_GREEN, 0, 400, 800, 400);
    refresh_screen();
    delay(1000);


    fill_rectangle(COLOR_GRAY, 300, 300, 200, 200);
    refresh_screen();
    delay(1000);


    fill_triangle(COLOR_RED, 250, 300, 400, 150, 550, 300);
    refresh_screen();
    delay(5000);


    close_all_windows();


    return 0;
}

Output:

refresh_screen-1-simple example

Draw Bitmap Named

Basic Bitmap Drawing

The following code shows an example of using Draw Bitmap to display a Bitmap image of the SplashKit logo in a graphics Window.

#include "splashkit.h"


int main()
{
    open_window("Basic Bitmap Drawing", 315, 330);


    load_bitmap("skbox", "skbox.png"); // Load bitmap image


    while (!quit_requested())
    {
        process_events();


        clear_screen(rgb_color(67, 80, 175));
        draw_bitmap("skbox", 50, 50); // draw bitmap image
        refresh_screen();
    }
    close_all_windows();


    return 0;
}

Output:

draw_bitmap_named-1-simple example

Hello World! This is SplashKit!

The following code shows a fun example of using Draw Bitmap to create a fun animation/video. This example was created by someone that grew up as a “horse girl” and is reminded of the Saddle Club intro theme song (played in this example) every time she creates a new “hello world” program.

Originally created for the programmers.guide website.

#include "splashkit.h"


int main()
{
    // Download resources
    download_sound_effect("Hello World", "https://programmers.guide/resources/code-examples/part-0/hello-world-snippet-saddle-club.ogg", 443);
    download_font("main", "https://programmers.guide/resources/code-examples/part-0/Roboto-Italic.ttf", 443);
    download_bitmap("Earth", "https://programmers.guide/resources/code-examples/part-0/earth.png", 443);
    download_bitmap("SmallEarth", "https://programmers.guide/resources/code-examples/part-0/earth-small.png", 443);
    download_bitmap("SplashKitBox", "https://programmers.guide/resources/code-examples/part-0/skbox.png", 443);


    open_window("Hello World: Using Resources with SplashKit", 800, 600);
    play_sound_effect("Hello World");


    clear_screen(COLOR_WHITE);
    draw_text("Anyone remember the \"Hello World\" Saddle Club song?", COLOR_BLACK, "main", 30, 40, 200);
    refresh_screen();
    delay(2500);


    clear_screen(COLOR_WHITE);


    // H
    draw_bitmap("SmallEarth", 20, 100);
    draw_bitmap("SmallEarth", 20, 130);
    draw_bitmap("SmallEarth", 20, 160);
    draw_bitmap("SmallEarth", 20, 190);
    draw_bitmap("SmallEarth", 20, 220);
    draw_bitmap("SmallEarth", 52, 160);
    draw_bitmap("SmallEarth", 84, 100);
    draw_bitmap("SmallEarth", 84, 130);
    draw_bitmap("SmallEarth", 84, 160);
    draw_bitmap("SmallEarth", 84, 190);
    draw_bitmap("SmallEarth", 84, 220);
    refresh_screen();
    delay(200);


    // E
    draw_bitmap("SmallEarth", 148, 100);
    draw_bitmap("SmallEarth", 148, 130);
    draw_bitmap("SmallEarth", 148, 160);
    draw_bitmap("SmallEarth", 148, 190);
    draw_bitmap("SmallEarth", 148, 220);
    draw_bitmap("SmallEarth", 180, 100);
    draw_bitmap("SmallEarth", 212, 100);
    draw_bitmap("SmallEarth", 180, 160);
    draw_bitmap("SmallEarth", 180, 220);
    draw_bitmap("SmallEarth", 212, 220);
    refresh_screen();
    delay(200);


    // L
    draw_bitmap("SmallEarth", 276, 100);
    draw_bitmap("SmallEarth", 276, 130);
    draw_bitmap("SmallEarth", 276, 160);
    draw_bitmap("SmallEarth", 276, 190);
    draw_bitmap("SmallEarth", 276, 220);
    draw_bitmap("SmallEarth", 308, 220);
    draw_bitmap("SmallEarth", 340, 220);
    refresh_screen();
    delay(200);


    // L
    draw_bitmap("SmallEarth", 404, 100);
    draw_bitmap("SmallEarth", 404, 130);
    draw_bitmap("SmallEarth", 404, 160);
    draw_bitmap("SmallEarth", 404, 190);
    draw_bitmap("SmallEarth", 404, 220);
    draw_bitmap("SmallEarth", 436, 220);
    draw_bitmap("SmallEarth", 468, 220);
    refresh_screen();
    delay(200);


    // O
    draw_bitmap("SmallEarth", 530, 160);
    draw_bitmap("SmallEarth", 622, 160);
    draw_bitmap("SmallEarth", 540, 128);
    draw_bitmap("SmallEarth", 560, 100);
    draw_bitmap("SmallEarth", 592, 100);
    draw_bitmap("SmallEarth", 612, 128);
    draw_bitmap("SmallEarth", 540, 192);
    draw_bitmap("SmallEarth", 560, 220);
    draw_bitmap("SmallEarth", 592, 220);
    draw_bitmap("SmallEarth", 612, 192);
    refresh_screen();
    delay(500);


    // World
    draw_bitmap("Earth", 100, 350);
    refresh_screen();
    delay(2000);


    // SplashKit ("Me")
    draw_bitmap("SplashKitBox", 450, 300);
    draw_text("SplashKit!", COLOR_BLACK, "main", 50, 450, 530);
    refresh_screen();
    delay(2000);


    close_all_windows();


    return 0;
}

Output:

Fill Rectangle

Basic Blue Rectangle

The following code shows examples of using Fill Rectangle to show how to draw a filled-in blue rectangle.

#include "splashkit.h"


int main()
{
    open_window("Fill rectangle", 800, 600);


    clear_screen();
    fill_rectangle(COLOR_BLUE, 200, 200, 200, 100);
    refresh_screen();


    delay(4000);


    close_all_windows();


    return 0;
}

Output:

fill_rectangle-1-simple example

Fill Triangle

Basic Red Triangle

The following code demonstrates how to use the Fill Triangle function to draw a simple red-colored filled triangle. It creates a triangle with specified coordinates and fills it with red color.

#include "splashkit.h"


int main()
{
    open_window("Fill triangle Example", 800, 600);
    clear_screen();


    fill_triangle(COLOR_RED, 100, 100, 200, 200, 300, 100);
    refresh_screen();


    delay(5000);
    close_all_windows();


    return 0;
}

Output:

fill_triangle-1-simple example

Fill Triangle On Bitmap

Hooray! A Red Hat

The following code shows an example of using the Fill Triangle On Bitmap function to draw a red triangle on a loaded bitmap.

#include "splashkit.h"


int main()
{
    // Open a window
    open_window("Happy Hat", 618, 618);


    // Load the bitmaps for sad and smiling emojis (https://openmoji.org/library/#group=smileys-emotion)
    bitmap sad_emoji = load_bitmap("sad_emoji", "sad_emoji.png");
    bitmap smiling_emoji = load_bitmap("smiling_emoji", "smiling_emoji.png");


    // Draw the sad emoji and add a hat
    clear_screen(COLOR_BLACK);
    draw_bitmap(sad_emoji, 0, 0);
    refresh_screen();
    delay(1000);


    // Draw a triangle hat on the smiling emoji
    fill_triangle_on_bitmap(smiling_emoji, COLOR_RED, 100, 200, 309, 20, 520, 200);


    // Clear screen and switch to the smiling emoji
    clear_screen(COLOR_BLACK);
    draw_bitmap(smiling_emoji, 0, 0);
    refresh_screen();
    delay(1000);


    // Spin the smiling emoji with the hat
    for (int i = 0; i < 360; i++)
    {
        clear_screen(COLOR_BLACK);
        draw_bitmap(smiling_emoji, 0, 0, option_rotate_bmp(i));
        refresh_screen();
        delay(10);
    }


    // Free the bitmap resource
    free_all_bitmaps();
    // Close all windows
    close_all_windows();


    return 0;
}

Output:

fill_triangle_on_bitmap-1-simple example