C++ Graphics Introduction

In this page:

Console vs Graphics
Popular Graphics Libraries
The Game Loop Concept
Frame Rate and Delta Time
Coordinate Systems in Graphics

Console vs Graphics

Standard C++ I/O is text-only, printing characters to a terminal window one line at a time. Graphics libraries add the ability to open an actual window and draw shapes, images, and colors onto it pixel by pixel -- a fundamentally different rendering model that requires linking an external library like SFML, which on Ubuntu you'd install with sudo apt-get install libsfml-dev.

Example: Console vs Graphics

cpp

#include <iostream>

int main() {
	std::cout << "Text output via std::cout" << std::endl;
	// Graphics libraries like SFML instead open a window and draw
	// shapes/images pixel by pixel -- a different rendering model.
	return 0;
}

Popular Graphics Libraries

SFML is aimed at beginners and general 2D work with a clean, object-oriented API. SDL2 is the long-standing standard for 2D games and emulators, offering lower-level control. OpenGL sits a level below both, giving direct access to the GPU for high-performance 2D or full 3D rendering at the cost of a steeper learning curve.

Example: Popular Graphics Libraries

cpp

// SFML: beginner-friendly, object-oriented 2D API
// SDL2: lower-level, long-standing standard for 2D games/emulators
// OpenGL: direct GPU access for high-performance 2D or full 3D
#include <iostream>

int main() {
	std::cout << "SFML, SDL2, and OpenGL are the three main choices" << std::endl;
	return 0;
}

The Game Loop Concept

A game loop is the beating heart of any interactive graphics program: while the window stays open, it repeatedly processes queued input events, advances the program's internal state (like an object's position), and redraws the current frame -- typically dozens of times per second.

Example: The Game Loop Concept

cpp

#include <iostream>

int main() {
	bool windowOpen = true;
	int frame = 0;
	while (windowOpen && frame < 3) {
		// 1. process input events
		// 2. update program state
		// 3. redraw the current frame
		std::cout << "Frame " << frame << " rendered" << std::endl;
		frame++;
	}
	return 0;
}

Frame Rate and Delta Time

Frame rate (FPS) measures how many complete frames the loop renders each second -- higher generally looks smoother. Delta time is the elapsed duration of the most recent frame, and multiplying movement by delta time keeps animation speed consistent regardless of how fast or slow the loop happens to be running on a given machine.

Example: Frame Rate and Delta Time

cpp

#include <iostream>

int main() {
	double deltaTime = 0.016; // seconds since last frame (~60 FPS)
	double speed = 100.0;     // pixels per second
	double positionX = 0.0;

	positionX += speed * deltaTime;
	std::cout << "Moved to X=" << positionX << " this frame" << std::endl;
	return 0;
}

Coordinate Systems in Graphics

Most 2D graphics libraries place the origin (0, 0) at the window's top-left corner, with the X-axis increasing to the right and the Y-axis increasing downward -- the opposite vertical direction from the math coordinate system you may be used to, where Y increases upward.

Example: Coordinate Systems in Graphics

cpp

#include <iostream>

int main() {
	int x = 50, y = 20;
	std::cout << "(0,0) is top-left; X increases right, Y increases down" << std::endl;
	std::cout << "Point drawn at (" << x << ", " << y << ")" << std::endl;
	return 0;
}

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson C++ Interview Questions Advanced Next Lesson → C++ SFML Introduction