FLTK tutorial

In this tutorial we see an introduction on how to make a graphical user interface (GUI) using C++ and the Fast Light Toolkit library. Our purpose in this tutorial is to simulate the collisions of circular objects moving at constant speed.

This tutorial is based on:
(1) The book “Programming: Principles and Practice using C++” by Bjarne Stroustrup, have a look at his website: http://www.stroustrup.com/Programming/
(2) The programming manual website of fltk: http://fltk.org/doc-1.3/

However, I simplified a lot the code of Bjarne Stroustrup’s graphics library, because I wanted to focus only on the basics.

Before we look at the code, let’s consider the physical situation of elastic collisions in the following video. In an elastic collision both the total momentum and kinetic energy of the system are conserved. Our purpose is to learn how to compute the future velocities of two objects after they have collided elastically with each other.

Part 1

Our purpose in part 1 is only to install the C++ and FLTK libraries, and to draw an empty window on the screen. The code is located here.

Part 2

Here we see how to make user-defined types of variables for a window and a point on the screen. We use these types in order to begin our GUI graphics library, which will allow us to separate the low-level code from our program. We also use the vim editor in order to save, compile and run our program with the press of a single key. The codes and the vimrc file is here.

Part 3

We see how to define a basic (minimal) shape superclass and three corresponding subclasses: lines, circles and text. We also draw a couple of shapes on the screen. The files are located here.

Part 4

We see how to define a basic (minimal) widget superclass and four corresponding subclasses: buttons, input / output boxes and sliders. We also attach a few widgets to our simulation window. Here are the codes.

Part 5

How to display a simulation of a circle bouncing against the walls of a 2D container in real-time. As the simulation is taking place, we are also able to change the speed of the circle through a slider input. Here are the codes.

Part 6

In this part of the tutorial we see how to simulate multiple circles colliding elastically with each other in real-time inside a two dimensional container. Here are the codes.

Part 7

In this final part of the tutorial we see how to output information from a real-time simulation into a text file, as well as into output boxes which are part of the GUI display. We then use Gnuplot from inside our program by clicking a button in the GUI in order to plot the data saved in the text file.

Thank you for watching, I hope you enjoyed this tutorial. Please let me know if you have any questions, comments or suggestions.