C++ is a hybrid language, supporting both the object-oriented way of designing programs using classes and objects, and the procedural way of building programs using functions as the basic building blocks.

"React" is a typical hybrid (O-O and procedural) C++ program. The main() function uses a Stopwatch class instance (an object) to measure the user's reaction time. The rest of the program is procedural.

The program assesses the user's reflexes by measuring the time it takes to press a key when the word "GO!" appears after a random time lag. The stopwatch is used to measure the reaction time very accurately. You can see a typical time in the screen capture above.

As we build React and see how the program works, we'll also learn how to build C++ projects like this one with Quincy.



Before we start

Create a "react" subdirectory somewhere you choose to build this example.

Get the example from the zip file: image: files react.zip

Save the archive into the new "react" subdirectory, and extract the source files from the archive.

The zip archive contains the 3 source files (.h, .cpp) shown above. It does not include the Quincy project file react[react.exe].PRJ.
We will create that project file as part of this tutorial.
___________

Creating a new "react" project

The C++ code for "react" is in three source files.
Two files: Stopwatch.h and Stopwatch.cpp contain the code for the Stopwatch class. File react.cpp contains the code that displays the GO! sign, and uses a Stopwatch object to measure the reaction time.

Quincy can help you manage a project composed of several files like this one. For this you need to create a project definition and save it in a project file. Once this is done, you will be able to compile files that need to be compiled, and link the result into an executable program react.exe with a single click of the mouse or a key press.

Creating a Quincy project is very simple, really.
Open the menu: File -> New -> Project. The project properties window opens:

For the Target Name, enter "react" (without the quote marks, of course).

For the Target path, enter (or browse to) the path of your "react" project directory.

Leave the Working directory entry blank.

The react project Type of Build is a WinBGIm GUI application, as we use the WinBGIm graphics library for the "GO!" window.

Make sure you un-tick the "With Console" tick box; we do not want a "DOS" window for this project!

- Click OK.

project window
Quincy project window

The "react" project window opens.               project files
- Right-click into the window and "Insert File(s)" Stopwatch.cpp and react.cpp.

Note that ".cpp" files only are included into projects. Not header files.
Header files are never compiled directly. A header (.h) file is compiled whenever a ".cpp" file that #include(s) the header file is compiled.

- Now save the project into the project directory file->Save (or ctrl S). Use the default filename offered by Quincy. Next time you want to open the project, all you'll need to do is double-click the project file name in explorer.

___________

Building and running the "react.exe" executable

You can open any of the files that are part of the project by double-clicking on their name in the project window. Before we do this however, let us compile and link react, and play a little with the program to get familiar with it:
Click: Project->Build (or press F6). menu image

Quincy compiles the two ".cpp" files, then links them to produce "react.exe". The commands it uses to compile and link are displayed into a "Build" window.

You can now run the program(after closing the "Build" window) by clicking on the filename "react.exe" in Windows Explorer, or within Quincy by clicking on Project->Execute (or pressing F9).

The program is self-explanatory. Just follow the instructions. Pressing any key will allow you to exit when the reaction time is displayed.

- Be patient while waiting for the "GO" sign! It may take up to 20 seconds to appear.

___________

How does it work?

"react" uses a Stopwatch object to measure the time. It also uses simple functions provided by the WinBGIm graphics library (this library comes with Quincy) to display a big GO! sign in colour in the small window, and to grab the key-press.

stopwatch image The Stopwatch is a very simple C++ class. It mimics a real-world stopwatch:
A Stopwatch variable (an object) can be created using a constructor, counting can be started with the start() member function. The time elapsed since starting can be obtained with the member function getElapsedTime().
That's all there is to it.

The time is computed accurately by using the system clock() function that returns the number of clock ticks since the start of the program.
If you want to study the design of the Stopwatch class in more detail,
follow this link stopwatch image.

small GO! image The application code in react.cpp is almost a pure procedural program, undistinguishable from C code, except that it creates a Stopwatch class instance (an object):

Stopwatch watch; // declare a Stopwatch variable

After waiting a random time between 1 and 20 seconds, the program displays the GO! sign and starts the stopwatch counting by calling its member function start():

watch.start(); //Start counting

When a key is pressed, the time elapsed since the stopwatch started is obtained by the Stopwatch member function getElapsedTime():

reactTime = watch.getElapsedTime(); // Obtain reaction time

The reaction time is then displayed in seconds and decimal fractions of a second.
___________

Graphics

React uses a small graphics screen and coloured fonts for output. in order to do this, it uses a simple 3rd party graphics library called WinBGIm. Graphics are not part of C++, but a large choice of 3rd party software libraries is available.

WinBGIm comes ready-installed with Quincy. It offers all we need here:

- To open a graphics window with white background and black text, react calls the WinBGIm functions:

initwindow(320, 240, "React", 400, 300);
setbkcolor(WHITE);
setcolor(BLACK);

(320, 240 are the width and height of the window in pixels, 400, 300 are the x and y coordinates of the top left corner.)

- To write the GO! sign, react sets a large bold font style (size 10) and clears the graphics screen. It outputs the text at coordinates 60 for x, 25 for y, from the top left corner:

// Set large text and bright colour
settextstyle(BOLD_FONT, HORIZ_DIR, 10);
setcolor(CYAN);
cleardevice();
outtextxy(60, 25, "GO!");

-The following simple WinBGIm code waits for the key to be pressed.

// Wait until a key is pressed
while(!kbhit())
    delay(2);

kbhit() returns true if the keyboard has been hit, false otherwise.
delay(n) waits for a number n of milliseconds without loading the CPU.

Basic help about these and other functions available in the WinBGIm library is given by the Quincy menu: Help->Programmer's Help.


- WinGBIm is a basic graphics drawing package that emulates one of the most successful graphics libraries of all times, the Borland Graphics Interface (BGI). WinbGIm adds some extra facilities, like the possibility of catching mouse clicks and mouse position.
The success of BGI was due to its simplicity. The code of graphical programs produced with WinBGIm is very simple, compared to that of other graphics packages.
___________
- You'll understand really well how this code works if you implement your own modifications and extensions to this example.