Software Design Using C++

Simple Graphics

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

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

// 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

// 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

// 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

Related Item