Ring Type Animation (cannot get correct animation happening)
lazarus / 39-Graphics

----------------------------------------------------------------------
Boleeman · 2025-05-22 12:10

I tried recreating an animated Hue Ring made in JavaScript.
The animation sort of looks like a ring being spun on a flat plane
surface (where it sort of rotates and rolls endlessly).

I think the curve is Lissajous? The JavaScript uses an arc, but I used
an ellipse. Not sure if that is the problem?

Here is the JavaScript where x = w / 2 + w / 3 * Math.sin( t ) and y=h
/ 2 + h / 3 * Math.sin( 2 * t )

I also tried doing a phase shift to try to achieve the effect, but
with no luck.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i var w =
c.width = window.innerWidth,                h = c.height =
window.innerHeight,                ctx = c.getContext( '2d' ),       
                       fx = function( t ){                           
                   return w / 2 + w / 3 * Math.sin( t )              
},                fy = function( t ){                                
              return h / 2 + h / 3 * Math.sin( 2 * t );              
},                                count = 100,                tick =
0; function anim(){                window.requestAnimationFrame( anim
);                tick += .02;                ctx.fillStyle =
'rgba(0,0,0,.1)';        ctx.fillRect( 0, 0, w, h );               
for( var i = 0; i < count; ++i ){                                var
rapport = i / count;                ctx.fillStyle =
'hsl(hue,80%,50%)'.replace( 'hue', rapport * 360 );               
ctx.beginPath();                ctx.arc( fx( tick + rapport * Math.PI
* 2 ), fy( tick + rapport * Math.PI ), 2, 0, Math.PI * 2 );          
    ctx.fill();        }}ctx.fillStyle = '#111'ctx.fillRect( 0, 0, w,
h );anim(); window.addEventListener( 'resize', function(){        w =
c.width = window.innerWidth;        h = c.height =
window.innerHeight;        ctx.fillStyle = '#111'        ctx.fillRect(
0, 0, w, h );})
and here is my 1st try at a Lazarus conversion ( the zipped version is
a bit different with a phase shift):

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls,  BGRABitmap,
BGRABitmapTypes; type   { TForm1 }   TForm1 = class(TForm)   
PaintBox1: TPaintBox;    Panel1: TPanel;    Timer1: TTimer;   
procedure FormCreate(Sender: TObject);    procedure FormResize(Sender:
TObject);    procedure Timer1Timer(Sender: TObject);  private    bmp:
TBGRABitmap;    tick: Double;    count: Integer;    procedure
DrawFrame;  public   end; var  Form1: TForm1; implementation {$R
*.lfm} { Helper function to convert HSL to TColor }function
HSLToColor(H: integer; S, L: Single): TBGRAPixel;var  hsla:
THSLAPixel;begin  hsla.hue := Round((H mod 360) / 360 * 65535); 
hsla.saturation := Round(S * 65535);  hsla.lightness := Round(L *
65535);  hsla.alpha := 65535;  Result := HSLAToBGRA(hsla);end; {
TForm1 } procedure TForm1.FormCreate(Sender: TObject);begin  bmp :=
TBGRABitmap.Create(PaintBox1.Width, PaintBox1.Height, BGRABlack); 
tick := 0;  count := 100;  Timer1.Enabled := True;end; procedure
TForm1.FormResize(Sender: TObject);begin  bmp.SetSize(PaintBox1.Width,
PaintBox1.Height);  bmp.Fill(BGRABlack);end; procedure
TForm1.Timer1Timer(Sender: TObject);begin  tick += 0.02; 
DrawFrame;end; procedure TForm1.DrawFrame;var  i: Integer;  rapport,
t: Double;  cx, cy, x, y: Single;  hueColor: TBGRAPixel;begin 
bmp.FillRect(0, 0, bmp.Width, bmp.Height, BGRA(0, 0, 0, 25),
dmDrawWithTransparency);   cx := bmp.Width / 2;  cy := bmp.Height /
2;   for i := 0 to count - 1 do  begin    rapport := i / count;     x
:= cx + (bmp.Width / 3) * sin(tick + rapport * Pi * 2);    y := cy +
(bmp.Height / 3) * sin(tick + rapport * Pi );     hueColor :=
HSLToColor(Round(rapport * 360), 0.8, 0.5);   
bmp.FillEllipseAntialias(x, y, 2, 2, hueColor);  end;  
bmp.Draw(PaintBox1.Canvas, 0, 0, True);end;  end.

----------------------------------------------------------------------
Dzandaa · 2025-05-23 14:19

Hi Eddie,

Some minor changes for the fun

B->

----------------------------------------------------------------------
Boleeman · 2025-05-24 05:45

Thanks DZandaa.

Attached is the original JavaScript (just to see what the animation
looks like).
I think that using arc may make it animate that way (instead of using
ellipse).