Author Topic: Cool Neon Clock written using p5js.bas  (Read 4929 times)

0 Members and 1 Guest are viewing this topic.

Offline SpriggsySpriggs

  • Forum Resident
  • Posts: 1145
  • Larger than life
    • View Profile
    • GitHub
Cool Neon Clock written using p5js.bas
« 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

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.

 
Screenshot 2020-10-01 015954.png


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

Offline Richard Frost

  • Seasoned Forum Regular
  • Posts: 316
  • Needle nardle noo. - Peter Sellers
    • View Profile
Re: Cool Neon Clock written using p5js.bas
« Reply #1 on: October 01, 2020, 04:17:40 pm »
No can run.  Requires Falcon library.  Bird flew off?
It works better if you plug it in.

Offline SpriggsySpriggs

  • Forum Resident
  • Posts: 1145
  • Larger than life
    • View Profile
    • GitHub
Re: Cool Neon Clock written using p5js.bas
« Reply #2 on: October 01, 2020, 04:22:40 pm »
No can run.  Requires Falcon library.  Bird flew off?

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

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Cool Neon Clock written using p5js.bas
« Reply #3 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
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline SpriggsySpriggs

  • Forum Resident
  • Posts: 1145
  • Larger than life
    • View Profile
    • GitHub
Re: Cool Neon Clock written using p5js.bas
« Reply #4 on: October 02, 2020, 01:43:57 am »
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/
Shuwatch!

Offline _vince

  • Seasoned Forum Regular
  • Posts: 422
    • View Profile
Re: Cool Neon Clock written using p5js.bas
« Reply #5 on: October 02, 2020, 03:52:41 pm »
Are you looking to recreate the checkmark animation? I think it would be easy enough

Offline SpriggsySpriggs

  • Forum Resident
  • Posts: 1145
  • Larger than life
    • View Profile
    • GitHub
Re: Cool Neon Clock written using p5js.bas
« Reply #6 on: October 02, 2020, 07:54:46 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.
Shuwatch!

Offline _vince

  • Seasoned Forum Regular
  • Posts: 422
    • View Profile
Re: Cool Neon Clock written using p5js.bas
« Reply #7 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

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Cool Neon Clock written using p5js.bas
« Reply #8 on: October 03, 2020, 05:09:41 am »
Its nice clock! Good work!
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials