My Best Clock

[SierraKen]

For the first time I decided to use a .bmp picture as a background to a program I make. So I made this clock face using an old CAD program I have called Breeze Designer. Then I used the code from a clock I put on this forum a few months ago, which is also on my website. Here is the .zip file of the .bas and .bmp files needed and a picture of it I will add to the forum. It gongs on the top of every hour like my other one does (without using any extra sound files).  Hope you guys like it.

-Ken

[SierraKen]

And (of course) I made it even better! lol Just now I figured out how to make the clock hands look more real instead of just 1 LINE command.
Here is the updated version. Check out the picture too. I'm sure you all can make something like this already, but I like it. Please tell me what you think.

[bplus]

Looks nice.

[SierraKen]

Thanks bplus! I like small projects like this that are easy to figure out.

[bplus]

Ken, We can make that clock face with QB64, interested?

[SierraKen]

Sure!!! I guess we could with PAINT and a bunch of math that I have no idea of.  lol But if you want to help with that, go at it!

[bplus]

This is faster and more accurate than PAINT for filling a triangle with a color:

Code: QB64: [Select]

1. SUB fillTriangle (x1, y1, x2, y2, x3, y3, K AS _UNSIGNED LONG)
2.     STATIC a&
3.     D = _DEST
4.     IF a& = 0 THEN a& = _NEWIMAGE(1, 1, 32)
5.      _DEST a&
6.     PSET (0, 0), K
7.     _DEST D
8.     _MAPTRIANGLE _SEAMLESS(0, 0)-(0, 0)-(0, 0), a& TO(x1, y1)-(x2, y2)-(x3, y3)
9. END SUB

Feed it 3 points locations (x, y) and a _RGB32() color and a filled triangle magically appears!

So you can use that for your clock hands for practice.

OK so far?

Here comes a simple lesson about angles:

If the minute hand is pointing at angle a degrees, then it's opposite is a - 180 degrees or a + 180 degrees same difference.

Say we want nice iso triangle for the hands, the angle of one point is a - 120 degrees and the angle of the other point is a + 120 degrees.
 
If we want the 2 points at base of iso triagnle r distance away from the clock center, then the points are

xPlus120 = xCenter + r * COS(_D2R(a + 120))
yPlus120 = yCenter + r * SIN(_D2R(a + 120))

xMinus120 = xCenter + r * COS(_D2R(a - 120))
yMinus120 = yCenter + r * SIN(_D2R(a - 120))

xMinuteHand = xCenter + MinuteHandLength * COS(_D2R(a))
yMinuteHand = yCenter + MinuteHandLength * SIN(_D2R(a))

and there is your 3 points for a triangle to fill.

a is the angle of the minute hand in degrees.
r is the distance from center of clock you want to put the base of the iso Triangle, the ends of the clock hands.
_D2R is a function that converts an angle in Degrees to an angle in Radians so that SIN and COS work correctly.

BTW you are converting degrees to radians using these things:
(degreeAngle / 180 * 3.141592) = same as _D2R function, maybe better because they are all constants, so feel free to change the _D2R(degreeAngle) to (degreeAngle / 180 * 3.141592).

See if you get clock hands improved? I don't know if you know what you are doing for minute hand angles though??? If you do get that, all the above is piece of cake. :)

With this practice of clock hands, the clock face will be easier to follow.

[SierraKen]

Oh wow bplus, so all of that was just for the hands? That's a lot more bits than my 2 loops. To be honest, I really don't remember from school what COS and SIN do. I was never good in Trig.  I appreciate the lesson but with my head injury and memory problems, I doubt I could jump into it that fast. This is another reason why I have been very slow in gaining much higher in my programming than what I know how to do now. I might look into this sometime soon, but I have a lot on my plate for the next couple of days. So I'll look more into this in a couple days or so and see what I can come up with. I'll put it all on a Notepad.

[bplus]

Don't let SIN and COS throw you. All they do here is help locate points around a center, like the clock given the angle use the formula for X and Y and up comes your locations is all.

The tricky thing about the clock is that you want your 0 angle due North instead of due East, so you subtract 90 degrees from every angle, for hour, minute and second. Did you know you were doing that? :)

[bplus]

Hi Ken,

Here is clock face as promised so you no longer need to zip with image file, a few other changes also...

