Visualizing mathematical functions by generating custom meshes using FireMonkey and C++

By: Anders Ohlsson

Abstract: This article discusses how you can generate your own 3-dimensional mesh for visualizing mathematical functions using C++Builder XE2 and FireMonkey.


This article assumes that you are familiar with the basics of 3D graphics, including meshes and textures.

    The goal!

The goal is to graph a function like sin(x*x+z*z)/(x*x+z*z) in three dimensions using brilliant colors, as the image below shows:

Hide image
Click to see full-sized image

    Generating the mesh

The easiest way to generate a mesh is to use the Data->Points and Data->TriangleIndices of the TMesh object. However, these two properties are strings, and they get parsed in order to generate the mesh at runtime (and design time if populated at design time). This parsing is pretty time consuming, in fact, in this particular case about 65 times as slow as using the internal buffers. Therefore we will instead be using the non-published properties Data->VertexBuffer and Data->IndexBuffer.

In our example we will iterate along the X-axis from -30 to +30, and the same for the Z-axis. The function we're graphing gives us the value for Y for each point.

    Step 1: Generating the wire frame

The image below shows a sparse wire frame representing the surface f = exp(sin x + cos z). Shown in red is one of the squares. Each square gets split into two triangles in order to generate the mesh. The mesh is simply built up from all of the triangles that we get when we iterate over the XZ plane.

Hide image
Click to see full-sized image

We name the corners of the square P0, P1, P2 and P3:

Hide image

The two triangles now become (P1,P2,P3) and (P3,P0,P1).

Given that u is somewhere on the X-axis, v is somewhere on the Z-axis, and that d is our delta step, the code to set up these four points in the XZ-plane becomes:

P0.X = u;
P0.Z = v;

P1.X = u+d;
P1.Z = v;

P2.X = u+d;
P2.Z = v+d;

P3.X = u;
P3.Z = v+d;

Now we calculate the corresponding function values for the Y component of each point. f is our function f(x,z).

P0.Y = f(P0.X,P0.Z);
P1.Y = f(P1.X,P1.Z);
P2.Y = f(P2.X,P2.Z);
P3.Y = f(P3.X,P3.Z);

The points are now fully defined in all three dimensions. Next, we plug them into the mesh.

Mesh1->Data->VertexBuffer->Vertices[0] = P0;
Mesh1->Data->VertexBuffer->Vertices[1] = P1;
Mesh1->Data->VertexBuffer->Vertices[2] = P2;
Mesh1->Data->VertexBuffer->Vertices[3] = P3;

That part was easy. Now we need to tell the mesh which points make up which triangles. We do that like so:

// First triangle is (P1,P2,P3)
Mesh1->Data->IndexBuffer->Indices[0] = 1;
Mesh1->Data->IndexBuffer->Indices[1] = 2;
Mesh1->Data->IndexBuffer->Indices[2] = 3;

// Second triangle is (P3,P0,P1)
Mesh1->Data->IndexBuffer->Indices[3] = 3;
Mesh1->Data->IndexBuffer->Indices[4] = 0;
Mesh1->Data->IndexBuffer->Indices[5] = 1;

    Step 2: Generating the texture

In order to give the mesh some color, we create a texture bitmap that looks like this:


This is simply a HSL color map where the hue goes from 0 to 359 degrees. The saturation and value are fixed.

The code to generate this texture looks like this:

BMP = new TBitmap(1,360);
for (k = 0; k < 360; k++)
  BMP->Pixels[0][k] = CorrectColor(HSLtoRGB(k/360.0,0.75,0.5));

    Step 3: Mapping the texture onto the wire frame

Finally, we need to map the texture onto the mesh. This is done using the TexCoord0 array. Each item in the TexCoord0 array is a point in a square (0,0)-(1,1) coordinate system. Since we're mapping to a texture that is just a line, our x-coordinate is always 0. The y-coordinate is mapped into (0,1), and the code becomes:

