| Bytes | Lang | Time | Link |
|---|---|---|---|
| 108 | convey | 211224T154853Z | ZeroCode |
| 180 | AWK | 250930T162645Z | xrs |
| 3934 | MATL | 211224T011104Z | Luis Men |
| 093 | JavaScript | 220330T023948Z | Matthew |
| 055 | APL Dyalog Unicode | 211224T000720Z | Adá |
| 091 | Python 3.8 prerelease | 211228T042446Z | M Virts |
| 234 | HTML5 + CSS3 78 + 156 = | 211226T230101Z | Ismael M |
| nan | pug + CSS | 211226T112647Z | ccprog |
| 089 | Wolfram Mathematica | 211227T023953Z | theorist |
| 251 | HTML5 + CSS3 | 211224T075351Z | Neil |
| 149 | C gcc | 211226T044429Z | ErikF |
| 158 | Python 2 | 211225T184602Z | ElPedro |
| nan | CP1610 machine code | 211224T012622Z | Arnauld |
| 032 | Stax | 211225T125234Z | Razetime |
| 036 | 05AB1E | 211224T201220Z | Kevin Cr |
| 019 | Charcoal | 211224T002705Z | Neil |
convey, 108 bytes
You never said that the program must have an output, you said in fact "a program that displays exactly the following ASCII animation"
And my program has that animation inside it:
>>,'######'[
^<v
^<
>>>v >>>v
>,<<< ,<<<
^ >v'######'[
^<< >^,'######'[
>>^ ^<<
'######'[
Here is the program running:
And in the center you can see... THE LOAD ANIMATION :v
Really the programs doesn't start by an state of the animation, it waits two cycles before start but... it's cool... I suppose?
AWK, 180 bytes
END{for(j=7;++j;){a="801978829688398548"
for(i=0;i++<17;printf(1~i?"\r":X)(8~x?FS:9~x?RS:(j-x)%8<6?"#":" "))x=substr(a,i,1)
system("sleep .1")
for(i=0;i++<3;)printf"\033[A\033[K"}}
Not pretty, but it works...
MATL, 39 34 bytes
`3&Xx0'=<.Ic^w'FO8:@YShZah4eH>ZcDT
Try it at MATL online!
How it works
` % Do..while
3&Xx % Pause for 300 ms and clear screen
0 % Push 0
'=<.Ic^w' % Push this string (*)
F % Push false (**)
O % Push 0
8: % Push [1 2 ... 8]
@ % Push current iteration index, k
YS % Rotate right by k units. For example, in the 1st iteration
% (k=1) this gives [8 1 2 3 4 5 6 7]
h % Concatenate: prepends 0. This gives [0 8 1 2 3 4 5 6 7]
% in the 1st iteration
Za % Base conversion. Converts the string (*) from the base
% formed by all printable ASCII chars except single quote
% (represented by the false input, (**)) to the base (***).
% This gives [6 5 0 7 0 0 4 8 0 0 3 0 1 2] in the 1st iteration
h % Concatenate: prepends 0. Gives [0 6 5 0 7 0 0 4 8 0 0 3 0 1 2]
4e % Reshape into 4-row matrix in column-major order. This pads with
% a 0 at the end to have a number of entries multiple of 4. Gives
% [ 0 7 8 0 ;
% 6 0 0 1 ;
% 5 0 0 2 ;
% 0 4 3 0 ]
% in the 1st iteration. For other iterations the nonzero values
% will be rotated with respect to the above
H> % Greater than 0? Gives
% [ 0 1 1 0 ;
% 1 0 0 0 ;
% 1 0 0 0 ;
% 0 1 1 0 ]
Zc % Convert nonzeros to '#' and zeros to char 0 (shown as space)
% [ ' ## ' ;
% '# ' ;
% '# ' ;
% ' ## ' ]
D % Display
T % Push true
% End (implicit). A new iteration is run because the top of the
% stack is true
JavaScript, 93 bytes
setInterval(_=>console.log(` 01
7 2
6 3
54`.replace(/\S/g,n=>(i-n)%8<6?'#':' ',i++)),i=99)
APL (Dyalog Unicode), 60 55 bytes
Full program. Requires 0-based indexing. Uses 0 and 1 instead of and #. Waits 1 seconds between frames and stops after the 8th.
⎕ED&'a'⋄{⎕DL≡a∘←⊃⍤⍕¨4 4⍴'012080037004065'∊⍕1+8|⍵+⍳6}¨⍳8
'a' the (eventual) variable name "a"
…& in a background thread:
⎕ED open an EDit window on that name
⋄ then:
⍳8 generate the integer sequence 0…7
{…}¨ on each element of that, apply the following anonymous lambda:
⍳6 generate the integer sequence 0…5
⍵+ add the argument to that
8| find the division remainder of that when divided by 8
1+ increment that
⍕ format as space-separated text
'012080037004065'∊ for each character in this string, check if it is a member (1) or not (0) of that string
4 4⍴ reshape those 16 1s and 0s into a 4-by-4 matrix
⍕¨ format each of those numbers as a 1-character list
⊃¨ get the first character of each
a∘← globally assign that value to the variable a (the edit window will update)
≡ get the nesting depth of that matrix (it is 1)
⎕DL DeLay that many seconds
Python 3.8 (pre-release), 91 bytes
Not my favorite because there's no delay...
Also this only works with a terminal that supports moving the cursor with \x1b[r;cH, and clearing the terminal with \x1b[2J (... It works for me in termux on Android so far...)
[print('\x1b[2J','\x1b[%c;%cH*'*6%(*('2131424334241312'*2)[b*2:b*2+12],))for b in range(8)]
Python 3.8 (pre-release), 119 bytes
Here's a more realistic answer with the most obvious delay.
import time;[print('\x1b[2J','\x1b[%c;%cH*'*6%(*('2131424334241312'*2)[b*2:b*2+12],))or time.sleep(1)for b in range(8)]
HTML5 + CSS3 - 78 + 156 = 234 bytes
This answer is entirely based on @Neil's answer.
This was offered as a size reduction of his original answer, which he allowed me to share as an answer.
This answer includes a 1 byte trick as well, taken from the original answer.
pre>*{animation:a steps(4,start)1s calc(var(--c,0)*-125ms)infinite}c{--c:7}d{--c:1}e{--c:6}f{--c:2}h{--c:5}j{--c:3}k{--c:4}@keyframes a{to{visibility:hidden
<pre> <a>#</a><c>#</c>
<d>#</d> <e>#</e>
<f>#</f> <h>#</h>
<j>#</j><k>#</k>
This relies entirely on invalid tags, to calculate the CSS animation delays. This allows to shorten the selectors a lot, and is shorter than pre-calculating the delays.
If we're allowed to take certain liberties with the presentation of the loading animation, it's possible to reduce the size a few more bytes.
Using opacity instead of visibility, it's possible to have 2 hidden and all others partially visible.
If the timing can be flexible, it is possible to save some bytes as well.
This also includes a suggestion by @Neil, to use 1s steps for 8s, shaving this one down by 2 bytes.
As such, here's a 78 + 145 = 223 bytes long solution, which might not be valid (but looks prettier, in my opinion):
pre>*{animation:a steps(4,start)8s calc(var(--c,0)*-1s)infinite}c{--c:7}d{--c:1}e{--c:6}f{--c:2}h{--c:5}j{--c:3}k{--c:4}@keyframes a{to{opacity:0
<pre> <a>#</a><c>#</c>
<d>#</d> <e>#</e>
<f>#</f> <h>#</h>
<j>#</j><k>#</k>
Please remember to upvote @Neil's answer before considering upvoting mine.
pug + CSS, 81 + 135 = 216 87 + 123 = 210 bytes
-o=54060,i=0
while o>>=1
if o&1
a(style=`--i:-${((i&1?7:0)^i++>>1)/8}s`) 0
else
b
body{display:grid;grid:none/repeat(4,1ch)}a{animation:a steps(4,start)1s var(--i)infinite}@keyframes a{to{visibility:hidden
Watch it on CodePen. Click on the downward arrow in the HTML area to see the compiled HTML.
The animation is inspired by Neil's answer, but the custom CSS variables are injected by pug.
The characters are ordered with a CSS grid, four items per row with a width of 1ch each.
1ch is defined as the exact advance of the 0 character in that font. That is the reason for displaying it, so the output is exactly aligned as if it was formatted with <pre>.
Edit: saved 6 bytes with the help of Ismael Miguel.
Wolfram Mathematica 89 bytes
ListPlot[CirclePoints@8~RotateLeft~u~Drop~2,PlotRange->{{-1,1},{-1,1}}]~Animate~{u,0,7,1}
This gif is a bit glitchy, but the above animation does appear correctly, and play automatically and continuously, within a Mathematica notebook.
How it works:
The ASCII characters in the challenge are arranged as vertices on an octagon rather than points on a circle (the left and right pairs are vertically aligned, and the top and bottom pairs are horizontally aligned), so I used CirclePoints@8 to get the coordinates of the 8 vertices of a regular octagon centered about {0,0}. I rotated this coordinate list successively to the left by u, and then dropped the first two points. I used ListPlot to plot these, and then animated this, increasing u from 0 to 7 in increments of 1.
The characters are displayed as plot points.
Even though ,PlotRange->{{-1,1},{-1,1}} costs 27 bytes, an explicit plot range specification was needed to maintain the aspect ratio of the plot as the points were rotated, so that the points would always appear at the same position on the screen.
Alternately, for three less bytes (86), one could use ListPolarPlot to put the six points on an actual circle (separated by angles of Pi/4), rather than the vertices of an octagon:
ListPolarPlot[1 &~Array~6,DataRange->{u,5*Pi/4+u},PlotRange->Full]~Animate~{u,0,7,Pi/4}
This latter code would have been longer than the former, except that here the position and aspect ratio can be fixed using PlotRange->Full instead of PlotRange->{{-1,1},{-1,1}}.
HTML5 + CSS3, 190 + 98 = 288 162 + 102 = 264 86 + 170 166 165 = 256 252 251 bytes
tt{--c:1}div{--c:2}div tt{--c:3}a+a{--d:calc(7 - var(--c,0))}a{animation:a steps(4,start)1s calc(var(--d,var(--c,0))/8*-1s)infinite}@keyframes a{to{visibility:hidden
<pre> <a>#</a><a>#</a>
<tt><a>#</a> <a>#</a><div><a>#</a> <a>#</a>
<tt> <a>#</a><a>#
Explanation: This is based on my Stack Overflow answer to Imitating a blink tag with CSS3 animations, however the number of steps is set to 4 to reduce the duty cycle from 80% to 75% and CSS variables are used to offset the animation of each # character. Edit: Saved at least 24 bytes thanks to @IsmaelMiguel. Saved 1 byte by stealing @ccprog's 1s/8 trick.
C (gcc), 162 149 bytes
- -13 thanks to ceilingcat
Loops forever. Each line is encoded in 4-bit segments and shifted to produce the line for the current frame, with increasingly long sleep() values. The screen is cleared with a form feed character, which should work in most terminal emulators.
It would be possible to save 3 bytes by not initializing the starting frame, but there is a chance that a negative number could be entered before the function is called, resulting in a frame with a 0-second delay.
i,h;f(c){for(c=0;puts("\f");sleep(++c))for(i=4;i--;puts(""))for(h=L"\x66402666\x98891199\x88999119\x46666620"[i]>>c%8*4&15;h;h/=2)printf(L" #"+h%2);}
Python 2, 158 bytes
import time
while 1:
for w in range(8):
print'\n'*99
for x in'48966886698469906912611621960996'[w*4:w*4+4]:print('000'+bin(int(x))[2:])[-4:]
time.sleep(1)
This version does not work on Try it online!
Uses 0 for and 1 for #.
Here is a version (non competing) without the clear screens and pauses (one of which blows up TIO) which displays each stage of the animation for each cycle and allows users without a Python 2.7 environment to see the output. For me, this covers the most important and interesting part of the challenge. Clearing the screen and adding delays is really just commentary IMHO.
Python 2, 118 bytes
for w in range(8):
for x in'48966886698469906912611621960996'[w*4:w*4+4]:print('000'+bin(int(x))[2:])[-4:]
print ' '
CP-1610 machine code, 33 DECLEs1 ≈ 42 bytes2
1. A CP-1610 opcode is encoded with a 10-bit value (0x000 to 0x3FF), known as a 'DECLE'.
2. As per the exception described in this meta answer, the exact score is 41.25 bytes (330 bits)
Uses $'s and spaces. Loops forever. Each frame is displayed during ~650 ms. This is a full program mapped in the memory range $4800-$4820. (The Intellivision bootstrap code will jump at $4800 after a reset if it finds something there.)
BT EQU $200 ; BACKTAB address
ROMW 10 ; 10-bit ROM
ORG $4800 ; map the program at $4800
4800 0002 EIS ; enable interrupts
4801 02B8 007E MVII #$7E, R0 ; load %01111110 in R0
4803 0044 SWAP R0, 2 ; expand it to %0111111001111110
4804 00BD loop: MOVR R7, R5 ; \_ R5 = pointer to
4805 02FD 0013 ADDI #p-$, R5 ; / BACKTAB positions
4807 0081 draw: MOVR R0, R1 ; copy R0 to R1
4808 03B9 0020 ANDI #32, R1 ; isolate the 6th bit
480A 02F9 0007 ADDI #7, R1 ; add 7 to draw in white
480C 02AA MVI@ R5, R2 ; load the position in R2
480D 0251 MVO@ R1, R2 ; write the character
480E 0058 SLLC R0 ; \_ rotate the pattern
480F 0028 ADCR R0 ; / to the left
4810 0092 TSTR R2 ; is R2 equal to 0?
4811 022C 000B BNEQ draw ; if not, draw again
4813 0012 idle: DECR R2 ; idle loop: decrement R2
4814 022B 0002 BMI idle ; until it looks positive
4816 0220 0013 B loop ; restart
; positions
4818 0229 023D ... p: DECLE BT+41, BT+61, BT+82, BT+83
481C 0240 022C ... DECLE BT+64, BT+44, BT+23, BT+22
4820 0000 DECLE 0
Output
made with jzIntv
Stax, 32 bytes
éÄû?*&╬_ÅuQ☼Ñï|Σ░♦ë♣∞î,↑&èå#QWÉ╡
Uses JS requestAnimationFrame to delay a frame between each step. Here is one which uses a 30-frame delay for better inspection: link
Idea is similar to MATL. Lack of vectorization makes it somewhat bulky.
05AB1E, 36 bytes
[2¾6×2úN._7Ý.Λ,т.W’IEx.Helpers.Ї’.E
If only 05AB1E had a builtin to clear the console.. :/
Starts at frame 6, and rotates indefinitely in reversed order. Uses 0 instead of # as character, although could alternatively use 1/2 for the same byte-count by replacing the ¾ with X/Y respectively. Sleeps for 100 ms between each print, but could alternatively sleep any of these times for the same byte-count: 1/2/3/4/5/6/7/8/9/T (10)/₂ (26)/₆ (36)/₃ (95)/₅ (255)/₁ (256)/₄ (1000), by replacing the т.
Explanation:
[ # Loop indefinitely:
2 # Push 2
¾ # Push 0
6× # Repeat it 6 times as string: "000000"
2ú # Pad with 2 leading spaces: " 000000"
N._ # Rotate the string the loop-index amount of times towards the left
7Ý # Push list [0,1,2,3,4,5,6,7]
.Λ # Use the modifiable Canvas builtin with these three options
, # Pop and print it with trailing newline
т.W # Sleep for 100 ms
’IEx.Helpers.Ї’ # Push dictionary string "IEx.Helpers.clear"
.E # Evaluate and execute it as Elixir code
See this 05AB1E tip of mine (section How to use the dictionary?) to understand why ’IEx.Helpers.Ї’ is "IEx.Helpers.clear".
The Canvas Builtin uses three arguments to draw a shape:
- Length of the lines we want to draw
- Character/string to draw
- The direction to draw in, where each digit represents a certain direction:
7 0 1
↖ ↑ ↗
6 ← X → 2
↙ ↓ ↘
5 4 3
2¾6×2úN._7Ý creates the following Canvas arguments:
- Length:
2 - Characters:
" 000000"(potentially rotated) - Directions:
[0,1,2,3,4,5,6,7], which translate to \$[↑,↗,→,↘,↓,↙,←,↖]\$
Try the first two steps online.
Step 1: Draw 2 characters (" ") in direction 0/↑:
Step 2: Draw 2-1 characters ("0") in direction 1/↗:
0
Step 3: Draw 2-1 character ("0") in direction 2/→:
00
Step 4: Draw 2-1 character ("0") in direction 3/↘:
00
0
etc.
Step 7: Draw 2-1 character ("0") in direction 6/←:
00
0
0
00
Step 8: Draw 2-1 character (" ") in direction 7/↖:
00
0
0
00
See this 05AB1E tip of mine for an in-depth explanation of the Canvas builtin.
I don't have a gif to see the animation in action, because IEx.Helpers.clear (or any clear through Elixir-eval for that matter) doesn't seem to work on Windows machines.. I tried to enable ANSI escape codes in the Windows Console by modifying the Registry on my PC, but wasn't able to get it to work. This should work as intended on a non-Windows machines, though.
As alternative, here the outputs where the clear-command is ignored and the infinite loop [ is replaced with a loop of eight 8F: Try it online.
Charcoal, 21 19 bytes
RFχ⁸GH*²⮌…“⊟4«L”⁺⁸ι
Try it online! Link is to verbose version of code. Outputs 8 frames. Explanation:
RFχ⁸
Repeats 8 times with a 10ms delay in between each repeat, dumping the canvas to the terminal each time. (Note that this just shows up as control characters in TIO.)
GH*²⮌…“⊟4«L”⁺⁸ι
Draw an octagon using the multidirectional *, which means all directions in turn, in the order right, down right, down, down left, left, up left, up, up right. Each side of the octagon is 2 characters long, and the octagon is drawn using a cyclic permutation of the string # ##### (obtained through reversing the cyclic extension of ##### # which then gets implicitly truncated to 8 characters) depending on the loop index.
For offline use you may prefer 1 second frames for the same byte count:
RFφ⁸GH*²⮌…“⊟4«L”⁺⁸ι
The animation can be extended to 1000 frames (125 whole cycles) at a cost of two bytes:
RFχφGH*²⮌…“⊟4«L”⁺⁸﹪ι⁸
Try it online! Link is to verbose version of code. Or with 1s frames:
RFφφGH*²⮌…“⊟4«L”⁺⁸﹪ι⁸
An infinite animation would take 27 25 bytes (10ms and 1s frames):
RWχ¹«GH*²⮌…“⊟4«L”⁺⁸﹪φ⁸≦⊕φ
RWφ¹«GH*²⮌…“⊟4«L”⁺⁸﹪φ⁸≦⊕φ




