Since I'm bored - here's a quick run down of how this works, split into chunks.<p>#1 - Function Wrapper:<p><pre><code> (r = n => setInterval(t => {
...
}, 100))()
</code></pre>
Here a number of things are done:<p>- set `r` to the function that runs the whole quine.<p>- when r is called (inline immediately at the end) it sets an interval to call the body every 100ms.<p>- `n` is unused, and is there for spacing instead of using `()` to indicate no params.<p>#2 - Row Looper:<p><pre><code> for (j = o = "\n", y = 5; y--; document.body['innerHTML'] = "<pre>&lt" + (S = "script>\n") + o + "\n\n&lt/" + S)
</code></pre>
- create a loop that will occur 5 times (one for each row of the output).<p>- initialize some variables `j` and `o` to newlines. `o` will contain our rendered output, `j` will soon become an incrementor.<p>- after each loop, put the contents of 'o' between two strings of "<script>".<p>- the `S = "script>\n"` portion helps with spacing and S is no longer needed after this line.<p>#3 - Column Looper:<p><pre><code> for (x = -001; x++ < 63; o += `(r=${r})()`[j++].fontcolor(c ? '#FF0' : "#444"))
</code></pre>
- loop through the 64 columns, incrementing x and j.<p>- x keeps track of the column, j keeps track of the character within the Function `r`.<p>- each loop, `o` adds a letter from `r`. (In Javascript, functions can be converted to strings which contain their source).<p>- Also add the `)()` to the end of `r`, which the implicit Function.toString() will not have.<p>- Set the fontcolor on that string based on `c` - String.fontcolor() is an old deprecated method which wraps your string in a `<font>` tag.<p>#4 - Renderer:<p><pre><code> c = x / 2 % 4 < 3 && [31599, 19812, 14479, 31207, 23524, 29411, 29679, 30866, 31727, 31719, 1040][(D = Date()[16 + (x / 8 | 0)]) < 10 ? D : 10] & 1 << (x / 2 | 0) % 4 + 3 * y
</code></pre>
- The array of numbers is essentially a font, defining the numbers 0..9 and lastly ":"<p>- We pick which character of this font to render based on a Substring of Date(). Either a number, or ":".<p>- Date()[16] is where the Time string starts, and chars are rendered 8 blocks wide.<p>- With the beginning `x / 2 % 4 < 3` we render 2 spaces of dark characters between numbers.<p>- At the end, render our `font` with the x and y coords<p>- x is divided by two, so all pixels in this font are two characters wide.<p>- font glyphs are 3x5, and thus defined as 15 bits.<p>- for example, the glyph for '0' is:<p><pre><code> 111
101
101
101
111
- which results in 0b111101101101111 and therefor 31599
- To render these characters, we bit shift (<<) the number by the row & col*width and see what value is in the `1` place.
</code></pre>
#5 - Coming together<p>Now just travel the last few steps back up the chain again, and you can see how these characters are placed in `o` - and if `c` is true (we hit a character) it is rendered yellow. `o` is put between a "<script>" and that resulting string is put in document.innerHTML every 100 milliseconds.