The Cobalt Spinner

[Cobalt]

An animated spinner made from the image uploaded by @johnno56 on this topic: https://www.qb64.org/forum/index.php?topic=2818.0

Made using a very simple Brute Force approach by rotating the image by hand for a full rotation. This spins with a 4 degree rotation each frame, I thought about a 1 degree rotation but the overall sheet size would have been massive! even at 4 degrees there are 90 images covering 3600x3240 pixels resulting in a 34meg Bitmap, even JPG is over 4megs. (oddly enough PNG was 17megs!) so I don't even want to think what 360 images would have wound up being.

though using JPG wont work, so the spinners are saved as GIF. Not my favorite format for something like this but ah well.

Press ESC to stop the spinner.

Code: QB64: [Select]

1. 'The Cobalt Spinner
2. 'A World War 2 "Substitute Die Spinner" Animation simulator
3. 'July 19, 2020
4. 'Cobalt
5.  
6. DIM SHARED Layer(4) AS LONG
7. CONST TRUE = -1, FALSE = NOT TRUE
8. SCREEN _NEWIMAGE(640, 525, 32)
9. Layer(0) = _DISPLAY
10. Layer(1) = _NEWIMAGE(640, 525, 32)
11. Layer(2) = _LOADIMAGE("BoardGameSpinner_MonopolyWW2era_BaseA.jpg", 32) 'I like this base better!
12. 'Layer(3) = _LOADIMAGE("BoardGameSpinner_MonopolyWW2era_Base.bmp", 32)
13. Layer(4) = _LOADIMAGE("BoardGameSpinner_MonopolyWW2era.GIF", 32) '90 Hand Rotated Images!!!!
14. _CLEARCOLOR _RGB32(5), Layer(4)
15.  
16. Frame%% = 0 'Start at base rotation
17. Speed%% = 90 'speed of rotation(~1rps at 90)
18. DO
19.  _PUTIMAGE (0, 0), Layer(2), Layer(1) 'place the board
20.  'Place the spinner image using a bit of math
21.  _PUTIMAGE (13, 85)-STEP(359, 359), Layer(4), Layer(1), (0 + 360 * (Frame%% MOD 10), 0 + 360 * INT(Frame%% \ 10))-STEP(359, 359)
22.  _PUTIMAGE , Layer(1), Layer(0) 'copy the mix layer to the display
23.  _LIMIT Speed%% 'control how fast things go. This is not a good way but it works
24.  Frame%% = Frame%% + 1 'change the spinner image
25.  IF Frame%% = 90 THEN Frame%% = 0 'reset spinner image when we get to the end of animation
26.  IF INKEY$ = CHR$(27) THEN Trigger%% = TRUE 'start the slowing process
27.  IF Trigger%% THEN Speed%% = Speed%% - 1 'Slow the spinner down
28.  IF Speed%% = 2 THEN ExitFlag%% = TRUE 'stop the spinner!
29. LOOP UNTIL ExitFlag%%
30.  
31. 'At this point you could check which frame it is on and know what number(s) were spun!

the BaseA background I think works a bit better due to the slightly off round spinner due to the angle of the photo, which was VERY close but not perfect. As such there is a slight wobble to the spin. I also didn't adjust the light reflection off the center rivet, so if your watching it and thinking something is just not right that would probably be whats bugging you.

[Cobalt]

Okay, added the result side of things. Now my numbers say I should be off somewhere because I'm missing a 1,5 result somewhere but
I haven't seen it yet.

Code: QB64: [Select]

1. 'The Cobalt Spinner
2. 'A World War 2 "Substitute Die Spinner" Animation simulator
3. 'July 19, 2020
4. 'Cobalt
5.  
6. TYPE Results
7.  Small AS _BYTE
8.  Large AS _BYTE
9. END TYPE
10.  
11. DIM SHARED Layer(4) AS LONG, Result(89) AS Results
12.  
13. CONST TRUE = -1, FALSE = NOT TRUE
14.  
15. SCREEN _NEWIMAGE(640, 525, 32)
16. Layer(0) = _DISPLAY
17. Layer(1) = _NEWIMAGE(640, 525, 32)
18. Layer(2) = _LOADIMAGE("BoardGameSpinner_MonopolyWW2era_BaseA.jpg", 32) 'I like this base better!
19. Layer(4) = _LOADIMAGE("BoardGameSpinner_MonopolyWW2era.gif", 32) '90 Hand Rotated Images!!!!
20. _CLEARCOLOR _RGB32(5), Layer(4)
21.  
22. DATA 1,5,5,3,3,4,4,4,2,2,6,6,6,1,1,1,5,5,3,3,3,4,4,2,2,2,6,6,1,1,1,5,5,3,3,3,4,4,2,2,2,6,6,1,1,1
23. DATA 5,5,3,3,3,4,4,4,2,2,6,6,1,1,1,5,5,3,3,3,4,4,2,2,2,6,6,6,1,1,1,5,5,3,3,4,4,4,2,2,6,6,6,1: ',1  there is a number off somewhere here
24. DATA 5,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2
25. DATA 6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,5
26. FOR i%% = 0 TO 89
27.  READ Result(i%%).Small
28. NEXT i%%
29. FOR i%% = 0 TO 89
30.  READ Result(i%%).Large
31. NEXT i%%
32.  
33. RANDOMIZE TIMER
34. frame%% = 0 'Start at base rotation
35. Speed%% = 90 'speed of rotation(~1rps at 90)
36. Start! = TIMER
37. tim! = RND * 5 + 1
38. DO
39.  _PUTIMAGE (0, 0), Layer(2), Layer(1) 'place the board
40.  'Place the spinner image using a bit of math
41.  _PUTIMAGE (13, 85)-STEP(359, 359), Layer(4), Layer(1), (1 + 360 * (frame%% MOD 10), 0 + 360 * INT(frame%% \ 10))-STEP(359, 359)
42.  _PUTIMAGE (0, 0), Layer(1), Layer(0) 'copy the mix layer to the display
43.  _LIMIT Speed%% 'control how fast things go. This is not a good way but it works
44.  frame%% = frame%% + 1 'change the spinner image
45.  IF frame%% = 90 THEN frame%% = 0 'reset spinner image when we get to the end of animation
46.  IF INKEY$ = CHR$(27) THEN ExitFlag%% = TRUE ' In case something somewhere goes wrong ESC to quit
47.  IF (NOT trigger) AND TIMER >= Start + tim! THEN trigger%% = TRUE 'start the slowing process
48.  IF trigger%% THEN Speed%% = Speed%% - 1 'Slow the spinner down
49.  IF Speed%% = 2 THEN ExitFlag%% = TRUE 'stop the spinner!
50. LOOP UNTIL ExitFlag%%
51.  
52. '----------------------Final frame update---------------------
53. _PUTIMAGE (0, 0), Layer(2), Layer(1) 'place the board
54. 'Place the spinner image using a bit of math
55. _PUTIMAGE (13, 85)-STEP(359, 359), Layer(4), Layer(1), (1 + 360 * (frame%% MOD 10), 0 + 360 * INT(frame%% \ 10))-STEP(359, 359)
56. _PUTIMAGE (0, 0), Layer(1), Layer(0) 'copy the mix layer to the display
57. '-------------------------------------------------------------
58.  
59. 'At this point you could check which frame it is on and know what number(s) were spun!
60. LOCATE 1, 55: PRINT "Spin Time"; INT(tim! * 1000) / 1000
61. LOCATE 2, 55: PRINT "Frame:"; frame%%
62. LOCATE 3, 55: PRINT "Large:"; Result(frame%%).Large
63. LOCATE 4, 55: PRINT "Small"; Result(frame%%).Small
64. LOCATE 5, 55: PRINT "Total:"; Result(frame%%).Large + Result(frame%%).Small
65.  

[SierraKen]

Very nice Cobalt! You might want to keep it going though and let people spin as many times as they want with the mouse or space bar. I like how you made frames for the animation. I think there's a way to turn the pictures without using frames. I think B+ found a way awhile back when he made it so an image would turn 90 degrees before it prints on the printer. But I'm not sure if that would be a good spinner or not. I just saw his animation a couple times last year.

[SierraKen]

This also makes me wonder if QB64 can animate an animated GIF?

[FellippeHeitor]

Yes http://www.qb64.org/wiki/GIF_Images

[bplus]

Very nice Cobalt! You might want to keep it going though and let people spin as many times as they want with the mouse or space bar. I like how you made frames for the animation. I think there's a way to turn the pictures without using frames. I think B+ found a way awhile back when he made it so an image would turn 90 degrees before it prints on the printer. But I'm not sure if that would be a good spinner or not. I just saw his animation a couple times last year.

Yes with Rotozoom you would only need one snapshot of the wheel.

The calendar thing just used a _MAPTRIANGLE flip as I recall and would not be enough for spinning.

[SierraKen]

Thanks B+! The genius of QB64 strikes again! :)

Cobalt, here is a RotoZoom example I just made using my spinner2.png. It rotates non-stop on a DO/LOOP. Here is how to use the SUB:
RotoZoom 200, 200, Image&, 1, angle  'x = 200, y = 200 which will be the center point of the image. Image& is your picture. 1 is the zoom amount I have it set on here 2 would be twice zoomed in. And angle is the angle of rotation. Then put the SUB which is in my code example. 
B+ this is really awesome! I can think of all kinds of things now!

I found the code on the Wiki.

Code: QB64: [Select]

1. SCREEN _NEWIMAGE(400, 400, 32)
2. i& = _NEWIMAGE(400, 400)
3. i& = _LOADIMAGE("spinner2.png", 32)
4. PAINT (1, 1), _RGB32(255, 255, 255)
5. DO
6.     FOR spin = 1 TO 360
7.         RotoZoom 200, 200, i&, 1, spin 'Angle
8.         _DELAY .02
9.     NEXT spin
10. LOOP
11.  
12.  
13. SUB RotoZoom (X AS LONG, Y AS LONG, Image AS LONG, Scale AS SINGLE, Rotation AS SINGLE)
14.     DIM px(3) AS SINGLE: DIM py(3) AS SINGLE
15.     W& = _WIDTH(Image&): H& = _HEIGHT(Image&)
16.     px(0) = -W& / 2: py(0) = -H& / 2: px(1) = -W& / 2: py(1) = H& / 2
17.     px(2) = W& / 2: py(2) = H& / 2: px(3) = W& / 2: py(3) = -H& / 2
18.     sinr! = SIN(-Rotation / 57.2957795131): cosr! = COS(-Rotation / 57.2957795131)
19.     FOR i& = 0 TO 3
20.         x2& = (px(i&) * cosr! + sinr! * py(i&)) * Scale + X: y2& = (py(i&) * cosr! - px(i&) * sinr!) * Scale + Y
21.         px(i&) = x2&: py(i&) = y2&
22.     NEXT
23.     _MAPTRIANGLE (0, 0)-(0, H& - 1)-(W& - 1, H& - 1), Image& TO(px(0), py(0))-(px(1), py(1))-(px(2), py(2))
24.     _MAPTRIANGLE (0, 0)-(W& - 1, 0)-(W& - 1, H& - 1), Image& TO(px(0), py(0))-(px(3), py(3))-(px(2), py(2))
25. END SUB
26.  

[bplus]

There are so many ways to spin a cat!

Has anyone thought how much simpler it would be to just spin an arrow / pointer around the image?

I seem to recall a spinner like that for some childhood game.

BTW nice one Ken, specially speed and simplicity. Just pick a random number for it to stop maybe from 360 to some multiple of 360 say 10*360. Use an arrow to point at selection at True North?

[SierraKen]

Wow good idea B+, you saw my spinner thread right? Cobalt got this idea from my thread. Yeah I can make like Wheel of Fortune or some game to try and guess a number. :)

[SMcNeill]

How about a spinner of various die-sidedness?  In many games today, you need 4, 6, 8, 10, 12, 20, 100-sided dice.  One circle, of various rings, with a clockhand in the center, like a compass, could be used for all those results at once.

[SierraKen]

B+, for some reason it doesn't want to use transparent images, which I would need for the arm to circle around the circle with. At first I tried just a graphic arm but it's a bit beyond me in math.

[SierraKen]

