Recent

Author Topic: [LAMW] DrawCircle using jCanvasES2  (Read 688 times)

Handoko

  • Hero Member
  • *****
  • Posts: 3547
  • My goal: build my own game engine using Lazarus
[LAMW] DrawCircle using jCanvasES2
« on: March 26, 2019, 12:22:23 pm »
This post is the answer for a request by a friend here.

Code: Pascal  [Select][+][-]
  1. {Hint: save all files to location: /home/handoko/Desktop/GLES_Circle/GLES_Circle/jni }
  2. unit unit1;
  3.  
  4. {$mode delphi}
  5.  
  6. interface
  7.  
  8. uses
  9.   Classes, SysUtils, AndroidWidget, Laz_And_Controls, Laz_And_GLESv2_Canvas;
  10.  
  11. type
  12.  
  13.   { TAndroidModule1 }
  14.  
  15.   TAndroidModule1 = class(jForm)
  16.     jCanvasES2_1: jCanvasES2;
  17.     jTextView1: jTextView;
  18.     jTimer1: jTimer;
  19.     procedure AndroidModule1Destroy(Sender: TObject);
  20.     procedure AndroidModule1JNIPrompt(Sender: TObject);
  21.     procedure jCanvasES2_1GLCreate(Sender: TObject);
  22.     procedure jCanvasES2_1GLDown(Sender: TObject; Touch: TMouch);
  23.     procedure jCanvasES2_1GLDraw(Sender: TObject);
  24.     procedure jCanvasES2_1GLUp(Sender: TObject; Touch: TMouch);
  25.     procedure jTimer1Timer(Sender: TObject);
  26.   private
  27.     isPressing: Boolean;
  28.     CircleX: Single;
  29.     CircleY: Single;
  30.     CircleR: Single;
  31.   end;
  32.  
  33. var
  34.   AndroidModule1: TAndroidModule1;
  35.  
  36. implementation
  37.  
  38. {$R *.lfm}
  39.  
  40. { TAndroidModule1 }
  41.  
  42. procedure TAndroidModule1.AndroidModule1JNIPrompt(Sender: TObject);
  43. begin
  44.   isPressing := False;
  45.   jCanvasES2_1.Screen_Setup(jCanvasES2_1.Width, jCanvasES2_1.Height, xp2D);
  46.   jTimer1.Enabled := True;
  47. end;
  48.  
  49. procedure TAndroidModule1.AndroidModule1Destroy(Sender: TObject);
  50. begin
  51.   jTimer1.Enabled := False;
  52. end;
  53.  
  54. procedure TAndroidModule1.jCanvasES2_1GLCreate(Sender: TObject);
  55. begin
  56.   jCanvasES2_1.Shader_Compile('simon_Vert', 'simon_Frag');
  57.   jCanvasES2_1.Shader_Link;
  58. end;
  59.  
  60. procedure TAndroidModule1.jCanvasES2_1GLDown(Sender: TObject; Touch: TMouch);
  61. begin
  62.   jTextView1.Visible := False;
  63.   CircleX            := (Touch.Pt.X/jCanvasES2_1.Width*2) - 1;
  64.   CircleY            := 1 - (Touch.Pt.Y/jCanvasES2_1.Height*2);
  65.   CircleR            := 0.1;
  66.   isPressing         := True;
  67. end;
  68.  
  69. Procedure DrawCircleNew(XY: TXY; Z, L: Single; AColor: TRGBA; AWidth: Single = 0.3);
  70. var
  71.   i : Integer;
  72. begin
  73.   For i := 0 to 70 do
  74.     AndroidModule1.jCanvasES2_1.DrawLine(
  75.       _XYZ(cCircle[(i+0)*2]  *L+XY.X, cCircle[(i+0)*2+1]*L+XY.Y, Z),
  76.       _XYZ(cCircle[(i+0)*2+2]*L+XY.X, cCircle[(i+0)*2+3]*L+XY.Y, Z),
  77.       AColor, AWidth
  78.       );
  79.   AndroidModule1.jCanvasES2_1.DrawLine(
  80.     _XYZ(cCircle[0]  *L+XY.X, cCircle[1]*L+XY.Y, Z),
  81.     _XYZ(cCircle[142]*L+XY.X, cCircle[143]*L+XY.Y, Z),
  82.     AColor, AWidth
  83.     );
  84. end;
  85.  
  86. procedure TAndroidModule1.jCanvasES2_1GLDraw(Sender: TObject);
  87. begin
  88.  
  89.   jCanvasES2_1.MVP:= cID4x4;
  90.   jCanvasES2_1.SetMVP(jCanvasES2_1.MVP);
  91.   jCanvasES2_1.Screen_Clear(0, 0, 0, 1);
  92.  
  93.   if isPressing then
  94.     DrawCircleNew(_XY(CircleX, CircleY), 0, CircleR, _RGBA(1, 0, 0, 0.1), 0.02);
  95.  
  96. end;
  97.  
  98. procedure TAndroidModule1.jCanvasES2_1GLUp(Sender: TObject; Touch: TMouch);
  99. begin
  100.   isPressing := False;
  101. end;
  102.  
  103. procedure TAndroidModule1.jTimer1Timer(Sender: TObject);
  104. begin
  105.   CircleR := CircleR + 0.02;
  106.   if CircleR > 0.8 then CircleR := 0.1;
  107.   jCanvasES2_1.Refresh;
  108. end;
  109.  
  110. end.

  • jCanvasES2.DrawCircle has a serious bug, alternatively I wrote DrawCircleNew, see line #69. I will inform the developer of LAMW later.
  • Previously I used DrawPolyFill to clear the OpenGL's screen. Now I use jCanvasES2.Screen_Clear (see line #91), which is much simpler.
  • This code does not support device rotation, which I still unable to solve.
  • The circle drawn actually is an ellipse because it does not calculate the aspect ratio of the jCanvasES.
  • The circle drawn is not very smooth. This happens because the original author of DrawCircle uses only 72 points to construct the circle and the data are rounded to 2 digits only (which greatly reduces the accuracy).
Tested on Android 7.1.2 ARM device, binary compiled using Lazarus 1.8.4 64-bit Linux LAMW rev 754.
« Last Edit: March 26, 2019, 12:50:51 pm by Handoko »

Handoko

  • Hero Member
  • *****
  • Posts: 3547
  • My goal: build my own game engine using Lazarus
Re: [LAMW] DrawCircle using jCanvasES2
« Reply #1 on: March 26, 2019, 12:22:59 pm »
And this is the apk:

 

TinyPortal © 2005-2018