012 – Development of program of graphics drawing functions of one variable. The function is defined by the formula

Development of program of graphics drawing functions of one variable. The function is defined by the formula.

 An example of drawing on the canvas graph of a function of one variable

y = f(x)

The function is defined by the formula.

 

The task

Develop the application, in which a graph of the function is built.

y(x) = sin(x)

 The graph of function must be displayed in a separate form.

 

The mathematical formulation of the problem

 To build any graph of the function y = f(x) must specify a rectangular area of the screen, in which the graph of the function will be displayed.

 The rectangular area of the screen is defined by the coordinates of extreme points (Figure 1):

– (x1; y1) – left-top corner of the screen;

– (x2; y2) – right-bottom corner of the screen.

05_01_00_012_01_

Figure 1. The rectangular area of the screen

 In the construction of on-screen graphs of functions, it is necessary to implement the scaling rectangle with coordinates (x1; y1), (x2; y2) into the rectangle with the screen coordinates (xx1; yy1), (xx2; yy2) as shown in Figure 2.

05_01_00_012_02e

Figure 2. Scaling of graphs

 Scaling the axes OX and OY is implemented using linear dependencies:

05_01_00_012_formula_01

 When calculating the vertical screen coordinates, you must use the sign to take into account that the line numbering goes from top to bottom.

 

Progress

1. Run Borland C++ Builder.

 

Create the project as “VCL Form Application”. Automatically, main form of application is created. Name of form “Form1”.

Save the project.

 

2. Creating the basic form.

Place on the form such components:

– five components of TLabel type. The objects with names Label1, Label2, Label3, Label4, Label5 are created;

– five components of TEdit type. The objects with names Edit1, Edit2, Edit3, Edit4, Edit5 are created;

– one component of TButton type. The object with name “Button1” is created.

 Correct the positions of components on the form as shown in Figure 3.

05_01_00_012_03_

Figure 3. Placing of components on the form Form1

 

3. Setting of the form.

 To had is the correct form Form1, in the Object Inspector, do the following:

– from the tab “Action” set the property Caption = “Graph of the function of one variable” (form title);

– from the tab “Visual” set the property BorderStyle = “bsDialog” (Figure 4). As a result, the buttons of form control will be hided;

– from the tab Miscellaneous set the property Position = “poScreenCenter” (Figure 5). This shows the form in the center of the screen when application is run.

05_01_00_012_04_

Figure 4. Property “BorderStyle” of form Form1

05_01_00_012_05_

Figure 5. Property “Position”

 

4. Setting of properties and size of components, which are placed on the form.

 It is necessary to realize the setting of properties of the following components:

– in the component Label1 the property Caption = “Number of dots horizontal, n =”;

– in the component Label2 the property Caption = “The left boundary, x1 =”;

– in the component Label3 the property Caption = “The right boundary, x2 =”;

– in the component Label4 the property Caption = “The top boundary, y1 =”;

– in the component Label5 the property Caption = “The bottom boundary, y2 =”;

– in the component Button1 the property Caption = “Show the graph…”.

 Also, you need to change the size and position on the form of the component Button1. Approximate views of the form with the placement of components is shown in Figure 6.

05_01_00_012_06eFigure 6. General view of form “Form1”

 

5. Programming of event of Form1 activation.

 When the application is running, you need to program the event OnActivate of main form of application.

 An example of event programming in C++ Builder is described here.

Listing of event handler OnActivate is the following:

void __fastcall TForm2::FormActivate(TObject *Sender)
{
     Edit1->Text = "30";
     Edit2->Text = "-5";
     Edit3->Text = "5";
     Edit4->Text = "-2";
     Edit5->Text = "2";
     Edit1->SetFocus(); // set the focus into Edit1
}

 In the event handler the fields of type TEdit are filled. These fields are the coordinates of the rectangle area of the screen in which graph is shown.

 The rectangle area is set by coordinates of left-top corner (x1; y1) and right-bottom corner (x2; y2).

 

6. Creating a new form and show of the function graph.

 Create the form named “Form2” by the example as shown in Figure 7. An example of creating of a new form in C++ Builder is shown here.

 The form «Form2” is defined in the files “Unit2.h” and “Unit2.cpp”.

 Place on the form components of the following types:

– component of type TButton (button). The object “Button1” is created automatically;

– component of type TImage. The object “Image1” is created automatically. In this component the graph of function sin(x) will be showed.

05_01_00_012_07_

Figure 7. Form “Form2”, which displays the graph of function

 Using “Object Inspector” you need to set the following properties of components:

– in component Button1 property Caption = “OK”;

– in component Button1 property ModalResult = “mrOk”. This means, when user clicks on the button “Button1” – main form will be closed with the returning code “mrOk”.

Using “Object Inspector” you need to set the following properties of form “Form2”:

– from the tab Action set the property Caption = “Graph of function sin(x)”;