Code: QB64: [Select]

1. _TITLE "Clock by Ken G. and b+" 'b+ mod 2019-12-03
2. CONST xmax = 360, ymax = 368, xCenter = xmax / 2, yCenter = ymax / 2, p = 3.14159265, p2 = p * 2, pd2 = p / 2
3. DIM SHARED clockFace&
4. 'i = _LOADIMAGE("kclock.bmp", 32)
5. SCREEN _NEWIMAGE(360, 368, 32)
6. clockFace& = _NEWIMAGE(xmax, ymax, 32)
7. _DEST clockFace&
8. drawClockFace
9. _DEST 0
10. DO
11.     CLS
12.     _PUTIMAGE , clockFace&, 0
13.  
14.     hours = TIMER \ 3600
15.     minutes = TIMER \ 60 - hours * 60
16.     seconds = (TIMER - hours * 3600 - minutes * 60)
17.     ho$ = LEFT$(TIME$, 2): hou = VAL(ho$)
18.     min$ = MID$(TIME$, 4, 2): minu = VAL(min$)
19.     seco$ = RIGHT$(TIME$, 2): secon = VAL(seco$)
20.  
21.     'Hours
22.     h = 360 - hours * 30 + 180
23.     xxx = INT(SIN(h / 180 * 3.141592) * 100) + 180
24.     yyy = INT(COS(h / 180 * 3.141592) * 100) + 184
25.     FOR b = -8 TO 8 STEP .1
26.         LINE (180 + b, 184)-(xxx, yyy), _RGB32(155, 0, 0)
27.         LINE (180, 184 + b)-(xxx, yyy), _RGB32(155, 0, 0)
28.     NEXT b
29.  
30.     'Minutes
31.     m = 180 - minutes * 6
32.     xx = INT(SIN(m / 180 * 3.141592) * 150) + 180
33.     yy = INT(COS(m / 180 * 3.141592) * 150) + 184
34.     FOR b = -5 TO 5 STEP .1
35.         LINE (180 + b, 184)-(xx, yy), _RGB32(155, 80, 40)
36.         LINE (180, 184 + b)-(xx, yy), _RGB32(155, 80, 40)
37.     NEXT b
38.  
39.     'Seconds
40.     s = (60 - seconds) * 6 + 180
41.     x = INT(SIN(s / 180 * 3.141592) * 165) + 180
42.     y = INT(COS(s / 180 * 3.141592) * 165) + 184
43.     'FOR b = -5 TO 5 STEP .1
44.     ' LINE (180 + b, 184)-(x, y), _RGB32(255, 164, 100)
45.     LINE (180, 184)-(x, y), _RGB32(255, 164, 84)
46.     'NEXT b
47.  
48.     'fix clock arms with knob
49.     FOR rrr = 6 TO 0 STEP -.25
50.         CIRCLE (180, 184), rrr, _RGB32(1.5 * (255 - 25 * rrr), 1.5 * (128 - 17 * rrr), 1.5 * (64 - 8 * rrr))
51.     NEXT
52.  
53.     'Chimes
54.     IF minu = 0 AND secon = 0 THEN
55.         hour2 = hou
56.         IF hour2 > 12 THEN hour2 = hour2 - 12
57.         IF hour2 = 0 THEN hour2 = 12
58.         FOR chimes = 1 TO hour2
59.             ttt = 0
60.             DO
61.                 'queue some sound
62.                 DO WHILE _SNDRAWLEN < 0.1 'you may wish to adjust this
63.                     sample = SIN(ttt * 340 * ATN(1) * 8) '340Hz sine wave (ttt * 440 * 2p)
64.                     sample = sample * EXP(-ttt * 3) 'fade out eliminates clicks after sound
65.                     _SNDRAW sample
66.                     ttt = ttt + 1 / _SNDRATE 'sound card sample frequency determines time
67.                 LOOP
68.                 'do other stuff, but it may interrupt sound
69.             LOOP WHILE ttt < 2 'play for 2 seconds
70.             DO WHILE _SNDRAWLEN > 0 'Finish any left over queued sound!
71.             LOOP
72.         NEXT chimes
73.     END IF
74.     _DELAY 1
75.  
76.     two:
77.     _DISPLAY
78. LOOP
79.  
80. SUB drawClockFace
81.     DIM angle, r, n AS INTEGER, c AS _UNSIGNED LONG, x1, y1, x2, y2
82.     DIM level AS INTEGER, shade AS INTEGER, rr, gg, bb
83.     rr = 20: gg = 10: bb = 5
84.     CLS
85.     angle = p2 / 12: r = yCenter * .95
86.     FOR level = 0 TO 2
87.         x1 = xCenter + COS(0 - pd2) * r: y1 = yCenter + SIN(0 - pd2) * r
88.         FOR n = 1 TO 12
89.             x2 = xCenter + COS(n * angle - pd2) * r: y2 = yCenter + SIN(n * angle - pd2) * r
90.             IF n > 6 THEN shade = n - 6 ELSE shade = 6 - n
91.             IF n = 12 THEN shade = 6
92.             IF level = 1 THEN shade = 6 - shade
93.             c = _RGB32((level * 60) + rr + shade * 50, (level * 30) + gg + shade * 30, (level * 15) + bb + shade * 15)
94.             fillTriangle xCenter, yCenter, x1, y1, x2, y2, c
95.             x1 = x2: y1 = y2
96.         NEXT
97.         IF level = 0 THEN r = r - 15 ELSE r = r - 50
98.     NEXT
99. END SUB
100.  
101. SUB fillTriangle (x1, y1, x2, y2, x3, y3, K AS _UNSIGNED LONG)
102.     DIM d AS LONG
103.     STATIC a&
104.     d = _DEST
105.     IF a& = 0 THEN a& = _NEWIMAGE(1, 1, 32)
106.     _DEST a&
107.     PSET (0, 0), K
108.     _DEST d
109.     _MAPTRIANGLE _SEAMLESS(0, 0)-(0, 0)-(0, 0), a& TO(x1, y1)-(x2, y2)-(x3, y3)
110. END SUB
111.  
112.  

