Anders Ohlsson 이 파이어 몽키로 만든 공학계산 결과 그래프 입니다.

보기만 해도 멋지군요 

Abstract: This article discusses how you can generate your own 3-dimensional mesh for visualizing mathematical functions using Delphi 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:

P[0].x := u;
P[0].z := v;

P[1].x := u+d;
P[1].z := v;

P[2].x := u+d;
P[2].z := v+d;

P[3].x := u;
P[3].z := v+d;

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

P[0].y := f(P[0].x,P[0].z);
P[1].y := f(P[1].x,P[1].z);
P[2].y := f(P[2].x,P[2].z);
P[3].y := f(P[3].x,P[3].z);

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

with VertexBuffer do begin
  Vertices[0] := P[0];
  Vertices[1] := P[1];
  Vertices[2] := P[2];
  Vertices[3] := P[3];

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)
IndexBuffer[0] := 1;
IndexBuffer[1] := 2;
IndexBuffer[2] := 3;

// Second triangle is (P3,P0,P1)
IndexBuffer[3] := 3;
IndexBuffer[4] := 0;
IndexBuffer[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 := TBitmap.Create(1,360); // This is actually just a line
for k := 0 to 359 do
  BMP.Pixels[0,k] := HSLtoRGB(k/360,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:

with VertexBuffer do begin
  TexCoord0[0] := PointF(0,(P[0].y+35)/45);
  TexCoord0[1] := PointF(0,(P[1].y+35)/45);
  TexCoord0[2] := PointF(0,(P[2].y+35)/45);
  TexCoord0[3] := PointF(0,(P[3].y+35)/45);

    Putting it all together

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

function f(x,z : Double) : Double;
  temp : Double;
  temp := x*x+z*z;
  if temp < Epsilon then
    temp := Epsilon;

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

procedure TForm1.GenerateMesh;
  MaxX = 30;
  MaxZ = 30;
  u, v : Double;
  P : array [0..3] of TPoint3D;
  d : Double;
  NP, NI : Integer;
  BMP : TBitmap;
  k : Integer;

  d := 0.5;

  NP := 0;
  NI := 0;

  Mesh1.Data.VertexBuffer.Length := Round(2*MaxX*2*MaxZ/d/d)*4;
  Mesh1.Data.IndexBuffer.Length := Round(2*MaxX*2*MaxZ/d/d)*6;

  BMP := TBitmap.Create(1,360);
  for k := 0 to 359 do
    BMP.Pixels[0,k] := CorrectColor(HSLtoRGB(k/360,0.75,0.5));

  u := -MaxX;
  while u < MaxX do begin
    v := -MaxZ;
    while v < MaxZ do begin
      // Set up the points in the XZ plane
      P[0].x := u;
      P[0].z := v;
      P[1].x := u+d;
      P[1].z := v;
      P[2].x := u+d;
      P[2].z := v+d;
      P[3].x := u;
      P[3].z := v+d;

      // Calculate the corresponding function values for Y = f(X,Z)
      P[0].y := f(Func,P[0].x,P[0].z);
      P[1].y := f(Func,P[1].x,P[1].z);
      P[2].y := f(Func,P[2].x,P[2].z);
      P[3].y := f(Func,P[3].x,P[3].z);

      with Mesh1.Data do begin
        // Set the points
        with VertexBuffer do begin
          Vertices[NP+0] := P[0];
          Vertices[NP+1] := P[1];
          Vertices[NP+2] := P[2];
          Vertices[NP+3] := P[3];

        // Map the colors
        with VertexBuffer do begin
          TexCoord0[NP+0] := PointF(0,(P[0].y+35)/45);
          TexCoord0[NP+1] := PointF(0,(P[1].y+35)/45);
          TexCoord0[NP+2] := PointF(0,(P[2].y+35)/45);
          TexCoord0[NP+3] := PointF(0,(P[3].y+35)/45);

        // Map the triangles
        IndexBuffer[NI+0] := NP+1;
        IndexBuffer[NI+1] := NP+2;
        IndexBuffer[NI+2] := NP+3;
        IndexBuffer[NI+3] := NP+3;
        IndexBuffer[NI+4] := NP+0;
        IndexBuffer[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.


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 8135
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 7836
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 10260
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 15352
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 17048
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 12792
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 32253
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 167881
40 TMS 파이어몽키용 테이블뷰 컴포넌트 출시 [1] 박병일 2012.02.07 7490
39 파이어 몽키 이퀼라이저 데모 동영상 박병일 2012.02.06 10015
38 파이어몽키 써드파티 라이브러리 ApeSuite file 박병일 2012.02.06 9072
37 파이어몽키 3D Text Editor file 박병일 2012.02.06 13862
36 Platforms Expert for XE2 Beta 2 file 박병일 2012.02.06 8294
35 파이어몽키를 이용하여 당구 게임을 시뮬레이션한 데모 file 박병일 2012.02.06 10593
34 델파이로 만든 구글 지오코딩 쎔플 입니다. 박병일 2012.02.06 10924
» 파이어 몽키를 이용한 공학 계산과 그래프 박병일 2012.01.28 11387
32 델파이 라이브러리 패스 에디터 file 박병일 2012.01.27 7002
31 RAD Studio Resource Center 박병일 2012.01.26 16343
30 파이어몽키 기반의 아이폰앱 개발에서 주소록 가져오기 박병일 2012.01.25 14364
29 델파이XE2 파이어몽키 기반 아이폰앱 개발에서 제스춰를 인식시키는 방법 박병일 2012.01.25 21981
28 파이어 몽키란 무었인가? 박병일 2012.01.19 11012
27 델파이XE2의 VCL Styles 활용하기 박병일 2012.01.19 15228
26 델파이 XE2의 DataSnap 서버와 OSX Client의 연동 박병일 2012.01.19 13468
25 델파이 XE2 로 아이폰 하드웨어 컨트롤 하기 박병일 2012.01.19 15428
24 델파이 XE2의 Namespace 문제 박병일 2012.01.19 8629
23 Delphi XE2에서 맥 애플리케이션을 만들어 보자 박병일 2012.01.18 12878
22 델파이 XE2로 아이폰앱 만들기 박병일 2012.01.18 12980
21 델파이 XE2로 만든 아이폰 앱 - TicTacToe file 박병일 2012.01.17 13887