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

보기만 해도 멋지군요 


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

    Prerequisites!

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
Triangles

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];
end;

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:

HSLmap

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);
end;

    Putting it all together

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

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

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

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

  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];
        end;

        // 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);
        end;

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

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

      v := v+d;
    end;
    u := u+d;
  end;

  Mesh1.Material.Texture := BMP;
end;

    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

    Contact

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



원본링크


http://edn.embarcadero.com/article/42007


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 17865
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 16226
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 18873
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 24455
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 25834
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 21195
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 41783
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 177087
126 모바일 앱 개발, 가장 좋은 선택은? 관리자 2021.03.18 631
125 안드로이드 SDK 수동 설치 방법 file 김원경 2020.07.15 4394
124 iOS 앱스토어 1024x1024 아이콘 문제에 대한 해결 방법 김원경 2020.07.08 507
123 파이어몽키를 사용하여 멀티 플랫폼/아키텍처 용 소프트웨어 개발 file 김원경 2020.03.25 606
122 RAD Studio 10.3.3 안드로이드 앱에서 센서 컴포넌트 사용시 링크 오류 해결방법 김원경 2020.03.18 348
121 [델파이 안드로이드 64비트 오류 수정] TInAppPurchase 컴포넌트 수정 file 김원경 2020.03.18 355
120 파이어몽키에서 Message 대화상자 사용하기/Message 대화상자와 유사하게 폼 사용하기 file 김원경 2020.01.23 2316
119 파이어몽키 TListBox 컴포넌트 사용방법: 사용자 정의 아이템데이터 동적으로 표시하기 file 김원경 2020.01.20 620
118 리눅스용 앱에 다양한 스타일 적용하기 (FMX 스타일들을 리눅스 앱에도!) 관리자 2019.09.17 487
117 밝은 톤의 사용자 친화적인 디자인을 찾고있다면 - 푸에르토 리코(Puerto Rico) FMX 스타일 관리자 2019.09.17 553
116 과감하면서도 볼드한 효과를 주고 싶다면 - Ruby Graphite FMX 스타일 관리자 2019.09.17 510
115 그라데이션이 적용된 멋진 스타일을 적용하고 싶다면 - 스텔라(Stellar) FMX 스타일 관리자 2019.09.17 603
114 리눅스 앱에 파이어몽키에서 적용했던 스타일을 똑같이 적용하세요 - Wedgewood Light 스타일 관리자 2019.09.09 401
113 리눅스 앱에 '깔끔하면서도 샤프한' 스타일을 적용하고 싶다면 - Air 스타일 관리자 2019.09.09 407
112 '눈에 확 띄는' 리눅스 앱을 만들고 싶다면 - Amakrits 스타일 관리자 2019.09.09 377
111 리눅스 앱에 '윈도우 10 컬러 스타일'을 적용하고 싶다면 - Aqua Graphite 스타일 관리자 2019.09.09 458
110 리눅스 앱에 '프로페셔널' 해보이는 스타일을 적용하고 싶다면 - Blend FMX 스타일 관리자 2019.09.09 409
109 FmxLinux - 델파이, RAD스튜디오에 추가되었습니다! 관리자 2019.06.26 523
108 [무료 제공툴] 파이어몽키 스텐실(FMX Stencils) [3] 관리자 2018.08.24 1196
107 10.2.3 새로운 기능: 파이어몽키 UI 템플릿 - 프로필 화면 관리자 2018.04.24 755