- Posts: 4
- Thank you received: 1
×
CodeTyphon Web Development Pas2JS, WASM, etc, discussions and problems
Question Canvas Example in JS Web GUI Web Browser Application
- Dan Eller
- Topic Author
- Offline
- New Member
-
Less
More
10 months 1 week ago #16073
by Dan Eller
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.
Canvas Example in JS Web GUI Web Browser Application was created by Dan Eller
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.
The following user(s) said Thank You: Darth Florus
Please Log in or Create an account to join the conversation.
- Sternas Stefanos
-
- Offline
- Moderator
-
- Ex Pilot, M.Sc, Ph.D
10 months 1 week ago #16074
by Sternas Stefanos
PilotLogic Architect and Core Programmer
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir
if you want to put your code to CodeOcean,
please attach the full project here
if you want to put your code to CodeOcean,
please attach the full project here
PilotLogic Architect and Core Programmer
Please Log in or Create an account to join the conversation.
- Dan Eller
- Topic Author
- Offline
- New Member
-
Less
More
- Posts: 4
- Thank you received: 1
10 months 1 week ago #16075
by Dan Eller
Okay, here are the project files. Hope they can help someone in CodeOcean.
-Dan Eller
Replied by Dan Eller on topic Canvas Example in JS Web GUI Web Browser Application
Okay, here are the project files. Hope they can help someone in CodeOcean.
-Dan Eller
Attachments:
Please Log in or Create an account to join the conversation.
- Dan Eller
- Topic Author
- Offline
- New Member
-
Less
More
- Posts: 4
- Thank you received: 1
10 months 1 week ago #16076
by Dan Eller
Replied by Dan Eller on topic Canvas Example in JS Web GUI Web Browser Application
Attachments:
Please Log in or Create an account to join the conversation.
- Sternas Stefanos
-
- Offline
- Moderator
-
- Ex Pilot, M.Sc, Ph.D
10 months 1 week ago #16077
by Sternas Stefanos
PilotLogic Architect and Core Programmer
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir
PilotLogic Architect and Core Programmer
Please Log in or Create an account to join the conversation.
- Darth Florus
-
- Offline
- New Member
-
Less
More
- Posts: 1
- Thank you received: 0
8 months 18 hours ago #16235
by Darth Florus
Replied by Darth Florus on topic Canvas Example in JS Web GUI Web Browser Application
Excelent Demo!
Thank You!
Thank You!
Please Log in or Create an account to join the conversation.