I understand that it is minified code, but I have tried de-obfuscating it a little, but I can't get a clear concept of how it achieves this effect. I can see that it is using Strings for iteration of some kind, use of the Date object, strange string manipulation, Math functions, then the code prints itself.

4 Answers
4

A code string is stored in the variable z. The assignment operator returns the value assigned, so the code string also is passed as an argument into eval.

The code string z runs inside of eval. The code is extremely obtuse, even when cleaned up, but it seems to:

Parse a string of base-36 numbers, delineated by the character 4.

Populate a map of values, using the global variables e, x, and y to hold map state. Map state is, in part, a function of the current second on the wall clock (new Date / 1e3).

Using the map values, the code generates an output string, p

the code uses p += " *#"[index] to decide whether to use a space, asterisk, or hash mark, where index is actually e[x++] + e[x++] (as said above, e and x are responsible for map state)

if the index is larger than the length of " *#", there is fallback code that populates the output p with characters from z. Inner characters are populated with animation characters, while outer characters are pulled from z.

At the end of the code, there is a call to setTimeout(z), which asynchronously evaluates the code string z. This repeat invocation of z allows the code to loop.

At the end of the code, z is passed to setTimeout. It works like requestAnimationFrame and eval together, evaluating it in an interval at the highest possible rate.

The code itself initialises p, the string buffer onto which the HTML will be appended, and n, an array of base-36-encoded numbers (joined into a string by "4", the comments being irrelevant garbage that is not considered by parseInt).

each number in n does encode one line (n.length == 16). It is now enumerated.

A bunch of variables is initialised, some disguised as the e array literal but they are then cast to numbers (x) or booleans (r) or strings (t) when used.

Each digit in the number t is enumerated, inverting the boolean r each turn. For different angles x, and depending on the current timenew Date / 1000 (so that it gives an animation), the array e is filled using some bitwise operators - with 1 when r is false and 2s when r is true at that time.

Then a loop does iterate the 61 columns of the image, from x=0 to 122 in double steps, appending single characters to p.

B being the backslash, the string S is built from the code string z by escaping backslashes and apostrophes, to get an accurate representation of what it looked in the source.

Every two consecutive numbers from e are added and used to access a character from " *#", to build up the animated image. If one of the indices is not defined, the NaN index resolves to an undefined character and instead the respective character from the S string is taken (check out the formula x/2+61*y-1). If that character should be a word character, it is colored differently using the fontcolor String method.

After each line, the trailing backspace and a linebreak are added to p, and the HTML string gets assigned to the document body.

A string with the all the code is evaluated, and a timeout makes the loop;
The string is stored in a variable named z and in the middle of the code, between comments /* and */there is an "Earth ASCII Art".
The code parses the comments and changes the document content, keeping the js and updating the art. Bellow is just the code sliced: