PopcornTime's loading animation

[FellippeHeitor]

I guess you can say I have a thing for loading animations, as this is not the first time I post one of these and it's likely far from the last. The thing is, we stare at these so often and for so long through the day that one can't help but wonder "can I code that?", especially as designers become more and more creative on those -- their goal is to entertain us after all, right?

This one is inspired by the one you can see if you use PopcornTime. Hit space to start the fake loading process to see how it represents the current percentage. Images included in the code, so no extra downloads required.

Code: QB64: [Select]

1. 'Image by OpenClipart-Vectors from Pixabay
2. 'https://pixabay.com/vectors/sphere-blue-glossy-3d-round-155819/
3.  
4. SCREEN _NEWIMAGE(450, 450, 32)
5. onImg = loadImage("on.png")
6. offImg = loadImage("off.png")
7.  
8. CONST true = -1, false = NOT true
9.  
10. DO
11.     CLS
12.  
13.     IF NOT going THEN PRINT "Press space to start." ELSE PRINT "Loading..."
14.  
15.     k& = _KEYHIT
16.  
17.     IF k& = -27 THEN SYSTEM
18.  
19.     IF k& = -32 THEN
20.         IF NOT going THEN p = 0: going = true
21.     END IF
22.  
23.     IF going THEN
24.         p = p + RND
25.         IF p >= 100 THEN going = false
26.     END IF
27.  
28.     a = a + .01
29.     IF a > _PI(2) THEN a = a - _PI(2)
30.  
31.     FOR i = a TO a + _PI(2) STEP _PI / 20
32.         x = _WIDTH / 2 + COS(i) * 200
33.         y = _HEIGHT / 2 + SIN(i) * 200
34.  
35.         IF (i - a) / _PI(2) < (p / 100) THEN
36.             c = onImg
37.         ELSE
38.             c = offImg
39.         END IF
40.  
41.         _PUTIMAGE (x - _WIDTH(c) / 2, y - _HEIGHT(c) / 2), c
42.     NEXT
43.  
44.     m$ = LTRIM$(STR$(FIX(p))) + "%"
45.     _PRINTSTRING ((_WIDTH - _PRINTWIDTH(m$)) / 2, (_HEIGHT - _FONTHEIGHT) / 2), m$
46.  
47.     _DISPLAY
48.     _LIMIT 30
49. LOOP
50.  
51. FUNCTION loadImage (fileName$)
52.     DIM c AS LONG, prevDest AS LONG
53.  
54.     SELECT CASE LCASE$(fileName$)
55.         CASE "on.png"
56.             RESTORE img1
57.         CASE "off.png"
58.             RESTORE img2
59.         CASE ELSE
60.             loadImage = -1
61.             EXIT FUNCTION
62.     END SELECT
63.  
64.     READ w, h
65.  
66.     prevDest = _DEST
67.     c = _NEWIMAGE(w, h, 32)
68.     _DEST c
69.  
70.     FOR i = 0 TO w - 1
71.         FOR j = 0 TO h - 1
72.             READ p~&
73.             PSET (i, j), p~&
74.         NEXT
75.     NEXT
76.  
77.     _DEST prevDest
78.     loadImage = c
79.     EXIT FUNCTION
80.  
81.     img1:
82.     DATA 16,16
83.     DATA &HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&H2FFFFFF,&H12FFFFFF,&H22FFFFFF,&H23FFFFFF,&H13FFFFFF,&H2FFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
84.     DATA &HF2FFF6,&HA4FFC2,&HBFFFD4,&H2FFFFFF,&H29FFFEFF,&H78E1E7E1,&HB6B6CCB7,&HD184AF7E,&HD2659B60,&HBA87AA88,&H80D1D8D5,&H30FFFFFF,&H3FFFFFF,&HCEFFDE,&HBDFFD4,&HFFFFFF
85.     DATA &HDEFFE9,&H6EFF9E,&H6EDFFF3,&H57F3F2F2,&HD7B9CEB9,&HFFA5D491,&HFF83DA44,&HFF5FD800,&HFF53CD00,&HFF3AB000,&HFF1B8600,&HE05C9357,&H64ECECED,&H9F4FFF8,&HA9FFC5,&HFAFFFC
86.     DATA &HE2FFEC,&H1D8FFE4,&H58F3F0F1,&HEEAEC9AC,&HFFC4F1A2,&HFFBBFF68,&HFFA3FF3A,&HFF85FF00,&HFF87FF00,&HFF8CFF00,&HFF72FA00,&HFF33BC00,&HF62D890A,&H69E8EBE9,&H4FDFFFF,&HFDFFFE
87.     DATA &HFFFFFF,&H2BFFFFFF,&HD5A8C4A5,&HFFACEB85,&HFF85FF00,&HFF66F100,&HFF50D800,&HFF40C900,&HFF3BC300,&HFF40C200,&HFF3EC500,&HFF3DCF00,&HFF26B400,&HE3529842,&H39FFFFFF,&HFFFFFF
88.     DATA &H1FFFFFF,&H7AD0DDD0,&HFF55A439,&HFF5EE200,&HFF3EC700,&HFF108800,&HFF0B8100,&HFF0D8900,&HFF0F8B00,&HFF0D8800,&HFF098400,&HFF098300,&HFF169300,&HFF097700,&H8EBFD0C0,&H6FFFFFF
89.     DATA &H14FFFFFF,&HB78CAB8C,&HFF056700,&HFF178500,&HFF026900,&HFF017500,&HFF169800,&HFF24AA00,&HFF23A900,&HFF1DA000,&HFF199A00,&HFF189800,&HFF0E8700,&HFF006C05,&HC971A070,&H1EFFFFFF
90.     DATA &H26FFFFFF,&HD35F7F61,&HFF00320E,&HFF00520A,&HFF006703,&HFF108D00,&HFF2CB800,&HFF45D800,&HFF55E700,&HFF4EDD00,&HFF41D000,&HFF38C600,&HFF22A800,&HFF007401,&HE14A884C,&H32FFFFFF
91.     DATA &H28FFFFFF,&HD65C785F,&HFF00250C,&HFF005508,&HFF027100,&HFF189B00,&HFF38C800,&HFF5AF100,&HFF75FF00,&HFF7AFF00,&HFF70FF00,&HFF51E500,&HFF2EB900,&HFF058000,&HE249884B,&H34FFFFFF
92.     DATA &H18FFFFFF,&HC07E9480,&HFF001C0A,&HFF005307,&HFF027100,&HFF1A9C00,&HFF3ACA00,&HFF5DF400,&HFF76FF00,&HFF7AFF00,&HFF72FF00,&HFF54E800,&HFF2FBB00,&HFF048000,&HCE6B9C6D,&H22FFFFFF
93.     DATA &H4FFFFFF,&H89C5CDC6,&HFF002309,&HFF004A09,&HFF006C00,&HFF119000,&HFF31BD00,&HFF4EE300,&HFF68FD00,&HFF70FF00,&HFF62F800,&HFF46D900,&HFF27B200,&HFF017500,&H99B4C8B6,&H9FFFFFF
94.     DATA &HFFFFFF,&H38FFFFFF,&HE34B724F,&HFF004112,&HFF006404,&HFF078000,&HFF1EA300,&HFF36C300,&HFF46D800,&HFF49DC00,&HFF40D400,&HFF32C300,&HFF0E9200,&HED3B8638,&H44FDFAFD,&HFFFFFF
95.     DATA &HF3F3F3,&H5F5F4F5,&H6DE4E9E7,&HF83F8033,&HFF177B00,&HFF027000,&HFF088500,&HFF179E00,&HFF1EAA00,&HFF1DAE00,&HFF1AAA00,&HFF088B00,&HFE147506,&H7DD7DED8,&H8FFFFFF,&HFFFFFF
96.     DATA &HE6E6E6,&H9C9C9C,&HBFAF9FB,&H6FE8EEE8,&HEA8EB781,&HFF459827,&HFF1B8600,&HFF108600,&HFF108C00,&HFF128E00,&HFF168900,&HF1458D3D,&H7ED6DDD7,&H10FFFFFF,&HFFFFFF,&HFFFFFF
97.     DATA &HF5F5F5,&HB4B4B4,&HCECECE,&H5FFFFFF,&H3DFDFCFF,&H96D7E0D5,&HD0AAC8A2,&HE68CB97E,&HE780B471,&HD48EB980,&H9EC0D5BB,&H46FAFAFA,&H8FFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
98.     DATA &HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&H8FFFFFF,&H22FFFFFF,&H38FFFFFF,&H39FFFFFF,&H25FFFFFF,&HAFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
99.  
100.     img2:
101.     DATA 16,16
102.     DATA &HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
103.     DATA &HFFFFFF,&H7F7F7F,&H7D7D7D,&H838383,&H6F6F6F,&H2A646464,&H74626262,&H9C565656,&H9E4A4A4A,&H794E4E4E,&H315E5E5E,&H727272,&H838383,&H848484,&H8E8E8E,&HFFFFFF
104.     DATA &HFFFFFF,&H6B6B6B,&H6A6A6A,&HF5C5C5C,&H9C595959,&HFD6D6D6D,&HFF696969,&HFF5F5F5F,&HFF565656,&HFF474747,&HFF333333,&HAB343434,&H185C5C5C,&H747474,&H7E7E7E,&HFFFFFF
105.     DATA &HFFFFFF,&H616161,&HF525252,&HC5616161,&HFF919191,&HFF898989,&HFF7F7F7F,&HFF797979,&HFF7A7A7A,&HFF797979,&HFF696969,&HFF484848,&HD6343434,&H1B545454,&H6E6E6E,&HFFFFFF
106.     DATA &HFFFFFF,&H5A5A5A,&H9C535353,&HFF838383,&HFF777777,&HFF646464,&HFF595959,&HFF4F4F4F,&HFF4D4D4D,&HFF4F4F4F,&HFF505050,&HFF4C4C4C,&HFF424242,&HB3373737,&H666666,&HFFFFFF
107.     DATA &HFFFFFF,&H2D4F4F4F,&HFB4D4D4D,&HFF5F5F5F,&HFF4B4B4B,&HFF363636,&HFF343434,&HFF363636,&HFF363636,&HFF343434,&HFF333333,&HFF333333,&HFF393939,&HFF2F2F2F,&H42535353,&HFFFFFF
108.     DATA &HFFFFFF,&H752E2E2E,&HFF2E2E2E,&HFF363636,&HFF2D2D2D,&HFF303030,&HFF3B3B3B,&HFF3F3F3F,&HFF3D3D3D,&HFF3B3B3B,&HFF393939,&HFF3A3A3A,&HFF373737,&HFF2C2C2C,&H8E464646,&HFFFFFF
109.     DATA &HFFFFFF,&H9F1A1A1A,&HFF1E1E1E,&HFF252525,&HFF2B2B2B,&HFF383838,&HFF444444,&HFF4B4B4B,&HFF4E4E4E,&HFF4B4B4B,&HFF474747,&HFF474747,&HFF404040,&HFF2F2F2F,&HB5454545,&HFFFFFF
110.     DATA &HFFFFFF,&HA31A1A1A,&HFF1B1B1B,&HFF262626,&HFF2F2F2F,&HFF3C3C3C,&HFF474747,&HFF505050,&HFF595959,&HFF5C5C5C,&HFF565656,&HFF4E4E4E,&HFF454545,&HFF323232,&HB8464646,&HFFFFFF
111.     DATA &HFFFFFF,&H801A1A1A,&HFF191919,&HFF252525,&HFF2F2F2F,&HFF3C3C3C,&HFF484848,&HFF515151,&HFF595959,&HFF5D5D5D,&HFF575757,&HFF4E4E4E,&HFF454545,&HFF313131,&H96525252,&HFFFFFF
112.     DATA &HFFFFFF,&H3B181818,&HFF181818,&HFF232323,&HFF2E2E2E,&HFF393939,&HFF454545,&HFF4D4D4D,&HFF545454,&HFF565656,&HFF525252,&HFF4C4C4C,&HFF434343,&HFF2E2E2E,&H4F737373,&HFFFFFF
113.     DATA &HFFFFFF,&H202020,&HB3131313,&HFF222222,&HFF2B2B2B,&HFF343434,&HFF3F3F3F,&HFF464646,&HFF4A4A4A,&HFF4B4B4B,&HFF4B4B4B,&HFF494949,&HFF383838,&HC5414141,&H3D3D3D3,&HFFFFFF
114.     DATA &HFFFFFF,&H4B4B4B,&H1E3A3A3A,&HDC404040,&HFF373737,&HFF303030,&HFF373737,&HFF3E3E3E,&HFF414141,&HFF434343,&HFF434343,&HFF373737,&HEA363636,&H2D8C8C8C,&HFFFFFF,&HFFFFFF
115.     DATA &HFFFFFF,&H525252,&H515151,&H209E9E9E,&HBF626262,&HFF484848,&HFF3B3B3B,&HFF383838,&HFF3A3A3A,&HFF3B3B3B,&HFF393939,&HCD454545,&H2C8B8B8B,&HFFFFFF,&HFFFFFF,&HFFFFFF
116.     DATA &HFFFFFF,&H646464,&H626262,&HFFFFFF,&H3E1E1E1,&H488D8D8D,&H9A707070,&HBF626262,&HC15D5D5D,&HA0636363,&H527C7C7C,&H6CECECE,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
117.     DATA &HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF,&HFFFFFF
118. END FUNCTION
119.  

[Pete]

PopcornTime? Nice, but I've seen butter. :D

Pete

[SMcNeill]

PopcornTime? Nice, but I've seen butter. :D

Pete

Pete, That was a salty comment.  Really cheesy.  It was a margarine, lackluster attempt to be corny, Pops.

[Pete]

Or we could reach a popcorn concession, because we've all been pun-ished enough!

Pete

[TempodiBasic]

Hi Fellippe
very fine this Popcorn...

I like those with chocolate!

[Ashish]

nice!