Animations of digital and analogue clocks

[tenochtitlanuk]

I've put together a collection of LB clocks- analogue ( with moving hands) or digital with fluorescent, LED, Nixie etc displays.

For all of them I added lines to save 10 seconds of display and make an animated GIF so you can see them working.

Many of the clocks are my own. Others are from old LB fans like Andy Amaya and David Drake, Dave de Yoreo, Anatoly, etc. You can learn a lot from studying the coding! Let me know whose names I've missed-

My most recent fun one was to do a 24 hour analogue clock. It makes you realise how conditioned we are to 12 hour positions round a circle- make it 24 and your brain struggles.



I'd love to be able to add others you may have written- or been inspired to create! Put code on this thread.

PS for some reason this image is NOT a clock animation I intended, but COULD become one if I alter the angles!! 'Aani.gif' at my site is being read as 'ani.gif'!!

Does www.diga.me.uk/Aani.gif work for you???

[tenochtitlanuk]

Just remembered this one from Anatoly- you can see I'm working late over here!



Hope you read it without reading the decimal values!

[tenochtitlanuk]

See Animated clocks page

[tenochtitlanuk]

Here's the dice clock...

EDIT You may notice there is a bit of a time warp here in Wales...

[tsh73]

Here's resizable clock.
Nothing fancy but it resizes, and stays square.
In JB.
(I tried make GIF but AVI to GIF got 5xx frames and 1,3 mb. Probably it's wrong way. So I'd rather not post it here)
'resizable clock
'tsh73 Jul 2024
'to tenochtitlanuk thread
'https://libertybasiccom.proboards.com/thread/2596/animations-digital-analogue-clocks

'stubborn square window (2010)+ resizable clock [rectangle window] (2007)

'how it stays square in JB?
'just close and reopen after resize.
'(sorry window position does not hold)

'-----------------------------------------
nomainwin

pi = 3.1415926
oldW = -1 : oldH = -1

'get "slack" constants - because on resize I will get client size
   UpperLeftX = 20
   UpperLeftY = 20
   WindowWidth = 200   '100 seems to be too much - works different
   WindowHeight = 100
   open "Ajusting..." for graphics_nsb as #gr
   #gr, "home ; down ; posxy x y"
   'x, y give us width, height
   width = 2*x : height = 2*y
   close #gr

   slackX = 200-width
   slackY = 100-height

'-----------------------------------------
newSize=200

'-----------------------------------------
[openAgain]
   WindowWidth = newSize+slackX
   WindowHeight = newSize+slackY

open "Resizable clock" for graphics_nsb as #gr
   #gr "trapclose [quit]"
   #gr "down"

'---------
[timerLoop]
   #gr, "home; posxy halfW halfH"
   'print halfW, halfH
   if oldW = halfW*2 and oldH = halfH*2 then
   'nothing
   else   'resize handler
       firstTime=1
       oldW = halfW*2 : oldH = halfH*2
       goto [resized]
   end if

   if firstTime then
       firstTime=0

       #gr, "cls"
       r = min(oldW, oldH)/2
       size = r/10: if size <2 then size =2
       #gr, "size "; size;
       #gr, "circle ";r - size
       #gr, "color white"
       for i = 0 to 11
           x = (r - size)*cos(2*pi*i/12)+halfW
           y = (r - size)*sin(2*pi*i/12)+halfH
           #gr, "set ";x;" ";y
       next
       #gr, "flush"
   end if

'then update clock
   t$ = time$()
'    print t$
   hh = val(mid$(t$,1,2))
   if hh> 12 then hh = hh - 12
   mm = val(mid$(t$,4,2))
   ss = val(mid$(t$,7,2))
'    print hh,mm,ss
   #gr, "discard"

   'ss
   rr = r - 2*size
   w = int(size/4): if w<1 then w = 1
   a = int(360/60 * ss)
   #gr, "size "; w
   if a<>ssOld then
   #gr, "color white"
   #gr, "home; north; turn "; ssOld
   #gr, "go ";rr
   end if
   #gr, "color black"
   #gr, "home; north; turn ";a
   #gr, "go ";rr
   ssOld = a

   'mm
   rr = int((r - 2*size)*.8)
   w = int(size/2): if w<2 then w = 2
   a = int(360/60 * mm)
   #gr, "size "; w
   if a<>mmOld then
   #gr, "color white"
   #gr, "home; north; turn "; mmOld
   #gr, "go ";rr
   end if
   #gr, "color black"
   #gr, "home; north; turn ";a
   #gr, "go ";rr
   mmOld = a

   'hh handle
   rr = int((r - 2*size)*.6)
   w = int(size / 1.5): if w<2 then w = 2
   a = int(360/12 * (hh+mm/60))
   #gr, "size "; w
   if a<>hhOld then
   #gr, "color white"
   #gr, "home; north; turn "; hhOld
   #gr, "go ";rr
   end if
   #gr, "color black"
   #gr, "home; north; turn ";a
   #gr, "go ";rr
   hhOld = a

timer 1000, [timerLoop]
wait

'--------------------

[resized]
   newSize=max(130, min(oldW, oldH))
   close #gr
   goto [openAgain]

[quit]
   timer 0
   close #gr
   end


[tenochtitlanuk]

Neat idea! Will add soon.

Note the re-sizing...

[tsh73]

Backwards clock (now running near modified original program, Clock2.bas)


They do work
(but looking at it somehow makes me sick)
   'backwards clock
   'modification of clock2.bas from JB examples
   'tsh73 Jul 2024

   WindowWidth = 120
   WindowHeight = 144*3
   '110x128
   nomainwin
   open "Clock" for graphics_nsb_nf as #clock
   print #clock, "trapclose [exit]"

   print #clock, "fill white"
   print #clock, "home; posxy cx cy"
   cy3=cy/3
   for angle = 0 to 330 step 30
       print #clock, "up ; home ; north ; turn "; angle
'        print #clock, "go 40 ; down ; go 5"
       print #clock, "go 35 ; down ; go 5"

       print #clock, "up ; home ; north ; turn "; angle
       print #clock, "go 48 ; down"
       hh=(angle/30)
       if hh=0 then hh=12
       print #clock, "posxy x y"
      print #clock, "place ";x-3-3*(hh>9);" ";y+5
       print #clock, "\";hh
   next angle
   'need to mirror it
   call mirror "#clock", 0,2*cy3,128,2*cy3,0,4*cy3
   'call rect "#clock", 0,2*cy3,128,2*cy3
   #clock, "getbmp tmpBmp 0 ";4*cy3;" 128 128"
   'call rect "#clock", 0,4*cy3,128,2*cy3
       'wait

   'close / reopen right size
   close #clock

   WindowHeight = 160'144
   open "Clock" for graphics_nsb_nf as #clock
   print #clock, "trapclose [exit]"
   #clock,  "drawbmp tmpBmp 0 0"
   print #clock, "flush"

   timer 1000, [display]
   wait

[display]  ' call this only when seconds has changed


   time$ = time$()
   hours = val(time$)
   if hours > 12 then hours = hours - 12
   minutes = val(mid$(time$, 4, 2))
   seconds = val(right$(time$, 2))

   ' delete the last drawn segment, if there is one
   if segId > 2 then print #clock, "delsegment "; segId - 1

   ' center the turtle
   print #clock, "up ; home ; down ; north"

   ' erase each hand if its position has changed
   if oldHours <> hours then print #clock, "size 2 ; color white ; turn "; 0-(oldHours * 30 + int(oldMinutes/2)) ; " ; go 19 ; home ; color black ; north" : oldHours = hours
   if oldMinutes <> minutes then print #clock, "size 2 ; color white ; turn "; 0-oldMinutes * 6 ; " ; go 33 ; home ; color black ; north" : oldMinutes = minutes
   if oldSeconds <> seconds then print #clock, "size 1 ; color white ; turn "; 0-oldSeconds * 6 ; " ; go 33 ; home ; color black ; north" : oldSeconds = seconds

   ' redraw all three hands, second hand first
   print #clock, "size 1 ; turn "; 0-seconds * 6 ; " ; go 33"
   print #clock, "size 2 ; home ; north ; turn "; 0-(hours * 30 + int(minutes/2)); " ; go 19"
   print #clock, "home ; north ; turn "; 0-minutes * 6 ; " ; go 33"

   ' flush to end segment, then get the next segment id #
   print #clock, "flush"
   print #clock, "segment"
   input #clock, segId

   wait