– from the tab Visual property BorderStyle = “bsDialog”. It means that the form window will be shown as a dialog window;

– from the tab Miscellaneous property Position = “poScreenCenter”. As a result, the form will be showed in the center of the screen.

 Also, you need to correct the sizes and positions of components Button1 and Image1.

 As a result, the form “Form2” will have the following view (Figure 8).

05_01_00_012_08eFigure 8. The form “Form2”

 

7. Programming of additional functions of scaling and calculating sin(x).
 7.1. Inputting the internal variables in the Form2.

 It is needed to enter the following internal variables in the text of file “Unit2.h” (Figure 9).

For this, you need to do the following actions.

1. Go to the header file “Unit2.h” (Figure 9).

2. Input the four variables in the “private” section of class TForm2:

 int xx1, xx2, yy1, yy2;

These variables correspond to the screen coordinates (see Figure 2 b).

3. In section “public” of class TForm2, you need to enter five variables:

float x1, x2, y1, y2;
int n;

 These variables correspond to the actual coordinates (Figure 2 a) of the rectangular area, which displays a graph. The variable n sets the number of points, which are connected between them. The greater the value of n, the more smoothly the graph appears on the screen.

 The value of these variables is filled from the main form “Form1”. Therefore they are placed in the section “public”.

05_01_00_012_09_Figure 9. The view of file “Unit2.h

 For now, the code listing of file “Unit2.h” is the following:

//------------------------------------------------
#ifndef Unit2H
#define Unit2H

//------------------------------------------------
#include <Classes.hpp>
#include <Controls.hpp>
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <ExtCtrls.hpp>
//------------------------------------------------

class TForm2 : public TForm
{
__published:  // IDE-managed Components
     TImage *Image1;
     TButton *Button1;

private: // User declarations
     int xx1, xx2, yy1, yy2;

public:       // User declarations
     __fastcall TForm2(TComponent* Owner);
     float x1, x2, y1, y2; // actual coordinates of rectangular area
     int n;  // number of points, which are connected between them
};

//--------------------------------------------------
extern PACKAGE TForm2 *Form2;

//--------------------------------------------------
#endif

 

7.2. Adding the conversion functions and computation functions of TForm2 class.

  In the module of form Form2 you need to create two functions of conversion of actual coordinates in the screen coordinates. The functions are named ZoomX() and ZoomY().

 Also, you need to add function of calculation sin(x). The name of function is func().

 First of all, in the file “Unit2.h”, are added prototypes of functions. The prototypes are added in the section “public”.

 The snippet of listing of file “Unit2.h” is following:

...

class TForm2 : public TForm
{
__published:  // IDE-managed Components
     TImage *Image1;
     TButton *Button1;

private: // User declarations
     int xx1, xx2, yy1, yy2;

public:       // User declarations
     __fastcall TForm2(TComponent* Owner);
     float x1, x2, y1, y2;
     int n;
     int ZoomX(float x);
     int ZoomY(float y);
     float func(float x);
};

...

 Next step, you need to go to the file “Unit2.cpp” (Figure 10). In this file the implementation of class TForm2 is described.

 At the end of file the next program code is added:

int TForm2::ZoomX(float x)
{
     int ret;
     ret = xx1 + (int)((x-x1)*(xx2-xx1)/(x2-x1));
     return ret;
}

int TForm2::ZoomY(float y)
{
     int ret;
     ret = yy2 + (int)((y-y1)*(yy1-yy2)/(y2-y1));
     return ret;
}

float TForm2::func(float x)
{
     float ret;
     ret = sin(x); // function for which a graph is created
     return ret;
}

 In the code snippet above, the functions ZoomX() and ZoomY() are getting as the input parameters the corresponding values x and y, which are the actually coordinates.

 Then, the conversion by formulas from mathematical formulation of the problem is realized.

 Function func() gets as input parameter the value of local variable x. In the body of function is calculated the value of sin(x). In this place you can insert any other own function.

05_01_00_012_10_Figure 10. File “Unit2.cpp” with the entered functions ZoomX(), ZoomY() and func().

 At the moment, the code of file “Unit2.cpp” is following:

//-------------------------------------------------------
#include <vcl.h>
#pragma hdrstop

#include "Unit2.h"
#include <math.h>

//-------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"

TForm2 *Form2;

//-------------------------------------------------------
__fastcall TForm2::TForm2(TComponent* Owner)
     : TForm(Owner)
{
}

//-------------------------------------------------------

int TForm2::ZoomX(float x)
{
     int ret;
     ret = xx1 + (int)((x-x1)*(xx2-xx1)/(x2-x1));
     return ret;
}

int TForm2::ZoomY(float y)
{
     int ret;
     ret = yy2 + (int)((y-y1)*(yy1-yy2)/(y2-y1));
     return ret;
}

float TForm2::func(float x)
{
     float ret;
     ret = sin(x);
     return ret;
}

To use the sin(x) function, is added the string

#include <math.h>