Mesh1->Data->VertexBuffer->TexCoord0[0] = PointF(0,(P0.Y+35)/45);
Mesh1->Data->VertexBuffer->TexCoord0[1] = PointF(0,(P1.Y+35)/45);
Mesh1->Data->VertexBuffer->TexCoord0[2] = PointF(0,(P2.Y+35)/45);
Mesh1->Data->VertexBuffer->TexCoord0[3] = PointF(0,(P3.Y+35)/45);

    Putting it all together

The full code to generate the entire mesh is listed below:

double f(double x, double z)
  double Result;
  double temp = x*x+z*z;
  double Pi = 3.1415926535897932384626433832795;
  double Epsilon = 1E-20;

  if (temp < Epsilon)
    temp = Epsilon;

  Result = -2000*Sin(temp/180*Pi)/temp;

  if (Result < MinF)
    MinF = Result;
  if (Result > MaxF)
    MaxF = Result;

  return Result;

void __fastcall TForm3D2::GenerateMesh()
  int          MaxX = 30;
  int          MaxZ = 30;
  double  u, v;
  TPoint3D P0, P1, P2, P3;
  double  d = 0.5;
  int          NP = 0;
  int          NI = 0;
  TBitmap  *BMP;
  int          k;

  // We have to set these up front. The buffers are cleared every time Length is set.
  Mesh1->Data->VertexBuffer->Length = 2*MaxX*2*MaxZ/d/d*4;
  Mesh1->Data->IndexBuffer->Length = 2*MaxX*2*MaxZ/d/d*6;

  BMP = new TBitmap(1,360);
  for (k = 0; k < 360; k++)
    BMP->Pixels[0][k] = CorrectColor(HSLtoRGB(k/360.0,0.75,0.5));

  u = -MaxX;
  while (u < MaxX) {
    v = -MaxZ;
    while (v < MaxZ) {
      // Set up the points in the XZ plane
      P0.X = u;
      P0.Z = v;
      P1.X = u+d;
      P1.Z = v;
      P2.X = u+d;
      P2.Z = v+d;
      P3.X = u;
      P3.Z = v+d;

      // Calculate the corresponding function values for Y = f(X,Z)
      P0.Y = f(P0.X,P0.Z);
      P1.Y = f(P1.X,P1.Z);
      P2.Y = f(P2.X,P2.Z);
      P3.Y = f(P3.X,P3.Z);

      // Set the points

      Mesh1->Data->VertexBuffer->Vertices[NP+0] = P0;
      Mesh1->Data->VertexBuffer->Vertices[NP+1] = P1;
      Mesh1->Data->VertexBuffer->Vertices[NP+2] = P2;
      Mesh1->Data->VertexBuffer->Vertices[NP+3] = P3;

      // Map the colors
      Mesh1->Data->VertexBuffer->TexCoord0[NP+0] = PointF(0,(P0.Y+35)/45);
      Mesh1->Data->VertexBuffer->TexCoord0[NP+1] = PointF(0,(P1.Y+35)/45);
      Mesh1->Data->VertexBuffer->TexCoord0[NP+2] = PointF(0,(P2.Y+35)/45);
      Mesh1->Data->VertexBuffer->TexCoord0[NP+3] = PointF(0,(P3.Y+35)/45);

      // Map the triangles
      Mesh1->Data->IndexBuffer->Indices[NI+0] = NP+1;
      Mesh1->Data->IndexBuffer->Indices[NI+1] = NP+2;
      Mesh1->Data->IndexBuffer->Indices[NI+2] = NP+3;
      Mesh1->Data->IndexBuffer->Indices[NI+3] = NP+3;
      Mesh1->Data->IndexBuffer->Indices[NI+4] = NP+0;
      Mesh1->Data->IndexBuffer->Indices[NI+5] = NP+1;

      NP = NP+4;
      NI = NI+6;

      v = v+d;
    u = u+d;

  Mesh1->Material->Texture = BMP;

    Demo application

You can find my demo application that graphs 5 different mathematical functions in CodeCentral. Here are a few screen shots from the application:

Func1Hide image
Click to see full-sized imageHide image
Click to see full-sized imageHide image
Click to see full-sized imageHide image
Click to see full-sized image


Please feel free to email me with feedback to aohlsson at embarcadero dot com.

Server Response from: ETNASC03