Text Only | Text with Attachments

QB64.org Forum

Active Forums => Programs => Topic started by: SpriggsySpriggs on October 01, 2020, 01:59:36 am

Title: Cool Neon Clock written using p5js.bas
Post by: SpriggsySpriggs on October 01, 2020, 01:59:36 am
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 (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.  
  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)
  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
  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
  70.         SetWindowOpacity 200
  72.         SetWindowOpacity 255
  73.     END IF
  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)
  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$
Title: Re: Cool Neon Clock written using p5js.bas
Post by: Richard Frost on October 01, 2020, 04:17:40 pm
No can run.  Requires Falcon library.  Bird flew off?
Title: Re: Cool Neon Clock written using p5js.bas
Post by: SpriggsySpriggs on October 01, 2020, 04:22:40 pm
Quote from: Richard Frost on October 01, 2020, 04:17:40 pm
No can run.  Requires Falcon library.  Bird flew off?

Didn't realize it required falcon. It's attached now.
Title: Re: Cool Neon Clock written using p5js.bas
Post by: Pete on October 01, 2020, 09:42:06 pm
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
Title: Re: Cool Neon Clock written using p5js.bas
Post by: SpriggsySpriggs on October 02, 2020, 01:43:57 am
Quote from: Pete on October 01, 2020, 09:42:06 pm
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/ (https://sweetalert2.github.io/)
Title: Re: Cool Neon Clock written using p5js.bas
Post by: _vince on October 02, 2020, 03:52:41 pm
Are you looking to recreate the checkmark animation? I think it would be easy enough
Title: Re: Cool Neon Clock written using p5js.bas
Post by: SpriggsySpriggs on October 02, 2020, 07:54:46 pm
Quote from: _vince on October 02, 2020, 03:52:41 pm
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.
Title: Re: Cool Neon Clock written using p5js.bas
Post by: _vince on October 02, 2020, 10:42:44 pm
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
Title: Re: Cool Neon Clock written using p5js.bas
Post by: Ashish on October 03, 2020, 05:09:41 am
Its nice clock! Good work!
Text Only | Text with Attachments