Qlock – A JavaScript Quine Clock

[1] https://en.wiktionary.org/wiki/quine#Verb

For 3 hours, I was cursing his name. Then I got it and I loved him for it. It was such a great feeling!

A quine was something I never would have come up with on my own, and transitioning from "that must be impossible" to "oh, ok it's just ugly" (I did it in Perl iirc) to seeing some elegant ones from classmates was terrific experience.

And he explains some of the code golfing in this talk: https://m.youtube.com/watch?v=RTxtiLp1C8Y

And he made a Quine for the conf https://m.youtube.com/watch?v=4DfhAK8xVWI

Is there a certain iterative kind of method that people use to achieve these?

#1 - Function Wrapper:

   (r = n => setInterval(t => {
        ...
    }, 100))()

- 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)

- 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"))

- 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

- 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.

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.

Wow

I noticed this because it was just 11:11 in my time zone >:)