Introduction to Programming

Chapter 5

Input and Output (I/O)

The “raylib” library

https://www.raylib.com/

• Library for creating videogames in C++ (and many other languages)

• Cross platform (works on Windows, linux, macOS, android, iOS etc)
• Purely programming library
• No GUI tools or editors (unlike Unity, Unreal Engine etc)
Structure of a program using raylib
#include "raylib.h"
int main() { Initialize a window
InitWindow(W, H, "Window Title"); width is W pixels
height is H pixels
while (!WindowShouldClose()) {
BeginDrawing();
Detect window close button or ESC key
main // draw here
loop
EndDrawing();
}

CloseWindow(); Close window and OpenGL context

}
raylib library
#include "raylib.h" https://www.raylib.com/cheatsheet/cheatsheet.html
// draw a line
void DrawLine(int startPosX, int startPosY, int endPosX, int endPosY, Color color)
// draw a color-filled circle
void DrawCircle(int centerX, int centerY, float radius, Color color)
// Draw circle outline
void DrawCircleLines(int centerX, int centerY, float radius, Color color)
// draw a color-filled rectangle
void DrawRectangle(int posX, int posY, int width, int height, Color color)
// Draw rectangle outline
void DrawRectangleLines(int posX, int posY, int width, int height, Color color)
// draw text (using default font)
void DrawText(const char *text, int posX, int posY, int fontSize, Color color)
// Load texture from file into GPU memory (VRAM)
Texture2D LoadTexture(const char *fileName);
// Draw a Texture2D
void DrawTexture(Texture2D texture, int posX, int posY, Color tint);
... and hundreds more
 Hello raylib
int c = 400*sqrt(3.0) / 2.0; 𝑐 is height of
InitWindow(600, 600, "Hello raylib"); equilateral triangle with
while (!WindowShouldClose()) { base length 400

BeginDrawing(); (100,100) (500,100)

DrawLine(100, 100, 500, 100, WHITE);
DrawLine(100, 100, 300, 100+c, WHITE); draw
DrawLine(300, 100+c, 500, 100, WHITE); triangle

DrawText("Hello World!", 200, 200, 35, BLUE);

(300,100 + 𝑐)

DrawCircle(300,300, 10, RED);

EndDrawing(); draw circle centered
} at (300,300) of
radius 10
CloseWindow();
Running raylib program
Install raylib (in MSYS2): Open MSYS2 terminal and type
pacman –S mingw-w64-ucrt-x86_64-raylib

Compile program:
g++ hello-raylib.cpp -lraylib

BeginDrawing();
DrawLine(100, 100, 500, 100, WHITE);
DrawLine(100, 100, 300, 100+c, WHITE);
DrawLine(300, 100+c, 500, 100, WHITE);

DrawText("Hello World!", 200, 200, 35, BLUE);

DrawCircle(300,300, 10, RED);

EndDrawing();
Coordinate transformation
Coordinates of raylib window Coordinates of something we
of width W+1 and height H+1 would like to draw
0
1 original coordinates
(𝑥𝑚𝑖𝑛, 𝑦𝑚𝑖𝑛)
(floating-point numbers)
2 …
3
⋮ ⋱
(𝑠𝑥, 𝑠𝑦)
need to be transformed to
…
integer screen coordinates
H (𝑡𝑥, 𝑡𝑦)
0 1 2 3 4 5 W

(𝑥𝑚𝑎𝑥, 𝑦𝑚𝑎𝑥)

Transformation 𝑠𝑥 − 𝑥𝑚𝑖𝑛 𝑠𝑦 − 𝑦𝑚𝑖𝑛

(sx,sy) → (tx,ty) 𝑡𝑥 = 𝑟𝑜𝑢𝑛𝑑 ×𝑊 𝑡𝑦 = 𝑟𝑜𝑢𝑛𝑑 ×𝐻
𝑥𝑚𝑎𝑥 − 𝑥𝑚𝑖𝑛 𝑦𝑚𝑎𝑥 − 𝑦𝑚𝑖𝑛
An application: data visualization
// width, height, max number of points in the input usa13509.txt
const int W=800, H=500, N=13510; int x[N], y[N];
245552 490000 min_x max_x
669905 1244962 min_y max y
// read coordinates of bounding box from standard input
double xmin, xmax, ymin, ymax;
245552.7780 817827.7780
std::cin >> xmin >> xmax >> ymin >> ymax;
247133.3330 810905.5560
247205.5560 810188.8890 longitude latitude list
// read points from standard input of 13509 US cities
249238.8890 806280.5560
double px, py; int count = 0;
read longitude 250111.1110 805152.7780
while(std::cin >> px >> py) {
...
x[count] = round((px-xmin)/(xmax-xmin) * W); latitude pair and
y[count] = round((py-ymin)/(ymax-ymin) * H); transform to
count++; screen coordinates
} plot-filter.exe < usa13509.txt
InitWindow(W+1, H+1, "Plot corrdinates");
while (!WindowShouldClose()) {
BeginDrawing();
// fill window with WHITE
ClearBackground(WHITE);
for(int i=0; i<count; i++)
DrawCircle(x[i],y[i],2,BLUE);
EndDrawing();
}
CloseWindow();
 raylib application: plotting a function
