Animated Oscillating Lined Star
lazarus / 39-Graphics

----------------------------------------------------------------------
Boleeman · 2025-05-15 13:06

An Animated Oscillating Lined Star


I could not get an anti-aliased line version to work at a nice smooth
speed so I used non-float points.


Used Gamma correct for hue.

A bit Trippy at a fast speed.

----------------------------------------------------------------------
Josh · 2025-05-15 15:37

Hi

just quicklook at code

var i is declared but not assigned.and used...

 0.55 * Sin(5);  should be pre-calculated
plus various others as its in a calc loop being run 100's of time

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 for j := 0
to num - 1 do  begin    x := j * 0.55 * Sin(5);    y := x * Sin(i + 2
* t + x / 2 + Pi / PhaseDivisor) / (numVertices - 2);    b := (j *
(numVertices - 1)) * Pi / numVertices;     _x := x * Cos(b) + y *
Sin(i);    _y := x * Sin(b) + y * Cos(i);     pathPoints[j] :=
Point(Round(cx + _x), Round(cy + _y));     col := myHSLAtoBGRA(hueDot,
0.9, 0.7, 0.3);    bmp.FillEllipseAntialias(pathPoints[j].X,
pathPoints[j].Y, 2, 2, col);  end;

----------------------------------------------------------------------
Nitorami · 2025-05-15 15:57

And instead of separate sin and cos calls you may use math.sincos().
Factor 2 faster.

----------------------------------------------------------------------
Boleeman · 2025-05-15 22:41

Thanks for the advice guys.

Josh, I realized later that i was not the needed variable, but instead
t. Thanks..

Nitorami, I did not know about math.sincos() so I learnt something
new. Thanks.

Now working reliably for other numbers of vertices.

----------------------------------------------------------------------
Josh · 2025-05-16 07:41

hi

optimizing timer for performance,pre-calculating values.
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 procedure
TForm1.Timer1Timer(Sender: TObject);var  x, y, _x, _y, b,temp1,angle:
Single;   j: Integer;  cx, cy: Integer;  col: TBGRAPixel;  pathPoints:
array of TPoint;  numVertices, PhaseDivisor, theSpeed: Integer;  _t:
Single;  hueDot, hueLine: Single;  invNumVert: Single;  sinT, cosT:
Single;  invPhase: Single;begin  bmp.Fill(BGRA(12, 12, 12,
seFillAlpha.Value));   cx := bmp.Width div 2;  cy := bmp.Height div
2;  theSpeed := tbSpeed.Position;   numVertices := seVertices.Value;//
 CoEffofT := seCoEffofT.Value;  PhaseDivisor := sePhaseDivisor.Value; 