[exit]

   timer 0   'prevent timer ticks from building up
   'confirm "Quit Clock?"; q$
   'if q$ = "yes" then
       close #clock
   'else
   '    timer 1000, [display]
   '    wait
   'end if

   end

sub mirror gr$, x,y,w,h,destX,destY
   for i=1 to w
       #gr$ "getbmp tmpBmp ";x+w-i;" ";y;" 1 ";h
       #gr$ "drawbmp tmpBmp ";destX+i;" ";destY
   next
end sub

sub rect gr$, x,y,w,h
   #gr$ "place " ;x;" ";y
   #gr$ "box ";x+w;" ";y+h
end sub


[tenochtitlanuk]

First try at candle- graphics need improving and the step size changing..

[tsh73]

Extra hour clock
That is 13-hours
exactExtraTime switch changes behaviour
Then not set, it shows "adjusted time"
Actually handles hows 12-h time (1st picture)
but face shows 13 h.
Since we used to 12-h, looking just on handles and ignoring digits, would be even useful.
(second picture)
Then exactExtraTime set, handles show exact time.
This means it will go till 12 then jump to 01, skipping 13-h (ah, those real life things.)
(third picture)

BTW, minutes/seconds are still 60 in full circle. But relating it to digits get harder :\
(there is ~ 4.615 minutes between hour marks!)
  'extra hour clock
   'modification of clock2.bas from JB examples
   'tsh73 Jul 2024

   'backward=1
   extraHour=1
   exactExtraTime=1 'shows actual time. If not set, handles show 12-hour time
   '----------------------
   sgn=(backward=0)-(backward=1)
   maxH=12+extraHour
maxVisualH=12+extraHour*exactExtraTime

   WindowWidth = 120
   WindowHeight = 144
   nomainwin
   open "Clock" for graphics_nsb_nf as #clock
   print #clock, "trapclose [exit]"

   print #clock, "fill white"
   da=360/maxH
   for angle = 0 to 359 step da
       print #clock, "up ; home ; north ; turn "; angle
'        print #clock, "go 40 ; down ; go 5"
       print #clock, "go 35 ; down ; go 5"

       print #clock, "up ; home ; north ; turn "; angle
       print #clock, "go 48 ; down"
       hh=int((angle+1)/da)
       'if hh=0 then hh=12
       if hh=0 then hh=maxH
       print #clock, "posxy x y"
      print #clock, "place ";x-3-3*(hh>9);" ";y+5
       print #clock, "\";hh
   next angle
   'need to mirror it

   print #clock, "flush"

   timer 1000, [display]
   wait

[display]  ' call this only when seconds has changed


   time$ = time$()
   hours = val(time$)
   if hours > 12 then hours = hours - 12
   minutes = val(mid$(time$, 4, 2))
   seconds = val(right$(time$, 2))

   ' delete the last drawn segment, if there is one
   if segId > 2 then print #clock, "delsegment "; segId - 1

   ' center the turtle
   print #clock, "up ; home ; down ; north"

   ' erase each hand if its position has changed
   if oldHours <> hours then print #clock, "size 2 ; color white ; turn "; sgn*(int(oldHours*360/maxVisualH) + int(oldMinutes/2)) ; " ; go 19 ; home ; color black ; north" : oldHours = hours
   if oldMinutes <> minutes then print #clock, "size 2 ; color white ; turn "; sgn*oldMinutes * 6 ; " ; go 33 ; home ; color black ; north" : oldMinutes = minutes
   if oldSeconds <> seconds then print #clock, "size 1 ; color white ; turn "; sgn*oldSeconds * 6 ; " ; go 33 ; home ; color black ; north" : oldSeconds = seconds

   ' redraw all three hands, second hand first
   print #clock, "size 1 ; turn "; sgn*seconds * 6 ; " ; go 33"
   print #clock, "size 2 ; home ; north ; turn "; sgn*(int(oldHours*360/maxVisualH) + int(minutes/2)); " ; go 19"
   print #clock, "home ; north ; turn "; sgn*minutes * 6 ; " ; go 33"

   ' flush to end segment, then get the next segment id #
   print #clock, "flush"
   print #clock, "segment"
   input #clock, segId

   wait

