concentric-circle-spinner

[tsh73]

It supposed to look like this
frontend.horse/articles/concentric-circle-spinner/

I really have no idea what language they use or how it works

I tried with JB
too slow, but I'm almost there

BUT
I have no idea why outer ring is in opposite phase (relative to all other ones) near equilibrum point?
'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
nomainwin
open "test" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

N=5
M=int(50/N)-2
'M=3

#gr "size ";M
'#gr "size 3"
pi = acs(-1)
timer 1, [nxt]

[nxt]
#gr "cls"
timer 0
a0=pi-pi/4
A=A+0.1
B=A+1.2*sin(A)
'B=A
FOR i= N TO 1 step -1
'FOR i= N TO N-3 step -1
'FOR i= N TO N-1 step -1
scan
   R=(M+2)*(i-.5)
   'da=B/2^(i-1)
   da=B*2^(N-i)+a0
   a=da
   x=cx+R*cos(a)
   y=cy+R*sin(a)
   #gr "set ";x;" ";y
   for a = 0 to pi step 2/R
       x=cx+R*cos(a+da)
       y=cy+R*sin(a+da)
       #gr "goto ";x;" ";y
   next
next
   'wait
timer 60, [nxt]


wait

[quit]
   close #gr
end


[tsh73]

Fixed. Now, could it be made faster / with less flicker?
'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
'tsh73 June 2021
nomainwin
open "Circle spinner" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

'really JB is too slow for this - so I made it smaller then original, and 5 bands only
N=5
M=int(50/N)-2

#gr "size ";M
pi = acs(-1)
frameMS=30  '~60 frames per sec
'frameMS=1    'or as fast as your machine can do
timer frameMS, [nxt]

[nxt]
#gr "cls"
timer 0
a0=pi-pi/4  '45 degrees initial pos
A=A+0.07     'rotation speed, more or less
B=A+1.2*sin(A+pi)   'just plot that function and see its ups and downs

FOR i= 1 TO N
SCAN    'so you can BREAK it
   R=(M+2)*(i-.5)
   da=B*2^(N-i)+a0 'every inner circle rotates 2x faster
   a=da
   x=cx+R*cos(a)   'starting point of semicircle
   y=cy+R*sin(a)
   #gr "set ";x;" ";y
   for a = 0 to pi step 2/R    'JB has no "arc" command, so this is it
       x=cx+R*cos(a+da)
       y=cy+R*sin(a+da)
       #gr "goto ";x;" ";y
   next
next
timer frameMS, [nxt]

wait

[quit]
   close #gr
end


[tsh73]

I managed to use ARC part of a PIE. Now it has enough speed.
'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
'tsh73 June 2021
'try to use pie
nomainwin
open "Circle spinner" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

N=7
M=int(120/N)-2

#gr "size ";M
pi = acs(-1)
frameMS=50  '~60 frames per sec
'frameMS=1    'or as fast as your machine can do
timer frameMS, [nxt]

[nxt]
#gr "cls"
timer 0
a0=pi-pi/4  '45 degrees initial pos
A=A+0.07     'rotation speed, more or less
B=A+1.1*sin(A+pi)   'just plot that function and see its ups and downs

FOR i= N TO 1 step -1   'frow from bigger one
SCAN    'so you can BREAK it
   R=(M+2)*(i-.5)
   da=B*2^(N-i)+a0 'every inner circle rotates 2x faster
   a=da
   'JB has no "arc" command, so...
   'O RLY?
   #gr "color black"
   #gr "pie ";2*R;" ";2*R;" ";a*180/pi;" 180"
   #gr "color white"
   #gr "pie ";2*(R-M)+1;" ";2*(R-M)+1;" ";a*180/pi;" 180"
next
timer frameMS, [nxt]

wait

[quit]
   close #gr
end


[Brandon Parker]

