Cool Neon Clock written using p5js.bas

[SpriggsySpriggs]

P5js is a library for JavaScript that gives you lots of graphical commands. Fellippe and Ashish both worked together and rewrote it for QB64. I went online and found an example online of a clock here:
https://p5js.org/examples/input-clock.html

I was able to make it look pretty similar in QB64 and I think it's pretty neat! Attached is the font I used to make the neon-looking time being shown. The clock automatically becomes translucent when it loses focus.

 

Code: QB64: [Select]

1. DIM SHARED cx, cy
2. DIM SHARED secondsRadius
3. DIM SHARED minutesRadius
4. DIM SHARED hoursRadius
5. DIM SHARED clockDiameter
6.  
7. DECLARE DYNAMIC LIBRARY "User32"
8.     FUNCTION SetLayeredWindowAttributes& (BYVAL hwnd AS LONG, BYVAL crKey AS LONG, BYVAL bAlpha AS _UNSIGNED _BYTE, BYVAL dwFlags AS LONG)
9.     FUNCTION GetWindowLong& ALIAS "GetWindowLongA" (BYVAL hwnd AS LONG, BYVAL nIndex AS LONG)
10.     FUNCTION SetWindowLong& ALIAS "SetWindowLongA" (BYVAL hwnd AS LONG, BYVAL nIndex AS LONG, BYVAL dwNewLong AS LONG)
11. END DECLARE
12.  
13. '$INCLUDE:'p5js.bas'
14.  
15. FUNCTION p5setup
16.     createCanvas 400, 400
17.     title "P5js Clock"
18.     strokeB 255
19.  
20.     DIM radius
21.     radius = min(width&, height) / 2
22.     secondsRadius = radius * 0.71
23.     minutesRadius = radius * 0.6
24.     hoursRadius = radius * 0.5
25.     clockDiameter = radius * 1.7
26.  
27.     cx = width / 2
28.     cy = height / 2
29. END FUNCTION
30.  
31. FUNCTION p5draw
32.     backgroundB 230
33.     noStroke
34.     fill 244, 122, 158
35.     p5ellipse cx, cy, clockDiameter / 2 + 20, clockDiameter / 2 + 20
36.     fill 237, 34, 93
37.     p5ellipse cx, cy, clockDiameter / 2, clockDiameter / 2
38.     DIM s
39.     DIM m
40.     DIM h
41.     s = map(seconds, 0, 60, 0, _PI * 2) - (_PI / 2)
42.     m = map(minute + map(seconds, 0, 60, 0, 1), 0, 60, 0, _PI * 2) - (_PI / 2)
43.     h = map(hour + map(minute, 0, 60, 0, 1), 0, 24, 0, _PI * 4) - (_PI / 2)
44.  
45.     strokeB 255
46.     strokeWeight 1
47.     p5line cx, cy, cx + COS(s) * secondsRadius, cy + SIN(s) * secondsRadius
48.     strokeWeight 2
49.     p5line cx, cy, cx + COS(m) * minutesRadius, cy + SIN(m) * minutesRadius
50.     strokeWeight 4
51.     p5line cx, cy, cx + COS(h) * hoursRadius, cy + SIN(h) * hoursRadius
52.  
53.     strokeWeight 2
54.     noFill
55.     beginShape p5POINTS
56.     FOR a = 0 TO 360 STEP 6
57.         LET angle = p5radians(a)
58.         LET x = cx + COS(angle) * secondsRadius
59.         LET y = cy + SIN(angle) * secondsRadius
60.         vertex x, y
61.     NEXT
62.     endShape p5CLOSE
63.     textAlign CENTER
64.     textFont "marquee moon.ttf"
65.     textSize 40
66.     stroke 0, 244, 249
67.     text Clock, _WIDTH / 2, 300
68.     _TITLE "P5js Clock - " + Clock
69.     IF _WINDOWHASFOCUS = 0 THEN
70.         SetWindowOpacity 200
71.     ELSEIF _WINDOWHASFOCUS THEN
72.         SetWindowOpacity 255
73.     END IF
74. END FUNCTION
75.  
76. SUB SetWindowOpacity (Level AS _UNSIGNED _BYTE)
77.     DIM Msg AS LONG
78.     CONST G = -20
79.     CONST LWA_ALPHA = &H2
80.     CONST WS_EX_LAYERED = &H80000
81.     DIM a AS LONG
82.     Msg = GetWindowLong(_WINDOWHANDLE, G)
83.     Msg = Msg OR WS_EX_LAYERED
84.     a = SetWindowLong(_WINDOWHANDLE, G, Msg)
85.     a = SetLayeredWindowAttributes(_WINDOWHANDLE, 0, Level, &H2)
86. END SUB
87.  
88. FUNCTION Clock$
89.     DIM hourclock AS STRING
90.     DIM minclock AS STRING
91.     DIM secclock AS STRING
92.     hourclock = LEFT$(TIME$, 2): H% = VAL(hourclock)
93.     minclock = MID$(TIME$, 3, 3)
94.     secclock = MID$(TIME$, 6)
95.     IF H% >= 12 THEN ampm$ = " PM" ELSE ampm$ = " AM"
96.     IF H% > 12 THEN
97.         IF H% - 12 < 10 THEN hourclock = STR$(H% - 12) ELSE hourclock = LTRIM$(STR$(H% - 12))
98.     ELSEIF H% = 0 THEN hourclock = "12" ' midnight hour
99.     ELSE: IF H% < 10 THEN hourclock = STR$(H%) ' eliminate leading zeros
100.     END IF
101.     Clock$ = hourclock + minclock + secclock + ampm$
102. END FUNCTION

[Richard Frost]

No can run.  Requires Falcon library.  Bird flew off?

[SpriggsySpriggs]

No can run.  Requires Falcon library.  Bird flew off?

Didn't realize it required falcon. It's attached now.

[Pete]

So you're saying you forgot to include that Falcon library? I experienced the same Falcon problem years ago. Nice to see a JavaScript conversion by the team, and thanks for making an example with it. Frankly, I'm a ground up programmer, but this is the future, and for productivity sake, it's not a bad thing at all.

Pete

My second favorite language is JavaScript
These are the things I think of as I sit

[SpriggsySpriggs]

My second favorite language is JavaScript
These are the things I think of as I sit

JavaScript is super cool. I wish there was a way to convert something like sweetalert2, a beautiful message box library for JavaScript.
https://sweetalert2.github.io/

[_vince]

Are you looking to recreate the checkmark animation? I think it would be easy enough

[SpriggsySpriggs]

Are you looking to recreate the checkmark animation? I think it would be easy enough

@_vince It does far more than that checkbox animation. I'd like to try recreating many of the different types of dialogs.

[_vince]

I've looked at the demo page, it's neat, but I thought the green checkmark was the most sophisticated and the red X second but I'm sure there's more to the library

[Ashish]

Its nice clock! Good work!