[exit]

   timer 0   'prevent timer ticks from building up
   'confirm "Quit Clock?"; q$
   'if q$ = "yes" then
       close #clock
   'else
   '    timer 1000, [display]
   '    wait
   'end if

   end

[daved]

LED Clock

nomainwin

WindowWidth = 760

WindowHeight = 680

UpperLeftX = Int((DisplayWidth - WindowWidth)/2)

UpperLeftY = Int((DisplayHeight - WindowHeight)/2)



open "Clock" for graphics_nsb_nf as #clock

#clock "trapclose [exit]"

#clock "fill lightgray"

#clock, "color black"



'Hours

print #clock, "size 10"

for angle =0 to 330 step 30

#clock "up ; home ; north ; turn "; angle

#clock "go 275 ; down ; go 0"

next angle



'Minutes

print #clock, "size 5"

for angle =0 to 1650 step 6

#clock "up ; home ; north ; turn "; angle

#clock "go 200 ; down ; go 0"

next angle



'Seconds

print #clock, "size 5"

for angle = 0 to 1650 step 6

#clock "up ; home ; north ; turn "; angle

#clock "go 125 ; down ; go 0"

next angle

angle = 0



'Center Dot

print #clock, "size 5"

#clock "up ; home ; north ";350

#clock "go 1 ; down"



'Place numbers on the face

number = 0

for angle = 30 to 180 step 30 '5 to 30 minutes

number = number + 5

#clock "up ; home ; north ; turn "; angle+1

#clock "go 230 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle

for angle = 210 to 240 step 30 '35 & 40 minutes

number = number + 5

#clock "up ; home ; north ; turn "; angle

#clock "go 230 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle

for angle = 270 to 330 step 30 '45 to 55 minutes

number = number + 5

#clock "up ; home ; north ; turn "; angle -1

#clock "go 230 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle



number = 0

for angle = 30 to 180 step 30 '1 to 6 o'clock

number = number + 1

#clock "up ; home ; north ; turn "; angle

#clock "go 300 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle

for angle = 210 to 240 step 30 '7 & 8 o'clock

number = number + 1

#clock "up ; home ; north ; turn "; angle

#clock "go 300 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle

for angle = 270 to 330 step 30 '9 to 11 o'clock

number = number + 1

#clock "up ; home ; north ; turn "; angle - 1

#clock "go 300 ; down "

print #clock, "color black; backcolor lightgray"

print #clock, "\";number

next angle

x = 12 ' 12 O'clock

x$ = str$(x)

print #clock, "stringwidth? x$ twidth"

TextWidth=twidth

print #clock, "place ";(WindowWidth/2-twidth/2)-5;" ";30

print #clock, "\";x$



'Update The Clock Every Second forever

#clock "flush"

timer 1000, [display]

wait



[display]

'test

'goto [test]

time$ = time$()

seconds = val(right$(time$, 2))

lenMinutes = len(time$)

if lenMinutes = 8 then

minutes = val(mid$(time$,4,2))

else

minutes = val(mid$(time$,3,2))

end if

hours = val(left$(time$, 2))

milHours = hours

if hours > 12 then hours = hours - 12





'Analog Clock Display "

if seconds < 10 then

seconds$ = str$(seconds)

seconds$ = "0"+seconds$

else

seconds$ = str$(seconds)

end if

if minutes < 10 then

minutes$ = str$(minutes)

minutes$ = "0"+minutes$

else

minutes$ = str$(minutes)

end if

if milHours < 13 then

AmPM$ = "AM"

else

AmPM$ = "PM"

end if

print #clock, "font Arial 14 BOLD"

print #clock, "color black; backcolor lightgray"

analogTime$ = str$(hours);":";minutes$;":";seconds$;" ";AmPM$

print #clock, "stringwidth? analogTime$ twidth"

TextWidth=twidth

print #clock, "place ";WindowWidth/2-twidth/2;" ";90

print #clock, "\";analogTime$



'toggle Center Dot

evenOdd1 = seconds/2

evenOdd1$ = str$(evenOdd1)



#clock "color lightgray"