Here are a couple of changes that make it a little better...
Here are the changes:
1. Move the Scan to outside of the For...Next Lop
2. Changed Pie to PieFilled (BackColor set accordingly)
3. Changed the White PieFilled operation to draw a complete 360-degrees (this gets rid of the annoying edges from the black that are still present)
4. Also changed the White PieFilled to start at 0 since it does not matter where we start when we are drawing an entire circle (I tried CircleFilled for this, but it kind of looked ... off ... or a little more flickery)
5. Changed the For...Next Loop to only iterate down to 2 since the 1 does not look to be what we would want.  If you want it back then simply encapsulate the two white "arc" operations in and "If (i > 1) Then" conditional and change the 2 back to a 1
6. Moved "timer 0" to be the first command that is executed when the timer is fired.


'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
'tsh73 June 2021
'try to use pie
'Updated Brandon Parker 2021
nomainwin
open "Circle spinner" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

N=7
M=int(120/N)-2

#gr "size ";M
pi = acs(-1)
frameMS=50  '~60 frames per sec
'frameMS=1    'or as fast as your machine can do
timer frameMS, [nxt]

[nxt]
timer 0
#gr "cls"
a0=pi-pi/4  '45 degrees initial pos
A=A+0.07     'rotation speed, more or less
B=A+1.1*sin(A+pi)   'just plot that function and see its ups and downs

FOR i= N TO 2 step -1   'frow from bigger one
'SCAN    'so you can BREAK it
   R=(M+2)*(i-.5)
   da=B*2^(N-i)+a0 'every inner circle rotates 2x faster
   a=da
   'JB has no "arc" command, so...
   'O RLY?
   #gr "color black; BackColor Black"
   #gr "PieFilled ";2*R;" ";2*R;" ";Int(a*180/pi);" 180"
   #gr "color white; BackColor White"
   #gr "PieFilled ";2*(R-M)+1;" ";2*(R-M)+1;" ";Int(a*180/pi);" 360"

next
Scan
timer frameMS, [nxt]

wait

[quit]
   close #gr
end


If you want that very last inner circle, use this. Note that the last half-circle is either drawn perfect, with a dent in the center, or with a buldge at the center. This is probably due to the pen size I believe.

'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
'tsh73 June 2021
'try to use pie
'Updated Brandon Parker 2021
nomainwin
open "Circle spinner" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

N=7
M=int(120/N)-2

#gr "size ";M
pi = acs(-1)
frameMS=50  '~60 frames per sec
'frameMS=1    'or as fast as your machine can do
timer frameMS, [nxt]

[nxt]
timer 0
#gr "cls"
a0=pi-pi/4  '45 degrees initial pos
A=A+0.07     'rotation speed, more or less
B=A+1.1*sin(A+pi)   'just plot that function and see its ups and downs

FOR i= N TO 1 step -1   'frow from bigger one
'SCAN    'so you can BREAK it
   R=(M+2)*(i-.5)
   da=B*2^(N-i)+a0 'every inner circle rotates 2x faster
   a=da
   'JB has no "arc" command, so...
   'O RLY?
   #gr "color black; BackColor Black"
   #gr "PieFilled ";2*R;" ";2*R;" ";Int(a*180/pi);" 180"

   If (i > 1) Then
       #gr "color white; BackColor White"
       #gr "PieFilled ";2*(R-M)+1;" ";2*(R-M)+1;" 0 360"
   End If
next
Scan
timer frameMS, [nxt]

wait

[quit]
   close #gr
end


{:0)

Brandon Parker

[Brandon Parker]

Updated to change the Pen Size to 1; it looks better, but I would still leave the If...Then in there that I mentioned previously.  I also changed the frameMS to be 100 to reduce the flickering.

'inspired by
'https://frontend.horse/articles/concentric-circle-spinner/
'tsh73 June 2021
'try to use pie
nomainwin
open "Circle spinner" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down"

#gr "home; posxy cx cy"

N=7
M=int(120/N)-2

#gr "size 1"
pi = acs(-1)
frameMS=100
'frameMS=1    'or as fast as your machine can do
timer frameMS, [nxt]

[nxt]
timer 0
#gr "CLS"
a0=pi-pi/4  '45 degrees initial pos
A=A+0.07     'rotation speed, more or less
B=A+1.1*sin(A+pi)   'just plot that function and see its ups and downs