in the file “Unit2.cpp”.

 This string connects the standard library of mathematical functions. The function sin(x) is realized in this library.

 

8. The event programming of Form2 activation.

  The graph of function is displayed in the form Form2, when you clicked on the button “Show the graph…” of form Form1. Therefore it is advisable to program the output of graph in the event OnActivate of form Form2.

The event handler is realized in the file “Unit2.cpp”.

 The code of event handler “OnActivate” of form “Form2” is the following:

void __fastcall TForm2::FormActivate(TObject *Sender)
{
     TCanvas * canv; // additional variable
     int tx, ty;
     int i;
     float x, y, h;

     canv = Image1->Canvas;

     // 1. Setting the boundaries of screen coordinates
     xx1 = 0;
     yy1 = 0;
     xx2 = Image1->Width;
     yy2 = Image1->Height;

     // 2. Drawing of graph
     canv->Pen->Color = clBlue;
     canv->Brush->Color = clWhite;
     canv->Rectangle(0, 0, Image1->Width, Image1->Height);


     // 2.1. Drawing of coordinate axes
     canv->Pen->Color = clBlack;

     // 2.2. Take the point of origin X of the screen.
     tx = ZoomX(0);
     ty = ZoomY(y1);
     canv->MoveTo(tx,ty);

     // draw a line of coordinates of the X axis
     tx = ZoomX(0);
     ty = ZoomY(y2);
     canv->LineTo(tx,ty);

     // 2.3. Take the point of origin X of the screen.
     canv->Pen->Color = clBlack;
     tx = ZoomX(x1);
     ty = ZoomY(0);
     canv->MoveTo(tx,ty);

     // Draw the Y axis.
     tx = ZoomX(x2);
     ty = ZoomY(0);
     canv->LineTo(tx,ty);

     // 3. Drawing of the graph.
     canv->Pen->Color = clRed; // color
     canv->Pen->Width = 2; // line thickness

     // coordinates of the first point
     x = x1;
     y = func(x);
     h = (x2-x1)/n;
     tx = ZoomX(x);
     ty = ZoomY(y);
     canv->MoveTo(tx,ty);

     // The cycle of enumerating of points and drawing the connecting lines
     for (i = 0; i < n; i++)
     {
         x = x + h;
         y = func(x);
         tx = ZoomX(x);
         ty = ZoomY(y);
         canv->LineTo(tx,ty);
     }
}

 In the short view the file “Unit2.cpp” is the following:

#include <vcl.h>

#pragma hdrstop

#include "Unit2.h"
#include <math.h>

//-----------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"

TForm2 *Form2;

//-----------------------------------------------------------
__fastcall TForm2::TForm2(TComponent* Owner)
     : TForm(Owner)

{

}

//----------------------------------------------------------
int TForm2::ZoomX(float x)
{
     ...
}

int TForm2::ZoomY(float y)
{
     ...
}

float TForm2::func(float x)
{
     ...
}

void __fastcall TForm2::FormActivate(TObject *Sender)
{
     ...
}
//--------------------------------------------------------------

 

9. Programming of event of click on the button “Show the graph…” of form Form1.

 The last stage is the programming of event of click on the button of show the graph.

 For this you need to do the following actions.

 

9.1. Connecting of Form2 to the Form1.

An example of creating the new form of application is described here in details.

 To connects the new form “Form2” to the form “Form1” you need to add the string “Unit1.cpp” in the top of file”

#include "Unit2.h"

 Thereafter, the methods of “TForm2” class are available from the Form1.

 For now, the listing of file “Unit2.cpp” is the following:

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
#include "Unit2.h"

//---------------------------------------------------------------

#pragma package(smart_init)
#pragma resource "*.dfm"

TForm1 *Form1;
//---------------------------------------------------------------

__fastcall TForm1::TForm1(TComponent* Owner)
     : TForm(Owner)
{
}

//---------------------------------------------------------------
void __fastcall TForm1::FormActivate(TObject *Sender)
{
     Edit1->Text = "30";
     Edit2->Text = "-5";
     Edit3->Text = "5";
     Edit4->Text = "-2";
     Edit5->Text = "2";
     Edit1->SetFocus(); // set the input focus to Edit1
}
//---------------------------------------------------------------

 

9.2. Programming of event of click on the button “Show the graph…”.

 The event handler Button1Click() of clicking on the button “Show the graph…” is following:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
     Form2->n = StrToInt(Edit1->Text);
     Form2->x1 = StrToFloat(Edit2->Text);
     Form2->x2 = StrToFloat(Edit3->Text);
     Form2->y1 = StrToFloat(Edit4->Text);
     Form2->y2 = StrToFloat(Edit5->Text);
     Form2->ShowModal();
}

In the code is formed the variables n, x1, x2, y1, y2.

 

10. Running the application.

After, you can run the application (Figure 11).

05_01_00_012_11e

Figure 11. The graph of sin(x).