Goal. Plot f x = sin 4𝑥 + cos 10𝑥 in the interval 0,2𝜋 Step 1: Function evaluation and coordinates transformation
𝒊 0 1 … i … N
0 1 𝑖 𝑁
𝒙𝒊 2𝜋 × 2𝜋 × … 2𝜋 × … 2𝜋 ×
𝑁 𝑁 𝑁 𝑁
𝒚𝒊 f(x0) f(x1) … f(xi) … f(xN)
int x[N+1], y[N+1];
for(int i=0; i<=N; i++) {
double px = i*2*pi/N;
double py = sin(4*px) + cos(10*px);
x[i] = round((px-xmin)/(xmax-xmin) * W);
Method: y[i] = round((py-ymin)/(ymax-ymin) * H);
• Evaluate function on 𝑁 + 1 values between 0 and 2𝜋 }
• For every 𝑖, draw a line between (𝑥𝑖 , 𝑦𝑖 ) and (𝑥𝑖+1 , 𝑦𝑖+1 )
Step 2: Draw lines
ClearBackground(WHITE);
for(int i=0; i<N; i++)
DrawLine(x[i], y[i], x[i+1], y[i+1], BLUE);
 raylib application: plotting a function
const int W=800, H=600;
const double pi=3.1415927;
const double xmin=0, xmax=2*pi, ymin=-2, ymax=2;
const int N = 200; // No. of sampling points
sample size
N=20
int x[N+1], y[N+1];
for(int i=0; i<=N; i++) {
double px = i*2*pi/N; compute (xi,yi)
double py = sin(4*px) + cos(10*px);
x[i] = round((px-xmin)/(xmax-xmin) * W); transform to Lesson 1: Plotting is easy
screen
y[i] = round((py-ymin)/(ymax-ymin) * H);
coordinates
}

InitWindow(W+1, H+1, "Plot function");

while (!WindowShouldClose()) {
BeginDrawing(); sample size
ClearBackground(WHITE); N=200
for(int i=0; i<N; i++)
DrawLine(x[i], y[i], x[i+1], y[i+1], BLUE);
EndDrawing();
} Lesson 2: Take a sufficiently large sample—
otherwise you might miss something!
CloseWindow();
 Animation
int main() {
To create animation with raylib InitWindow(W, H, "Window Title");
• Set target frames per second (FPS) SetTargetFPS(60);
• Repeat the following: while (!WindowShouldClose()) {
• Clear the screen. // update objects coordinates here
• Move the object.
• Draw the object. BeginDrawing();
ClearBackground(WHITE);
// draw here
When display time is much greater than the
screen-clear time, we have the illusion of motion. EndDrawing();
}

CloseWindow();
}
Animation: bouncing ball
y
Ball has position (𝑥, 𝑦) and
constant velocity (𝑣𝑥, 𝑣𝑦).
y+vy

To move the ball:

x x+vx
update position to (𝑥 + 𝑣𝑥, 𝑦 + 𝑣𝑦).

If the ball hits a vertical wall:

set 𝑣𝑥 to −𝑣𝑥.

If the ball hits a horizontal wall:

set 𝑣𝑦 to −𝑣𝑦.
 Animation: bouncing ball
const int W=800, H=450;
int x=W/2, y=H/2;
int vx=5, vy=4, r=10;

InitWindow(W, H, "Bouncing ball");

SetTargetFPS(60); // draw 60 frames per seconds

while (!WindowShouldClose()) {
x = x + vx; update ball position
y = y + vy;
if(x+r >= W || x-r <= 0) check collision with vertical wall
vx = -vx;
if(y+r >= H || y-r <= 0) check collision with horizontal wall
vy = -vy;

BeginDrawing();
ClearBackground(WHITE);
DrawCircle(x, y, r, BLUE);
EndDrawing();
}
CloseWindow();