FOR i= N TO 1 step -1   'frow from bigger one
'SCAN    'so you can BREAK it
   R=(M+2)*(i-.5)
   da=B*2^(N-i)+a0 'every inner circle rotates 2x faster
   a=da
   'JB has no "arc" command, so...
   'O RLY?
   #gr "color black; BackColor Black"
   #gr "PieFilled ";2*R;" ";2*R;" ";Int(a*180/pi);" 180"

   If (i > 1) Then
       #gr "color white; BackColor White"
       #gr "PieFilled ";2*(R-M)+1;" ";2*(R-M)+1;" 0 360"
   End If
next
Scan
timer frameMS, [nxt]

wait

[quit]
   close #gr
end


{:0)

Brandon Parker

[tsh73]

Looks really great, especially last one
On my machine I did not see any difference between piefilled and circlefilled, flicker-wise.

[Brandon Parker]

Yeah, sometimes I thought I saw a difference, and it makes sense to me that drawing the entire circle would take more time possibly creating more visible intermediate images that are shortly perceived by the human eye.

The effect is really awesome and eye-catching; thanks for starting the post!


{:0)

Brandon Parker

[B+]

Took some thinking to get rid of the blinking:
global H$, XMAX, YMAX, PI, DEG, RAD, goON
H$ = "gr"
XMAX = 500 '<======================================== actual drawing space needed
YMAX = 500 '<======================================== actual drawing space needed
PI = acs(-1)
DEG = 180 / PI
RAD = PI / 180

nomainwin

WindowWidth = XMAX + 8
WindowHeight = YMAX + 32
UpperLeftX = (1200 - XMAX) / 2  'or delete if XMAX is 1200 or above
UpperLeftY = (700 - YMAX) / 2   'or delete if YMAX is 700 or above

open "Spinner" for graphics_nsb_nf as #gr  '<======================= title
#gr "setfocus"
#gr "trapclose quit"
#gr "down"
#gr "fill black"
#gr "color darkblue"
#gr "size 15"
While 1
   For r = 1 To 200 Step 20
       scan
       a = b * r / 40
       #gr "color blue"
       call arc 250, 250, r + 10, a, 165
       #gr "color red"
       call arc 250, 250, r + 10, a+ 180, 165
   Next
   b = b + 2
   call pause 20
Wend
wait

sub arc xCenter, yCenter, arcRadius, dAStart, dAMeasure
   'notes:
   'you may want to adjust size and color for line drawing
   'using angle measures in degrees to match Just Basic ways with pie and piefilled
   'this sub assumes drawing in a CW direction if dAMeasure positive

   'for Just Basic angle 0 degrees is due East and angle increases clockwise towards South

   'dAStart is degrees to start Angle, due East is 0 degrees

   'dAMeasure is degrees added (Clockwise) to dAstart for end of arc

   rAngleStart = RAD * dAStart
   rAngleEnd = RAD * dAMeasure + rAngleStart
   Stepper = RAD* 180/ arcRadius 'fixed
   lastX = xCenter + arcRadius * cos(rAngleStart)
   lastY = yCenter + arcRadius * sin(rAngleStart)
   #gr "set ";int(lastX);" ";int(lastY)
   for rAngle = rAngleStart+Stepper to rAngleEnd step Stepper
       nextX = xCenter + arcRadius * cos(rAngle)
       nextY = yCenter + arcRadius * sin(rAngle)
       #gr "goto ";int(nextX);" ";int(nextY)    'int speeds things up
   next
end sub

sub pause mil   'tsh version has scan built-in
   t0 = time$("ms")
   while time$("ms") < t0 + mil : scan : wend
end sub

sub quit H$
   close #H$ '<=== this needs Global H$ = "gr"
   end       'Thanks Facundo, close graphic wo error
end sub


[tsh73]

To make inner part rotate too
For r = 20 To 200 Step 20
       scan
       a = b * r / 40
       #gr "color blue"
       call arc 250, 250, r - 10, a, 165
       #gr "color red"
       call arc 250, 250, r - 10, a+ 180, 165
   Next


---

EDIT
made me wonder of as how you made

'every inner circle rotates 2x faster

without using 2^ or at least *2 or /2?
Happened you just don't ;)
Anyway effect is nice and really looks like original, even if not mathematically the same.