StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is another manually deobfuscated version, moving all initialisation out of expression into own statements:</p> <pre><code>z='p="<"+"pre>"/* ,.oq#+ ,._, */;for(y in n="zw24l6k\ 4e3t4jnt4qj24xh2 x/* =<,m#F^ A W###q. */42kty24wrt413n243n\ 9h243pdxt41csb yz/* #K q##H######Am */43iyb6k43pk7243nm\ r24".split(4)){/* dP cpq#q##########b, */for(a in t=pars\ eInt(n[y],36)+/* p##@###YG=[#######y */(e=x=r=[]))for\ (r=!r,i=0;t[a/* d#qg `*PWo##q#######D */]>i;i+=.05)wi\ th(Math)x-= /* aem1k.com Q###KWR#### W[ */.05,0>cos(o=\ new Date/1e3/* .Q#########Md#.###OP A@ , */+x/PI)&&(e[~\ ~(32*sin(o)*/* , (W#####Xx######.P^ T % */sin(.5+y/7))\ +60] =-~ r);/* #y `^TqW####P###BP */for(x=0;122>\ x;)p+=" *#"/* b. OQ####x#K */[e[x++]+e[x++\ ]]||(S=("eval"/* l `X#####D , */+"(z=\'"+z.spl\ it(B = "\\\\")./* G####B" # */join(B+B).split\ (Q="\'").join(B+Q/* VQBP` */)+Q+")//m1k")[x/2\ +61*y-1]).fontcolor/* TP */(/\\w/.test(S)&&"#\ 03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)'; p = "<" + "pre>"; n = ["zw2", "l6k", "e3t", "jnt", "qj2", "xh2 x/* =<,m#F^ A W###q. */", "2kty2", "wrt", "13n2", "3n9h2", "3pdxt", "1csb yz/* #K q##H######Am */", "3iyb6k", "3pk72", "3nmr2", ""] for (y in n) { e = []; x = 0; r = true; t = parseInt(n[y], 36) + ""; for (a in t) { r = !r for (i = 0; i < t[a]; i += 0.05) { x -= 0.05; o = new Date / 1e3 + x / Math.PI if (Math.cos(o) < 0) e[~~(32 * Math.sin(o) * Math.sin(0.5 + y / 7)) + 60] = -~r; } for (x = 0; x < 122;) { S = "eval" + "(z='" + z.split(B = "\\").join(B + B).split(Q = "'").join(B + Q) + Q + ")//m1k" p += " *#"[e[x++] + e[x++]] || S[x/2+61*y-1]).fontcolor(/\w/.test(S[x/2+61*y-1]) && "#03B"); } p += B + "\n"; document.body.innerHTML = p; } setTimeout(z) </code></pre> <p>Here is what happens:</p> <ul> <li><code>z</code> is a multiline string containing all of the code. It is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" rel="nofollow noreferrer"><code>eval</code></a>ed.</li> <li>At the end of the code, <code>z</code> is passed to <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout" rel="nofollow noreferrer"><code>setTimeout</code></a>. It works like <code>requestAnimationFrame</code> and <code>eval</code> together, evaluating it in an interval at the highest possible rate.</li> <li>The code itself initialises <code>p</code>, the string buffer onto which the HTML will be appended, and <code>n</code>, an array of base-36-encoded numbers (joined into a string by <code>"4"</code>, the comments being irrelevant garbage that is not considered by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt" rel="nofollow noreferrer"><code>parseInt</code></a>).</li> <li>each number in <code>n</code> does encode one line (<code>n.length == 16</code>). It is now <a href="https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea">enumerated</a>.</li> <li>A bunch of variables is initialised, some disguised as the <code>e</code> array literal but they are then cast to numbers (<code>x</code>) or booleans (<code>r</code>) or strings (<code>t</code>) when used.</li> <li>Each digit in the number <code>t</code> is enumerated, inverting the boolean <code>r</code> each turn. For different angles <code>x</code>, and depending on the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" rel="nofollow noreferrer">current time</a> <code>new Date / 1000</code> (so that it gives an animation), the array <code>e</code> is filled using some <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" rel="nofollow noreferrer">bitwise operators</a> - with <code>1</code> when <code>r</code> is false and <code>2</code>s when <code>r</code> is true at that time.</li> <li>Then a loop does iterate the 61 columns of the image, from <code>x=0</code> to 122 in double steps, appending single characters to <code>p</code>.</li> <li><code>B</code> being the backslash, the string <code>S</code> is built from the code string <code>z</code> by escaping backslashes and apostrophes, to get an accurate representation of what it looked in the source.</li> <li>Every two consecutive numbers from <code>e</code> are added and used to access a character from <code>" *#"</code>, to build up the animated image. If one of the indices is not defined, the <code>NaN</code> index resolves to an undefined character and instead the respective character from the <code>S</code> string is taken (check out the formula <code>x/2+61*y-1</code>). If that character should be a <a href="http://www.regular-expressions.info/shorthand.html" rel="nofollow noreferrer">word character</a>, it is colored differently using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor" rel="nofollow noreferrer"><code>fontcolor</code> String method</a>.</li> <li>After each line, the trailing backspace and a linebreak are added to <code>p</code>, and the HTML string gets assigned to the document body.</li> </ul> <hr> <blockquote> <p>How the same effect could be rewritten for a minimal example?</p> </blockquote> <p>Here is an other example:</p> <pre><code>setInterval(z='s=("setInterval(z=\'"+\ z.replace(/[\\\\\']/g,"\\\\$&")+"\')"\ ).match(/.{1,37}/g).join("\\\\\\n");d\ ocument.body.innerHTML=\"<\\pre>"+s.s\ lice(0, 175)+String( + new Date()).fo\ ntcolor("red")+s.slice(188)') </code></pre> <p>(<a href="http://jsfiddle.net/2r4xb/" rel="nofollow noreferrer">demo at jsfiddle.net</a>)</p> <p>It has all the releveant things you need for this kind of animation:</p> <ul> <li><code>setInterval</code> and <code>Date</code> for the animation</li> <li><p>A reconstruction of its own code (<a href="https://en.wikipedia.org/wiki/Quine_(computing)" rel="nofollow noreferrer">quine</a>-like), in here:</p> <pre><code>s = ( "setInterval(z='" // the outer invokation + z.replace(/[\\\']/g,"\\$&") // the escaped version + "\')" ) // the end of the assignment .match(/.{1,37}/g).join("\\\n"); // chunked into lines </code></pre></li> <li><p>The output via <code>document.body.innerHTML</code> and a <code><pre></code> element</p></li> <li>Replacing some parts of the code with the animated string</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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