Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Foreword</strong>: I beautified and annotated the code extensively at <a href="http://jsfiddle.net/WZXYr/2/">http://jsfiddle.net/WZXYr/2/</a></p> <p>Consider the outermost layer:</p> <pre><code>eval(z = '...'); </code></pre> <p>A code string is stored in the variable <code>z</code>. The assignment operator returns the value assigned, so the code string also is passed as an argument into <code>eval</code>.</p> <p>The code string <code>z</code> runs inside of <code>eval</code>. The code is extremely obtuse, even when cleaned up, but it seems to:</p> <ol> <li>Parse a string of base-36 numbers, delineated by the character <code>4</code>.</li> <li>Populate a map of values, using the global variables <code>e</code>, <code>x</code>, and <code>y</code> to hold map state. Map state is, in part, a function of the current second on the wall clock (<code>new Date / 1e3</code>).</li> <li>Using the map values, the code generates an output string, <code>p</code> <ul> <li>the code uses <code>p += " *#"[index]</code> to decide whether to use a space, asterisk, or hash mark, where <code>index</code> is actually <code>e[x++] + e[x++]</code> (as said above, <code>e</code> and <code>x</code> are responsible for map state)</li> <li>if the index is larger than the length of <code>" *#"</code>, there is fallback code that populates the output <code>p</code> with characters from <code>z</code>. Inner characters are populated with animation characters, while outer characters are pulled from <code>z</code>.</li> </ul></li> </ol> <p>At the end of the code, there is a call to <code>setTimeout(z)</code>, which asynchronously evaluates the code string <code>z</code>. This repeat invocation of <code>z</code> allows the code to loop.</p> <p><strong>Simple example:</strong></p> <p>Here's a super-simple version (<a href="http://jsfiddle.net/5QXn8/">http://jsfiddle.net/5QXn8/</a>):</p> <pre><code>eval(z='p="&lt;"+"pre&gt;";for(i=0;i&lt;172;++i)if(i &gt; 62 &amp;&amp; i &lt; 67)p+="!---"[~~(new Date/1e2 + i)%4];else p += ("eval(z=\'" + z + "\')")[i];document.body.innerHTML = p;setTimeout(z)') </code></pre> <ol> <li><p>The <code>for</code> loop adds each character to the output string <code>p</code> (the string is 172 characters long):</p> <pre><code>for(i=0;i&lt;172;++i) </code></pre></li> <li><p>The inner conditional decides if we're on a character between position 62 to 67, which are the animated characters:</p> <pre><code>if(i &gt; 62 &amp;&amp; i &lt; 67) </code></pre></li> <li><p>If we are, then print out <code>!---</code>, shifted based on the tenth of the second wall-clock value. This provides the animation effect.</p> <pre><code>p+="!---"[~~(new Date/1e2 + i)%4] </code></pre> <p>(All the nastiness around <code>new Date</code> is really just there to transform a date value into a number between 0 and 3.)</p></li> <li><p>Otherwise, if we're not on an animated character, then print the index-<code>i</code> character from the string defined by</p> <pre><code>"eval(z='" + z + "')" </code></pre> <p>That is, the code string <code>z</code> surrounded by <code>eval('</code> and <code>')</code>.</p></li> <li><p>Finally, output the string and use <code>setTimeout</code> to queue up another execution of <code>z</code>:</p> <pre><code>document.body.innerHTML = p;setTimeout(z) </code></pre></li> </ol> <p>Note that my final output isn't <em>quite</em> right -- I haven't accounted for the backslashes toward the end -- but it should still give you a pretty good idea of how the technique works generally.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload