CIS Logo SVC Logo

   Computing & Information Systems


Schoology Facebook        Search CIS Site      Tutorials

Software Design Using C++

Simple Graphics

If we use a Win32 application instead of a console application, we can draw some simple graphics in a window on the screen. The following is a series of examples that show how to do this. Note that we will simply use the code to produce the Windows application; we will not worry about understanding it since it is too complex for the beginner. We will just look at the section of code that does the drawing of the graphics. Of course, all of the examples in this section are Windows-specific. None of these will work in Linux. For more advanced graphics examples, mostly using Direct X, look in the Graphics Programming section of these web pages.

To complile any of these examples, follow the directions for setting up a new project as found at Compiler Considerations, but instead of choosing a Console application you must make a different choice. This is explained in the next couple of paragraphs, one for Visual C++ 6.0 and the other for Visual C++ .NET.

Under Visual C++ 6.0, create a new project of type "Win32 Application" (not Win32 Console application) and then make sure that "empty project" is selected. Do not select Console application. You can then create a new C++ source file for this project and paste in the code for the desired example.

Under Visual C++ .NET, create a Visual C++ project of type "Win32 project" (not Console application) and under Application settings be sure that Windows application and Empty project are checked. You can then create a new C++ file for this project and paste in the code for the example that you want to try out.

An Easy Example

Take a look at the Simple.cpp (Visual Studio 2005/2008 version: Simple.cpp ) example. It includes a somewhat complicated WinMain function. We will not look at the details of this function. Instead we will simply accept that this is what is needed to create our Win32 application. The fact that there is a WinMain function instead of a main function is one sign that this is a Windows application.

The only other function is WndProc. Here we will not examine all of the details. However, the general idea is that it handles the various messages that might be received when our application is running. (A Windows application is "event driven", that is, it must respond to various events such as the user clicking on the close button in the upper right corner.) The WM_CREATE message is processed when the Window is first created. The WM_PAINT message is handled when the Window is drawn or redrawn. It is this latter section that we will concentrate on.

You don't have to understand all of the beginning code in this section, but for those who would like to know what it does, this paragraph has a quick explanation. Everyone else can skip to the next paragraph! The hDC = BeginPaint(hWnd, &ps) command prepares the window for painting and fills the ps structure with information about the painting. The hWnd parameter is a "handle" to the window to be repainted. The hDC variable receives a handle to a so-called "display device context" for the specified window. All of our drawing in the window will be done by using functions that manipulate the display device context. The next 2 lines of code create a new pen (solid style, aqua color) and select it for any drawing we do in this device context. Note that a color is specified by giving the red, green, blue values for the color. For example, RGB(255, 0, 0) has the maximum amount or red and no green or blue.

In drawing in a window it is important to know that the x-coordinate goes left to right across the window, with value 0 at the very left, and that the y-coordinate goes from the top to the bottom of the window, with value 0 at the top. Thus you can picture x- and y-axes on the window, with the origin (0, 0) in the top left corner of the window. The x-axis is horixontal, with the positive numbers marching off to the right. The y-axis is vertical, but with the positive numbers increasing as we go down. The actual code that our example uses for drawing in the window is as follows:

// Print a message string:
TextOut(hDC, 50, 50, "Line drawing", 12);

// Draw a rectangle:
MoveToEx(hDC, 100, 200, NULL);
LineTo(hDC, 300, 200);
LineTo(hDC, 300, 300);
LineTo(hDC, 100, 300);
LineTo(hDC, 100, 200);

// And top it with a triangle:
LineTo(hDC, 200, 100);
LineTo(hDC, 300, 200);

The TextOut function is used to print a message in the window, starting at location (50, 50). Note that the 12 is the length of the string that is printed. The MoveToEx function is used to move to a given point in the window. Here we start by moving to the point with coordinates (100, 200). Note that the x-coordinate is given first and the y-coordinate second, just as in mathematics. From this point, we draw a line to point (300, 200). Since these 2 points have the same y-coordinate, we have just drawn a vertical line segment. From our ending point of (300, 200) we next draw a line to the point (300, 300). Since these 2 points have the same x-coordinate, we have drawn a horizontal line segment. In a similar way we draw a few more line segments in order to produce a rectangle with a triangular "roof" on it.

As the comments in the program suggest, you can try changing the above section of code to draw some other figure that can be produced with line segments.

A First Mathematical Example

Next look at the Math1.cpp (Visual Studio 2005/2008 version: Math1.cpp ) example. It draws one "wave" of a sine-like function. Notice that the program includes the cmath header in order to use the sin function. A global constant has been set up to hold the value of pi. The function that is graphed is named g and is defined at the bottom of the file. When given an integer x value, this function returns the nearest integer to 100 * sin(pi * x / 100.0). Once again we will not look at the details of writing a Windows application, but just look at the code that draws the graph:

// Print a message:
TextOut(hDC, 50, 50, "Graph", 5);

// Draw the axes:
MoveToEx(hDC, 200, 100, NULL);
LineTo(hDC, 200, 300);
MoveToEx(hDC, 100, 200, NULL);
LineTo(hDC, 300, 200);

// Draw the graph of the function g:
for (x = -100; x <= 100; x++)
   SetPixel(hDC, 200 + x, 200 + g(x), RGB(0, 0, 255));  // blue color

The printing of the message and the drawing of the x- and y-axes as horizontal and vertical line segments should be understandable after reading the previous example. What is new here is the use of the SetPixel function to draw an individual point on the screen. Since this is inside of a FOR loop we actually draw many pixels in order to produce our graph of function g. For each integer x value from -100 to 100, we graph the point with coordinates (200 + x, 200 + g(x)). The 200 is present just to get the graph centered on the origin of the axes that we drew. In essence we are really graphing (x, g(x)), but shifted so that the graph is centered on the origin.

An Example That Draws Two Functions

The Math2.cpp (Visual Studio 2005/2008 version: Math2.cpp ) example draws 2 sine-like wave functions, one in red and the other in blue, on the same set of axes. The function g is the one drawn in blue. Its amplitude (height) is modulated by the second function f, which is drawn in red. If you are familiar with mathematics, you can tell that the function value g(x) has been defined as the value of f(x) times another sine function. The code that does the graphing of the function is shown below and is very much the same kind of thing that was used in the previous example.

// Print a message:
TextOut(hDC, 50, 50, "Graph", 5);

// Draw the axes:
MoveToEx(hDC, 100, 200, NULL);
LineTo(hDC, 500, 200);
MoveToEx(hDC, 300, 100, NULL);
LineTo(hDC, 300, 300);

// Draw the graph of the function g:
for (x = -200; x <= 200; x++)
   SetPixel(hDC, 300 + x, 200 + g(x), RGB(0, 0, 255));   // blue color

// Draw the graph of the function f, the one that modulates the amplitude of g:
for (x = -200; x <= 200; x++)
   SetPixel(hDC, 300 + x, 200 + f(x), RGB(255, 0, 0));   // red color

Another Mathematical Example

There is one more mathematical example, Math3.cpp. (Visual Studio 2005/2008 version: Math3.cpp ) It is very similar to our first mathematical example, except that the coordinates used for the axes and the formula for the function are different. The function g in this example is not a sine function, but a rational function. For a given integer value of x, it returns the nearest integer to the rational expression 50.0 * x - 1000.0) / (x + 20). The code that draws the graph is reproduced below:

// Print a message:
TextOut(hDC, 50, 50, "Graph", 5);

// Draw the axes:
MoveToEx(hDC, 100, 300, NULL);
LineTo(hDC, 500, 300);
MoveToEx(hDC, 300, 50, NULL);
LineTo(hDC, 300, 550);

// Draw the graph of the function g:
for (x = -200; x <= 200; x++)
   SetPixel(hDC, 300 + x, 300 + g(x), RGB(0, 0, 255));   // blue color

You can see that the origin is at the location (300, 300) in the window, and that the graph of g is drawn for x values from -200 to 200. Now that you have seen several mathematical examples, you might want to try modifying one of them so that it graphs some function of your own choosing.

A More Complex Example

SimpleDraw.cpp (Visual Studio 2005/2008 version: SimpleDraw.cpp ) draws a sequence of easy figures in a window. When the user clicks the left mouse button, it draws the next picture. After the fourth picture has been drawn, any additional click just brings up an Error window. We will not go through the details of the graphics code here, but the interested reader can no doubt tell what most of the functions do from their names and the context in which they are used. The Ellipse function, for example, is used to draw an ellipse (or circle). If you want more information about one of these functions, you can probably find it by using Help, Search in your compiler. Note that another version of this program is discussed in the AppWizard section, toward the very end of these web pages. Look under the "Single document interface" links found there.

Related Item

Graphics Programming
Advanced Topic.

Back to the main page for Software Design Using C++

Author: Br. David Carlson with contributions by Br. Isidore Minerd
Last updated: August 27, 2009