Steve, that sounds pretty simple using my Game Board Spinner. It would just need a lot of work making various spinner graphics. Anyone is free to check that out. I suggest using the ones it comes with and going on from there so it stays with the same center point.

[bplus]

B+, for some reason it doesn't want to use transparent images, which I would need for the arm to circle around the circle with. At first I tried just a graphic arm but it's a bit beyond me in math.

I got it working fine but your wheel axle is a little off ;-))

[SMcNeill]

A Steve Spinner:

Code: QB64: [Select]

1. $COLOR:32
2.  
3. DIM Numbers(1 TO 100) AS INTEGER
4.  
5. SCREEN _NEWIMAGE(640, 640, 32)
6. _SCREENMOVE _MIDDLE
7. _DONTBLEND
8. RANDOMIZE TIMER
9.  
10. Texture = _LOADIMAGE("wood.jpg", 32)
11.  
12. CircleFill 320, 320, 320, -1
13.  
14. FOR x = 0 TO 639: FOR y = 0 TO 639 'Paint the clock our wooden texture to make it pretty...
15.         IF POINT(x, y) THEN _SOURCE Texture: PSET (x, y), POINT(x, y): _SOURCE 0
16. NEXT y, x
17.  
18.  
19. Minute = _NEWIMAGE(500, 80, 32)
20. _DEST Minute
21. FOR x = 250 TO 450: FOR y = 35 TO 45: PSET (x, y), Black: NEXT y, x
22. LINE (450, 35)-STEP(0, -5), Black
23. LINE -STEP(50, 11), Black
24. LINE -STEP(-50, 10), Black
25. LINE -STEP(0, -10), Black
26. PAINT (451, 35), Black
27. CircleFill 250, 40, 20, Black
28. _DEST 0
29.  
30. _BLEND
31.  
32. FOR i = 1 TO 100: Numbers(i) = TextToImage(_TRIM$(STR$(i)), 16, Black, 0, 0): NEXT
33. Numbers(100) = TextToImage("00", 16, Black, 0, 0)
34.  
35. COLOR Red, 0
36. FOR i = 320 TO 75 STEP -35
37.     FOR j = 0 TO 2 STEP .5 'thickness
38.         CIRCLE (320, 320), i - j, Black
39.     NEXT
40.     SELECT CASE i
41.         CASE 320: sides = 100
42.         CASE 285: sides = 20
43.         CASE 250: sides = 12
44.         CASE 215: sides = 10
45.         CASE 180: sides = 8
46.         CASE 145: sides = 6
47.         CASE 110: sides = 4
48.         CASE 75: sides = 2
49.     END SELECT
50.     n = 0
51.     FOR j = 0 TO 359.99 STEP 360 / sides
52.         n = n + 1
53.         x = 320 + (i - 15) * COS(_D2R(j - 90))
54.         y = 320 + (i - 15) * SIN(_D2R(j - 90))
55.         DisplayImage Numbers(n), x, y, 0, 0
56.     NEXT
57. NEXT
58. Spinner = ScaleImage(Minute, 1.3, 1)
59.  
60.  
61. PCOPY 0, 1
62. x = INT(RND * 360)
63. DisplayImage Spinner, 320, 320, x, 0
64.  
65. DO
66.     DO UNTIL move <= 0
67.         PCOPY 1, 0
68.         x = x + move
69.         move = move - 1
70.         DisplayImage Spinner, 320, 320, x, 0
71.         _LIMIT 360 'one full rotation per second
72.         _DISPLAY
73.     LOOP
74.     WHILE _MOUSEINPUT: WEND
75.     IF _MOUSEBUTTON(1) OR _KEYDOWN(32) THEN move = INT(RND * 360 * 5) 'up to 5 whole rotations per flick
76.  
77.     _LIMIT 30 'no need to use CPU power while just idling for a mouse click
78. LOOP
79. SLEEP
80. SYSTEM
81.  
82.  
83.  
84.  
85. SUB DisplayImage (Image AS LONG, x AS INTEGER, y AS INTEGER, angle AS SINGLE, mode AS _BYTE)
86.     'Image is the image handle which we use to reference our image.
87.     'x,y is the X/Y coordinates where we want the image to be at on the screen.
88.     'angle is the angle which we wish to rotate the image.
89.     'mode determines HOW we place the image at point X,Y.
90.     'Mode 0 we center the image at point X,Y
91.     'Mode 1 we place the Top Left corner of oour image at point X,Y
92.     'Mode 2 is Bottom Left
93.     'Mode 3 is Top Right
94.     'Mode 4 is Bottom Right
95.  
96.  
97.     DIM px(3) AS INTEGER, py(3) AS INTEGER, w AS INTEGER, h AS INTEGER
98.     DIM sinr AS SINGLE, cosr AS SINGLE, i AS _BYTE
99.     w = _WIDTH(Image): h = _HEIGHT(Image)
100.     SELECT CASE mode
101.         CASE 0 'center
102.             px(0) = -w \ 2: py(0) = -h \ 2: px(3) = w \ 2: py(3) = -h \ 2
103.             px(1) = -w \ 2: py(1) = h \ 2: px(2) = w \ 2: py(2) = h \ 2
104.         CASE 1 'top left
105.             px(0) = 0: py(0) = 0: px(3) = w: py(3) = 0
106.             px(1) = 0: py(1) = h: px(2) = w: py(2) = h
107.         CASE 2 'bottom left
108.             px(0) = 0: py(0) = -h: px(3) = w: py(3) = -h
109.             px(1) = 0: py(1) = 0: px(2) = w: py(2) = 0
110.         CASE 3 'top right
111.             px(0) = -w: py(0) = 0: px(3) = 0: py(3) = 0
112.             px(1) = -w: py(1) = h: px(2) = 0: py(2) = h
113.         CASE 4 'bottom right
114.             px(0) = -w: py(0) = -h: px(3) = 0: py(3) = -h
115.             px(1) = -w: py(1) = 0: px(2) = 0: py(2) = 0
116.     END SELECT
117.     sinr = SIN(angle / 57.2957795131): cosr = COS(angle / 57.2957795131)
118.     FOR i = 0 TO 3
119.         x2 = (px(i) * cosr + sinr * py(i)) + x: y2 = (py(i) * cosr - px(i) * sinr) + y
120.         px(i) = x2: py(i) = y2
121.     NEXT
122.     _MAPTRIANGLE (0, 0)-(0, h - 1)-(w - 1, h - 1), Image TO(px(0), py(0))-(px(1), py(1))-(px(2), py(2))
123.     _MAPTRIANGLE (0, 0)-(w - 1, 0)-(w - 1, h - 1), Image TO(px(0), py(0))-(px(3), py(3))-(px(2), py(2))
124. END SUB
125.  
126. SUB CircleFill (CX AS INTEGER, CY AS INTEGER, R AS INTEGER, C AS _UNSIGNED LONG)
127.     ' CX = center x coordinate
128.     ' CY = center y coordinate
129.     '  R = radius
130.     '  C = fill color
131.     DIM Radius AS INTEGER, RadiusError AS INTEGER
132.     DIM X AS INTEGER, Y AS INTEGER
133.     Radius = ABS(R)
134.     RadiusError = -Radius
135.     X = Radius
136.     Y = 0
137.     IF Radius = 0 THEN PSET (CX, CY), C: EXIT SUB
138.     LINE (CX - X, CY)-(CX + X, CY), C, BF
139.     WHILE X > Y
140.         RadiusError = RadiusError + Y * 2 + 1
141.         IF RadiusError >= 0 THEN
142.             IF X <> Y + 1 THEN
143.                 LINE (CX - Y, CY - X)-(CX + Y, CY - X), C, BF
144.                 LINE (CX - Y, CY + X)-(CX + Y, CY + X), C, BF
145.             END IF
146.             X = X - 1
147.             RadiusError = RadiusError - X * 2
148.         END IF
149.         Y = Y + 1
150.         LINE (CX - X, CY - Y)-(CX + X, CY - Y), C, BF
151.         LINE (CX - X, CY + Y)-(CX + X, CY + Y), C, BF
152.     WEND
153. END SUB
154.  
155. FUNCTION ScaleImage (Image AS LONG, xscale AS SINGLE, yscale AS SINGLE)
156.     w = _WIDTH(Image): h = _HEIGHT(Image)
157.     w2 = w * xscale: h2 = h * yscale
158.     NewImage& = _NEWIMAGE(w2, h2, 32)
159.     _PUTIMAGE (0, 0)-(w2 - 1, h2 - 1), Image&, NewImage&, (0, 0)-(w - 1, h - 1)
160.     ScaleImage = NewImage&
161. END FUNCTION
162.  
163.  
164. FUNCTION TextToImage& (text$, font&, fc&, bfc&, mode AS _BYTE)
165.     'text$ is the text that we wish to transform into an image.
166.     'font& is the handle of the font we want to use.
167.     'fc& is the color of the font we want to use.
168.     'bfc& is the background color of the font.
169.  
170.     'Mode 1 is print forwards
171.     'Mode 2 is print backwards
172.     'Mode 3 is print from top to bottom
173.     'Mode 4 is print from bottom up
174.     'Mode 0 got lost somewhere, but it's OK.  We check to see if our mode is < 1 or > 4 and compensate automatically if it is to make it one (default).
175.  
176.     IF mode < 1 OR mode > 4 THEN mode = 1
177.     dc& = _DEFAULTCOLOR: bgc& = _BACKGROUNDCOLOR
178.     D = _DEST
179.     F = _FONT
180.     IF font& <> 0 THEN _FONT font&
181.     IF mode < 3 THEN
182.         'print the text lengthwise
183.         w& = _PRINTWIDTH(text$): h& = _FONTHEIGHT
184.     ELSE
185.         'print the text vertically
186.         FOR i = 1 TO LEN(text$)
187.             IF w& < _PRINTWIDTH(MID$(text$, i, 1)) THEN w& = _PRINTWIDTH(MID$(text$, i, 1))
188.         NEXT
189.         h& = _FONTHEIGHT * (LEN(text$))
190.     END IF
191.  
192.     TextToImage& = _NEWIMAGE(w&, h&, 32)
193.     _DEST TextToImage&
194.     IF font& <> 0 THEN _FONT font&
195.     COLOR fc&, bfc&
196.  
197.     SELECT CASE mode
198.         CASE 1
199.             'Print text forward
200.             _PRINTSTRING (0, 0), text$
201.         CASE 2
202.             'Print text backwards
203.             temp$ = ""
204.             FOR i = 0 TO LEN(text$) - 1
205.                 temp$ = temp$ + MID$(text$, LEN(text$) - i, 1)
206.             NEXT
207.             _PRINTSTRING (0, 0), temp$
208.         CASE 3
209.             'Print text upwards
210.             'first lets reverse the text, so it's easy to place
211.             temp$ = ""
212.             FOR i = 0 TO LEN(text$) - 1
213.                 temp$ = temp$ + MID$(text$, LEN(text$) - i, 1)
214.             NEXT
215.             'then put it where it belongs
216.             FOR i = 1 TO LEN(text$)
217.                 fx = (w& - _PRINTWIDTH(MID$(temp$, i, 1))) / 2 + .99 'This is to center any non-monospaced letters so they look better
218.                 _PRINTSTRING (fx, _FONTHEIGHT * (i - 1)), MID$(temp$, i, 1)
219.             NEXT
220.         CASE 4
221.             'Print text downwards
222.             FOR i = 1 TO LEN(text$)
223.                 fx = (w& - _PRINTWIDTH(MID$(text$, i, 1))) / 2 + .99 'This is to center any non-monospaced letters so they look better
224.                 _PRINTSTRING (fx, _FONTHEIGHT * (i - 1)), MID$(text$, i, 1)
225.             NEXT
226.     END SELECT
227.     _DEST D
228.     COLOR dc&, bgc&
229.     _FONT F
230. END FUNCTION
231.  
232.  
233.  

With a wood-burnt style theme, and no bright color division, so your family can argue over whether the number is actually closer to the 3 or the 4 for the spin result!

Use <SPACE> or <LEFT MOUSE BUTTON> to spin the spinner.

[SierraKen]

Great B+. I'll have to look at yours Steve.

B+, here is the Edge Spinner you were talking about with the arrow going along the edge of the circle round and round until it stops. :) I been working on this for awhile today.