_t := 1 / theSpeed;  SetLength(pathPoints, num);   // Precompute
smooth hue values  hueDot := Frac(u / 360);           // Dots hue 
hueLine := Frac((u + 30) / 360);   // Offset for line hue   //
constants used  loop  col := myHSLAtoBGRAFast(hueDot, 0.9, 0.7, 0.3); 
temp1:=0.55 * Sin(5);  invNumVert := 1 / (numVertices - 2);  invPhase
:= Pi / PhaseDivisor;  sinT := Sin(t);  cosT := Cos(t);   for j := 0
to num - 1 do  begin    x := j * temp1;    angle := 3 * t + x * 0.5 +
invPhase;    y := x * Sin(angle) * invNumVert;    b := (j *
(numVertices - 1)) * Pi / numVertices;    _x := x * Cos(b) + y *
sinT;    _y := x * Sin(b) + y * cosT;    pathPoints[j] :=
Point(Round(cx + _x), Round(cy + _y));   
bmp.FillEllipseAntialias(pathPoints[j].X, pathPoints[j].Y, 2, 2,
col);  end;   // Draw path  col := myHSLAtoBGRAFast(hueLine, 0.6, 0.3,
0.1);  bmp.DrawPolyLineAntialias(pathPoints, col, False);   // Animate
parameters  t += _t;  u -= 0.5;  if u < 0 then u := u + 360;  
bmp.Draw(PaintBox1.Canvas, 0, 0, True);end;              
Created an optimized myHSLAtoBGRA (named myHSLAtoBGRAFast), speed
tweeks and removal of power,linear gamma correction, colors generated
should be visually fine, a lot faster, couldbe  optimized further.

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 function
myHSLAtoBGRAFast(H, S, L, A: Single): TBGRAPixel;var  C, X, m:
Single;  R_, G_, B_: Single;  Hdeg: Single;  R, G, B, Alpha:
Byte;begin  Hdeg := Frac(H) * 360;  C := (1 - Abs(2 * L - 1)) * S;  X
:= C * (1 - Abs(Frac(Hdeg / 60) * 2 - 1));  m := L - C / 2;   if Hdeg
< 60 then  begin    R_ := C; G_ := X; B_ := 0;  end else if Hdeg < 120
then  begin    R_ := X; G_ := C; B_ := 0;  end else if Hdeg < 180
then  begin    R_ := 0; G_ := C; B_ := X;  end else if Hdeg < 240
then  begin    R_ := 0; G_ := X; B_ := C;  end else if Hdeg < 300
then  begin    R_ := X; G_ := 0; B_ := C;  end else  begin    R_ := C;
G_ := 0; B_ := X;  end;   // Skip gamma correction: faster linear
mapping  R := Round((R_ + m) * 255);  G := Round((G_ + m) * 255);  B
:= Round((B_ + m) * 255);  Alpha := Round(A * 255);   Result :=
BGRA(R, G, B, Alpha);end;

----------------------------------------------------------------------
Dzandaa · 2025-05-16 09:31

Hi
@Boleeman:

You can also try this:

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 function
GetRgb(r, g, b: Double): TBGRAPixel;var ret: TBGRAPixel;begin ret.red
:= byte(Round(r * 255.0)); ret.green := byte(Round(g *
255.0)); ret.blue := byte(Round(b * 255.0)); exit(ret);end; function
HsvToRgb(h, s, v: Double): TBGRAPixel;var hi: Integer; f, p, q, t:
Double; ret: TBGRAPixel;begin hi := Round((Floor(h / 60.0) mod 6)); f
:= (h / 60.0) - Floor(h / 60.0);  p := v * (1.0 - s); q := v * (1.0 -
(f * s)); t := v * (1.0 - ((1.0 - f) * s));  ret := GetRgb(0.0, 0.0,
0.0); case (hi) of  0:   ret := GetRgb(v, t, p);  1:   ret :=
GetRgb(q, v, p);  2:   ret := GetRgb(p, v, t);  3:   ret := GetRgb(p,
q, v);  4:   ret := GetRgb(t, p, v);  5:   ret := GetRgb(v, p,
q); end;  exit(ret);end;                                          
This is the code I use.

You just have to add Alpha channel and change Double to Single.

B->

----------------------------------------------------------------------
Boleeman · 2025-05-16 11:34

Thanks Josh and DZandaa for your codes and replies.

I wondered if there is a way to use Canvas2D and set the anti-aliased
line width to 0.5 pixels (I tried but it was too slow)


I worked out a way to always get tentacles by adjusting the
wavelength/WaveStretch (found it works reliably).

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  //
Precompute constant expressions  piDivPhase := Pi / PhaseDivisor; 
angleStep := (numVertices - 1) * Pi / numVertices;  invDiv := 1 /
(numVertices - 2);  SinCos(t, sinT, cosT);   for j := 0 to num - 1 do 
begin    x := j * X_SCALE;    phase := 2 * t + x / WaveStretch +
piDivPhase;    y := x * Sin(phase) * invDiv;    b := j * angleStep;  
 SinCos(b, sinB, cosB);     _x := x * cosB + y * sinT;    _y := x *
sinB + y * cosT;  

I also used sincos() and precalc.

I will need to look at Josh's code more closely but thought I would
just upload what I have at the moment.