[bplus]

PS I was a little bit off with the arm ends near center of the clock, this code:

Code: QB64: [Select]

1. xPlus120 = xCenter + r * COS(_D2R(a + 120))
2. yPlus120 = yCenter + r * SIN(_D2R(a + 120))
3.  
4. xMinus120 = xCenter + r * COS(_D2R(a - 120))
5. yMinus120 = yCenter + r * SIN(_D2R(a - 120))
6.  

Draws the base of the iso Triangle on the same side of clock center as the pointed end. I intended to put the points of the base iso triangle on the other side of the clock center than the arm point, to do that, r had to be negative (equivalent to subtracting PI, I think):

Code: QB64: [Select]

1. xPlus120 = xCenter - r * COS(_D2R(a + 120))
2. yPlus120 = yCenter - r * SIN(_D2R(a + 120))
3.  
4. xMinus120 = xCenter - r * COS(_D2R(a - 120))
5. yMinus120 = yCenter - r * SIN(_D2R(a - 120))
6.  

Also I did the angles in radians, = in terms of PI, since this is mostly gobblely-gook to Ken :)
Oh wait, the arms code is all Ken's except my mod of seconds hand back to a line, still Ken's numbers... I redrew my own alarm clock with this clockface and my own arms code, testing what I said above. Still need to install the lovely chimes Ken has going here!. :)

[Pete]

Did you guys change the contrast between the inner and outer clock housing? The image originally posted appeared to have a brighter inner housing, which frankly made me think it was an umbrella clock. It's raining here today, so I was afraid to run it, in fear of getting wet when I checked the time... but when I ran the updated version, it had more of a concave appearance than the photo posted, which makes it look more the the type of clock I'm used to seeing with that similar design. Am I right, or are my eyes just playing tricks on me? I'm no artist, but I believe there is something about having the object appear with a darker contrast towards the center will make the object appear recessed or concave. In any event, nice project guys.

Pete

[bplus]

Hi Pete,

If you are asking if I changed the fake 3D face coloring then yes, yes I did:
 

Reversing the middle layer shading.

[Pete]

Yep, that's what I was inquiring about. Thanks. Now I can call the pharmacy and cancel my anti-hallucinogenic prescription. Darn, just when they started making them in gummies, too.

Pete

[SMcNeill]

Pete thought it looked like an umbrella before; now I think it looks like my doggy’s water bowl.  LOL!