print #clock, "size 20"

#clock "up ; home ; north ";350

#clock "go 0 ; down; go 0"



if instr(evenOdd1$,".") then 'even numbers have no decimal point

#clock "color red"

print #clock, "size 10"

else

#clock "color black"

print #clock, "size 5"

end if



#clock "up ; home ; north ";350

#clock "go 0 ; down; go 0"



'Count Seconds

#clock "color red"

print #clock, "size 10"

angle = seconds * 6



for fillSeconds = 6 to angle step 6

#clock "color red"

print #clock, "size 10"

#clock "up ; home ; north ; turn "; fillSeconds

#clock "go 125 ; down ; go 0"

next fillSeconds



if angle = 6 then

#clock "color lightgray"

print #clock, "size 10"

for clearSeconds = 0 to 1650 step 6

#clock "up ; home ; north ; turn "; clearSeconds

#clock "go 125 ; down ; go 0"

next clearSeconds



#clock "color black"

print #clock, "size 5"

for clearSeconds = 0 to 1650 step 6

#clock "up ; home ; north ; turn "; clearSeconds

#clock "go 125 ; down ; go 0"

next clearSeconds



#clock "color red"

print #clock, "size 10"

end if



#clock "up ; home ; north ; turn "; angle

#clock "go 125 ; down ; go 0"



'Count Minutes

#clock "color red"

print #clock, "size 10"

angle = minutes * 6



for fillMinutes = 6 to angle step 6

if (fillMinutes = 30) or (fillMinutes = 60) or (fillMinutes = 90) or (fillMinutes = 120)_

or (fillMinutes = 150) or (fillMinutes = 180) or (fillMinutes = 210) or (fillMinutes = 240)_

or (fillMinutes = 270) or (fillMinutes = 300) or (fillMinutes = 330) or (fillMinutes = 360) then

#clock "color green"

print #clock, "size 15"

else

#clock "color red"

print #clock, "size 10"

end if

#clock "up ; home ; north ; turn "; fillMinutes

#clock "go 200 ; down ; go 0"

next fillMinutes



if angle = 6 then

minutes = 60

#clock "color lightgray"

print #clock, "size 15"

for clearMinutes = 0 to 1650 step 6

#clock "up ; home ; north ; turn "; clearMinutes

#clock "go 200 ; down ; go 0"

next clearMinutes



#clock "color black"

print #clock, "size 5"

for clearMinutes = 0 to 1650 step 6

#clock "up ; home ; north ; turn "; clearMinutes

#clock "go 200 ; down ; go 0"

next clearMinutes

end if



'set a minute

if (minutes = 5) or (minutes = 10) or (minutes = 15) or (minutes = 20)_

or (minutes = 25) or (minutes = 30) or (minutes = 35) or (minutes = 40)_

or (minutes = 45) or (minutes = 50) or (minutes = 55) then ' or (minutes = 60) then

#clock "color green"

print #clock, "size 15"

else

#clock "color red"

print #clock, "size 10"

end if

#clock "up ; home ; north ; turn "; angle

#clock "go 200 ; down ; go 0"



'Count Hours

#clock "color green"

print #clock, "size 15"

angle = hours * 30



if minutes = 60 then

minutes = 1

#clock "color lightgray"

print #clock, "size 20"

for clearHours = 0 to 330 step 30

#clock "up ; home ; north ; turn "; clearHours

#clock "go 275 ; down ; go 0"

next clearHours



#clock "color black"

print #clock, "size 10"

for clearHours = 0 to 330 step 30

#clock "up ; home ; north ; turn "; clearHours

#clock "go 275 ; down ; go 0"

next clearHours



#clock "color green"

print #clock, "size 10"



end if



#clock "up ; home ; north ; turn "; angle

#clock "go 275 ; down ; go 0"



wait



[exit]

close #clock



end





[tenochtitlanuk]

I already added this one to my webpage, Dave! See it with others on my webpages

I'm presently struggling to make an animation of falling sand in an egg-timer to add to the collection.[/a]

[daved]

Sorry for the redundancy tenochtitlanuk :-)
Thanks for posting it on your web site -- the site looks vey nice with all those clocks!!

[tenochtitlanuk]

Haven't had much time to play with the egg-timer sand clock, but nearly there. At present I can have a grain drop every one second, and follow it down, and when necessary sideways.

Animation below skips the actual fall and shows just where each grain goes. My hope is to also show the top pile diminishing, and the whole lot turn 180 degrees to reset!

[tenochtitlanuk]

Present code- showing the grains falling...



   '   versionX12c.bas

   nomainwin

   WindowWidth  =270
   WindowHeight =460


   open "Sand Clock" for graphics_nsb as #wg

   #wg    "trapclose quit"

   global wg, hw, hdc, targetcolor,  p, dirn, layerOfTop


   hw      =hwnd( #wg)
   calldll #user32, "GetDC", hw as ulong, hdc as ulong

   #wg    "fill 160 160 70"

   dim cell( 25, 45)

   #wg "color black ; down"
   targetcolor   =0   +0 *2^8   +0 *2^16   '   black ( 0 0 0) is target colour to fill out TO

   for i =1 to 45                          '   draw the screen and fill equivalent 2D array values
       for j =1 to 25
           #wg "up ; goto "; 10 +j *9; " "; 425 -i *9
           if j =1 or j =25 or i =1 or i =23 or i =45 then '   main divisions
               cell( j, i) =3              '   no block here if zero.
               #wg "backcolor green"
           else
               cell( j, i) =0              '   no block here if zero.
               #wg "backcolor white"
           end if

           if ( j =13 and i =23) or ( i >=24) then         '   gap  between upper and lower divisions
               cell( j, i) =1              '   no block here if zero.
               #wg "backcolor red"
           end if

           #wg "down ; circlefilled 4"
       next j
   next i

   timer 1000, [drop]

   wait

 [drop]
   p           =  13                 '   position of centre column: new block arrives here, in row layerOfTop
   at          =  23
   del         =   5

 [falling]
       e$      =""

       do
           dirn    =2 *int( 2 *rnd( 1)) -1 '   -1 or +1
           nxt     =at -1

           blo     =cell( p      , nxt)
           lft     =cell( p -dirn, nxt)
           rgt     =cell( p +dirn, nxt)

           calldll #kernel32, "Sleep", del as long, retu as void

           select case
               case blo =0
                   call fill p, nxt,         "red",   1
                   call fill p, at ,         "white", 0
                   calldll #kernel32, "Sleep", del as long, retu as void
               case lft =0
                   call fill p -dirn, nxt,   "red",   1
                   call fill p      , at ,   "white", 0
                   calldll #kernel32, "Sleep", del as long, retu as void
                   p   =p -dirn
               case rgt =0
                   call fill p +dirn, nxt,   "red",  1
                   call fill p      , at,    "white", 0
                   calldll #kernel32, "Sleep", del as long, retu as void
                   p   =p +dirn
               case else
                   e$  ="endDrop"
           end select

           at  =at -1
           scan

       loop until nxt <3 or e$ ="endDrop" or p <=1 or p >=24

       #wg     "getbmp scr 10 10 270 460"
       bmpsave "scr", "result/" +str$( time$( "ms")) +".bmp"

   wait

   sub fill xI, yI, c$, d  '   x and y axis indices into cell array, colour and colour-number
       #wg "down ; backcolor "; c$
       x   = 10 +9 *xI
       y   =425 -9 *yI
       calldll #gdi32, "ExtFloodFill", hdc as ulong,_
           x                  as  long,  y as  long,_
           targetcolor        as  long,_
           _FLOODFILLBORDER   as  long, result as  long

       cell( xI, yI)   =d
   end sub

   sub quit h$
       calldll #user32, "ReleaseDC", hw as ulong, hdc as ulong, ret as void
       close #wg
       timer 0
       end
   end sub

'___________________________________________________________

     [goingL]
       do
           if cell( p +dirn, at) <>0 then
               print "target cell is colour 0, so can be entered and set to red and cell() updated & previous cell emptied"
               call fill p +dirn, at,     "red",   1
               calldll #kernel32, "Sleep", del as long, retu as void
               call fill p +dirn, at +1, "white", 0
               calldll #kernel32, "Sleep", del as long, retu as void
               at          =at -1
               p           =p +dirn
               scan
           end if
       loop until at <3