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