Question Canvas Example in JS Web GUI Web Browser Application

 
Hi,
Not sure if anybody would want this, but I converted the classic Canvas drawing example to run as a JS GUI Web Brower Application in CT 7.5 . Enjoy!
-Dan Eller







unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  JS, Classes, SysUtils, Graphics, Controls, Forms, Dialogs, WebCtrls,math;

type

  { TWForm1 }

  TWForm1 = class(TWForm)
    WTimer1: TWTimer;
    procedure FormCreate(Sender: TObject);
    procedure FormResize(Sender: TObject);
    procedure WTimer1Timer(Sender: TObject);
     procedure FormPaint();
    procedure RotatePoints();

  private

  public

  end;


    type
    TRPoint = record

          X,Y:Real;

    end;

var
  WForm1: TWForm1;


   PointCount, MaxPoints:integer;
   Rotation:Real;


   Points: array [0..15] of TRPoint;

implementation

{$R *.frm}

{ TWForm1 }

procedure TWForm1.FormCreate(Sender: TObject);
begin
  Canvas.Pen.Color := clGreen;
    Rotation := 0;
        MaxPoints:=15;
    PointCount := MaxPoints;
         RotatePoints();
end;

procedure TWForm1.FormResize(Sender: TObject);
begin
  Invalidate();
  FormPaint();

end;

procedure TWForm1.WTimer1Timer(Sender: TObject);
begin
  RotatePoints();
  Invalidate();
  FormPaint();
end;



procedure TWForm1.RotatePoints();
var
   M_2PI,StepAngle,j:Real;
   i:integer;

begin
        M_2PI:=2 * PI;
        StepAngle:=M_2PI / PointCount;
        Rotation :=Rotation+ PI / 1024;
        if Rotation > StepAngle then
           begin
             Rotation  :=-StepAngle;
           end;
      i:=0;
      j:=Rotation;
       while i<PointCount do



              begin
                 j:=j+StepAngle;
                 i:=i+1;
                   Points.X :=cos(j);
                   Points.Y :=sin(j);
              end;




end;




procedure TWForm1.FormPaint();
var
   centerX,centerY,radius,i,j:integer;
begin

      Canvas.Clear;
       centerX := Width div 2;
     centerY := Height div 2;
          radius := min(centerY, centerX);
   //       Canvas.Ellipse(0, 0, radius*2, radius*2);



          for i := 0 to PointCount do
              begin
                     for j:=i+1 to PointCount do
                           begin
                                Canvas.MoveTo(radius+floor(Points.X*radius),radius+floor(Points.Y*radius));
                                Canvas.LineTo(radius+floor(Points[j].X*radius),radius+floor(Points[j].Y*radius));





                           end;
                end;

end;



end.
                               

 


Okay, here are the project files. Hope they can help someone in CodeOcean.
-Dan Eller

Screenshot of the example running on Tablet web browser.
 

Excelent Demo!
Thank You!