Most of engineering applications needs to display data in part of time or in real time. There are many ways to draw mathematical functions or data series. There are also components which makes easy to display, zoom, arrange, save or load data. In this post we will explain what is the best way to draw mathematical functions.
Modern way to display drawings in C++ is using these Bitmaps. Bitmaps has Canvas property to draw, you can use ARGB format to draw pixels on it. You can also use alpha background, your drawings may be easily displayed over other images, textures that makes your drawings more professional. In this example we will use bitmap to draw mathematical functions. In C++ Builder, basically in technique we draw things into Bitmap (TBitmap) and we display all the bitmap by using Image (Tımage).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
TBitmap *bmp= new TBitmap(); bmp->SetSize(1920,1080); bmp->Canvas->BeginScene(); // do all drawings here bmp->Canvas->EndScene(); Image1->Bitmap->Assign(bmp); //copy bmp to Image1->Bitmap, you can directly draw to this bitmap too bmp->Free(); // we copied this so we can delete this bitmap from the memory |
To draw your functions in line mode you just need DrawLine(…) command as shown below;
|
1 2 3 |
bmp->Canvas->DrawLine(TPoint(50,50),TPoint(150,150), 1.0); |
To draw your functions with solid bars, you need FillRect(…) command,
|
1 2 3 4 |
bmp->Canvas->FillRect( TRect(0,0,320,200), 0, 0, AllCorners, 1.0); // filled bmp->Canvas->DrawRect( TRect(0,0,320,200), 0, 0, AllCorners, 1.0); // frame |
You can use Ellipse and Text drawing on your graphics too. For more details please read this “How to use Canvas in C++ to do Drawings“.
If we have lines between every two points , so we can draw as below;
|
1 2 3 4 5 6 |
for( int i=0; i<100; i+=2) { bmp->Canvas->DrawLine(points[i],points[i+1], 1.0); } |
With these information, now lets start building our drawing application.
An Example to Draw Mathematical Functions Dynamically on Windows
- Create a new Mutli-Device C++ Builder Project, Save all project and unit files to a folder (i.e.MyMathDraw)
- Add an Image from Component Palette, Set Width 800 and Height 400. Set WrapMode to Original, so each pixels will be shown on your screen pixels ( no shrink / resize).
- Add a Trackbar, we will use this to modify points generated by our function
- Add a Trackbar, we will use this to modify points generated by our function.
- Add a Timer component from Component Palette , we will use this to set new parameters with out function (these parameters may be obtained by a sensor or from a file too) and we will draw these parameters on ourImage bitmap;
- Press F12 and Let start with defining our point array and bitmap. In this example we will have 100 points (-0 to 99) and we will draw
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#include "Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.fmx" TForm1 *Form1; TPointF points[100]; TBitmap *bmp; //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { bmp = new TBitmap(); bmp->SetSize(Image1->Width, Image1->Height); Image1->Bitmap->Assign(bmp); //copy bmp to Image1->Bitmap, you can directly draw to this bitmap too bmp->Free(); // we copied this so we can delete this bitmap from the memory } |
6. Now lets define our y=f(x) function. Actually this is a y=Sin(x) function where x is in degrees, to draw this we should modify to have arranged position as given below.
|
1 2 3 4 5 6 |
float my_function( float x) // y=f(x) { return( 100 + 100*Sin(M_PI*x/180) + Form1->TrackBar1->Value ); / } |
This function changes with x and the Value of our TrackBar1; You can add more Trackbars, Edits etc. to retrieve parameters and modify your functions.
6. Double click to Timer to create OnTimer() event, and add these. This will set our function and it will display by timer intervals.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
void __fastcall TForm1::Timer1Timer(TObject *Sender) { int i; // read parameters or set parameters by a given function for( i=0; i<720; i++) { points[i].X=i; points[i].Y=my_function(i+step); } Image1->Bitmap->Canvas->Fill->Color=claLime; Image1->Bitmap->Canvas->Stroke->Color=claLime; Image1->Bitmap->Canvas->BeginScene(); Image1->Bitmap->Canvas->Clear(claBlack); for( i=0; i<720; i+=2) { Image1->Bitmap->Canvas->DrawLine( points[i], points[i+1], 1.0); } Image1->Bitmap->Canvas->EndScene(); step++; // lets move graph 1 pixel left on every timer runs } |
8. Run your codes by pressing F9, your application will show your function like this.
