Hacker News new | ask | show | jobs
by lukeschaefer 749 days ago
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>&lt" + (S = "script>\n") + o + "\n\n&lt/" + 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 together

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.