Programming Fundamentals

In this activity, you will learn how to manage windows with SplashKit.

A window is a rectangular area on the screen where graphical programs display visual elements and interact with the user. Windows are everywhere. If you're viewing this in a browser (such as Firefox, Chrome, or Safari) then the browser is open in a window. Familiar applications such as VS Code, the terminal, and file managers (Finder on macOS, File Explorer on Windows) all open in their own windows.

Setting Up

Step 1. Navigate to your SplashKit directory (the one created during SplashKit #1 - Getting Started).

cd splashkit

Step 2. Create a new directory for this activity and cd into it.

mkdir windows
cd windows

Step 3. Set up the windows directory.

1511 setup-splashkit-directory

Step 4.

Download splashkit_master.c here

Or, copy these file(s) to your CSE account using the following command:

1511 fetch-activity splashkit_master

Step 5. Open the SplashKit project directory in VS Code.

code .

SplashKit Windows

SplashKit includes a windows library that allows programs to open and close windows. Opening a window gives your program a dedicated space to display graphics and receive user input, while closing it is crucial for freeing up resources and providing a clear way for users to exit.

To use SplashKit's libraries add #include <splashkit.h> near the top of a .c file. Once you do this, you have a starting point for all of your SplashKit programs:

#include <splashkit.h>

int main(void) {
    // we will be adding more code here

    return 0;
}

Opening Windows

SplashKit's open_window() function creates a new window and displays it on the screen.

window open_window(string caption, int width, int height);

The following statement opens a window titled "My Window" with a width and height of 800 and 600 pixels respectively.

open_window("My Window", 800, 600);

Delay/Wait

Imagine you want to show a quick welcome message or instructions on the screen, but you don't want the program to instantly jump to the next step. By pausing for a couple of seconds you give the user time to understand what's being shown before continuing.

SplashKit provides a delay() function. Calling this will pause our program for a specified amount of time.

void delay(int milliseconds);

For example:

delay(7000);

This pauses program execution for 7 seconds (7000 milliseconds) before continuing.

Closing Windows

When you're finished with the window, you can close it with close_all_windows().

void close_all_windows(void);

We call this function with no arguments:

close_all_windows();

Putting It All Together

Combining these operations yields a short program:

#include <splashkit.h>

int main(void) {
    open_window("My Window", 800, 600);
    delay(7000);
    close_all_windows();

    return 0;
}

This program:

1. Opens a window titled "My Window" width and height of 800 and 600 pixels respectively.
2. Pauses program execution for 7 seconds, keeping the window open.
3. Closes the window before exiting.

Code Demo

#include <splashkit.h>

#define WIDTH 400
#define HEIGHT 240
#define DELAY_DURATION 4000

int main(void) {
    // window open_window(string caption, int width, int height);
    // Open a window of width 640 pixels and height 480 pixels
    open_window("My First Window", 640, 480);

    // void delay(int milliseconds);
    // Wait two seconds (2000 milliseconds)
    delay(2000);

    // void close_all_windows(void);
    // Close the window
    close_all_windows();

    // Open a second window, this time using #defined constants
    open_window("My Second Window", WIDTH, HEIGHT);
    delay(DELAY_DURATION);
    close_all_windows();

    // Open a third window, this time using variables as arguments
    int width = 960;
    int height = 360;
    int duration = 3000;
    open_window("My Third Window", width, height);
    delay(duration);
    close_all_windows();

    return 0;
}

Activity

Now you have a chance to practice what you've learned!

Create a program splashkit_windows.c. It should:

• Prompt the user for a width.
• Prompt the user for a height.
• Prompt the user for a duration.
• Open a window of the given size.
• Wait for the specified duration, keeping the window open.
• Close the window.

Examples

Example 1: Opening a 400×300 Window for 5 Seconds

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a window width (pixels): 400
Enter a window height (pixels): 300
Enter a duration (seconds): 5

After the user enters these values, a window should appear as shown below and automatically close after 5 seconds.

Example 2: Opening a 600×200 Window for 12 Seconds

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a window width (pixels): 600
Enter a window height (pixels): 200
Enter a duration (seconds): 12

After the user enters these values, a window should appear as shown below and automatically close after 12 seconds.

Assumptions/Restrictions/Clarifications

• There are no autotests for this activity.

Summary

In this activity, you learned how to work with three functions to manage windows:

1. open_window(caption, width, height) - Opens a new window on the screen.
2. delay(milliseconds) - Pauses program execution.
3. close_all_windows() - Closes all windows.

List of New Functions

At the end of each activity, you'll find a list of all new function prototypes.

Keeping a list of these functions as you progress will be useful for whenever you need a quick refresher.

// Window Management
window open_window(string caption, int width, int height);
void close_all_windows(void);

// Program Control
void delay(int milliseconds);

Welcome to the  c o l o u r f u l  world of SplashKit!

In this activity, you'll discover how colours are used in SplashKit to make your programs bright and visually appealing.

With an understanding of colours, you will be able to control how shapes and text appear when displayed by your program. You'll learn:

• How colours are represented in SplashKit.
• How to use some fun, built-in colours.
• How to create your very own custom colours using RGB values.

Setting Up

Step 1. Navigate to your SplashKit directory (the one created during SplashKit #1 - Getting Started).

cd splashkit

Step 2. Create a new directory for this activity and cd into it.

mkdir colours
cd colours

Step 3. Set up the colours directory.

1511 setup-splashkit-directory

Step 4.

Download splashkit_master.c here

Or, copy these file(s) to your CSE account using the following command:

1511 fetch-activity splashkit_master

Step 5. Open the SplashKit project directory in VS Code.

code .

SplashKit Colours

SplashKit provides a color library that includes:

• 144 built-in preset colours.
• Functions to define over 16 million custom colours.
• A color data type to store our colours as variables.

#include <splashkit.h>

int main(void) {
    open_window("My Window", 800, 600);

    // TODO: we will add code here

    delay(2000);

    close_all_windows();
    return 0;
}

skm clang++ playground.c -o playground
./playground

Clear and Refresh

To explore SplashKit's colours, we'll be changing the background colour of our window.

When you call clear_screen(), SplashKit changes the window's background to the colour you specify.

For example, the following statement clears our window and paints the background black:

clear_screen(COLOR_BLACK);

Note that calling clear_screen() alone won't display the new colour right away. SplashKit waits until you call refresh_screen() before showing any changes. So to make the update visible, follow the clear_screen() call with:

refresh_screen();

Calling refresh_screen() applies all pending updates to the window, allowing you to see your changes.

In later activities, you will be drawing shapes, text, and images on the window. Whether you're clearing the background or adding new elements, changes will not appear on the window until you call refresh_screen(). This function applies all pending updates since the last refresh, making your changes visible on the window.

#include <splashkit.h>

int main(void) {
    open_window("Clear and Refresh", 800, 600);
    delay(2000);

    // Clear the window and colour it black.
    clear_screen(COLOR_BLACK);
    // Refresh the screen to display our changes.
    refresh_screen();
    // Pause the program for 2 seconds.
    delay(2000);

    close_all_windows();
    return 0;
}

Preset Colours

We're not limited to COLOR_BLACK. SplashKit provides 144 built-in presets!

Here are a few to choose from:

• COLOR_ORANGE_RED
• COLOR_DEEP_SKY_BLUE
• COLOR_PURPLE
• COLOR_DARK_TURQUOISE

These values are like #defined constants, but for colours. Whenever a SplashKit function expects a colour parameter, we can use these as arguments. For example, we could call clear_screen() with:

• clear_screen(COLOR_ORANGE_RED);
• clear_screen(COLOR_PURPLE);
• clear_screen(COLOR_DARK_TURQUOISE);

#include <splashkit.h>

#define DELAY_DURATION 2000

int main(void) {
    open_window("Using Preset Colours", 640, 480);

    // Black
    clear_screen(COLOR_BLACK);
    refresh_screen();
    delay(DELAY_DURATION);

    // Orange Red
    clear_screen(COLOR_ORANGE_RED);
    refresh_screen();
    delay(DELAY_DURATION);

    // Sky Blue
    clear_screen(COLOR_DEEP_SKY_BLUE);
    refresh_screen();
    delay(DELAY_DURATION);

    // Purple
    clear_screen(COLOR_PURPLE);
    refresh_screen();
    delay(DELAY_DURATION);

    // Dark Turquoise
    clear_screen(COLOR_DARK_TURQUOISE);
    refresh_screen();
    delay(DELAY_DURATION);

    close_all_windows();
    return 0;
}

🌈 More Preset Colours

For more preset colours:

• Visit SplashKit's Colour Generator.
• Scroll down to the Colour Palette.
• Click on a colour.
• The name will appear below.

In the example above, the selected colour is COLOR_MEDIUM_BLUE.

The color Data Type

SplashKit provides a custom data type called color. Just like an int holds a number, a color holds a colour.

For example, you can assign a preset colour to a variable and pass it around your program:

color my_colour = COLOR_BLACK;
clear_screen(my_colour);
refresh_screen();

This code snippet:

• Declares a color variable named my_colour.
• Assigns it the value COLOR_BLACK.
• Uses my_colour to paint the window black.
• Calls refresh_screen() to display the change of colour.

Custom Colours

If the preset colours aren't enough, SplashKit gives you full control to construct over 16 million unique colours with an RGB colour model.

You can create colours by specifying how much of each colour component (red, green, and blue) to mix together. By mixing different amounts, you can produce just about any colour you can think of.

Each component can be assigned a value from 0 to 255 where:

• 0 means "none of that colour".
• 255 means "as much of that colour as possible".

These components are mixed with the rgb_color() function

color rgb_color(int red, int green, int blue);

which takes in three int values, one for each colour component, and returns a variable of type color.

Primary RGB Colours: Red, Green, Blue

These examples demonstrate how setting one component to its maximum value (255) while keeping the others at 0 results in the primary colours of the RGB colour model.

Any Colour You Like

Experiment with different values in rgb_color() to invent your own unique shades!

Here are four extra colours to spark your creativity.

Colours For All

Approximately 4-5% of the population lives with a Colour Vision Deficiency that affects how they perceive and distinguish colours. Although no single colour palette ensures universal accessibility, using a palette such as Okabe-Ito (below) can help make colous more enjoyable for all users.

Black, White, and Grey

A colour appears as a shade of grey when all three RGB components have the same value.

#include <splashkit.h>

#define DELAY_DURATION 2000

int main(void) {
    open_window("RGB Colours", 640, 480);

    color deep_blue  = rgb_color(  0, 114, 178);
    color vermillion = rgb_color(213,  94,   0); 
    color blue_green = rgb_color(  0, 158, 115); 
    color yellow     = rgb_color(240, 228,  66); 

    // Deep Blue
    clear_screen(deep_blue);
    refresh_screen();
    delay(DELAY_DURATION);

    // Vermillion
    clear_screen(vermillion);
    refresh_screen();
    delay(DELAY_DURATION);

    // Blue Green
    clear_screen(blue_green);
    refresh_screen();
    delay(DELAY_DURATION);

    // Yellow
    clear_screen(yellow);
    refresh_screen();
    delay(DELAY_DURATION);

    close_all_windows();
    return 0;
}

🌈 More Custom Colours

For more custom colours:

• Visit SplashKit's Colour Generator.
• Scroll down to the Colour Generator.
• Set values for red, green, and blue.
• Preview the RGB colour.

In the example above, the warm orange colour can be assigned to a variable with:

color warm_orange = rgb_color(255, 183, 77);

Activity

Create a program splashkit_colours.c. It should:

• Prompt the user for a red value from 0 to 255.
• Prompt the user for a green value 0 to 255.
• Prompt the user for a blue value 0 to 255.
• Open a window 960 pixels wide and 360 pixels in height.
• Display the corresponding RGB colour for 5 seconds.
• Close the window.

Examples

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a RED value (from 0 to 255): 0
Enter a GREEN value (from 0 to 255): 191
Enter a BLUE value (from 0 to 255): 255

After the user enters these values, a window should appear as shown below, displaying a deep sky blue colour for 5 seconds before closing.

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a RED value (from 0 to 255): 255
Enter a GREEN value (from 0 to 255): 69
Enter a BLUE value (from 0 to 255): 0

Similarly, a window should appear as shown below, displaying an orange red colour for 5 seconds before closing.

Assumptions/Restrictions/Clarifications

• There are no autotests for this activity.

Summary

In this activity, you learned how to work with three functions to manage colours:

1. clear_screen(color) - Clears the window and changes the background colour.
2. refresh_screen() - Applies changes to display them on the window.
3. rgb_color(red, green, blue) - Creates a colour from RGB components.

Types and Functions

// Screen Management
void clear_screen(color clr);
void refresh_screen(void);

// Colours
color rgb_color(int red, int green, int blue);

// Okabe-Ito Accessible Colour Palette
color black          = rgb_color(  0,   0,   0);
color orange         = rgb_color(230, 159,   0);
color sky_blue       = rgb_color( 86, 180, 233);
color bluish_green   = rgb_color(  0, 158, 115);
color yellow         = rgb_color(240, 228,  66);
color blue           = rgb_color(  0, 114, 178);
color vermillion     = rgb_color(213,  94,   0);
color reddish_purple = rgb_color(204, 121, 167);

// Window Management
window open_window(string caption, int width, int height);
void close_all_windows(void);

// Program Control
void delay(int milliseconds);

// Screen Management
void clear_screen(color clr);
void refresh_screen(void);

// Colours
color rgb_color(int red, int green, int blue);

// Okabe-Ito Accessible Colour Palette
color black          = rgb_color(  0,   0,   0);
color orange         = rgb_color(230, 159,   0);
color sky_blue       = rgb_color( 86, 180, 233);
color bluish_green   = rgb_color(  0, 158, 115);
color yellow         = rgb_color(240, 228,  66);
color blue           = rgb_color(  0, 114, 178);
color vermillion     = rgb_color(213,  94,   0);
color reddish_purple = rgb_color(204, 121, 167);