Question

I have unobfuscated and simplified this animation into a jsfiddle available here. Nevertheless, I still don’t quite understand the math behind it.

Does someone have any insight explaining the animation?

Answer 1

Your fiddle link wasn’t working for me due to a missing interval speed, should be using getElementById too (just because it works in Internet Explorer doesn’t make it cross-browser).

Here, I forked it, use this one instead:

http://jsfiddle.net/spechackers/hJhCz/

I have also cleaned up the code in your first link:

<pre id="p">
<script type="text/javascript">
var charMap=['p','.'];
var n=0;
function myInterval()
{

    n+=7;//this is the amount of screen to "scroll" per interval
    var outString="";


    //this loop will execute exactly 4096 times. Once for each character we will be working with.
    //Our display screen will consist of 32 lines or rows and 128 characters on each line
    for(var i=64; i>0; i-=1/64)
    {

        //Note mod operations can result in numbers like 1.984375 if working with non-integer numbers like we currently are
        var mod2=i%2;

        if(mod2==0)
        {
            outString+="\n";
        }else{
            var tmp=(mod2*(64/i))-(64/i);//a number between 0.9846153846153847 and -4032
            tmp=tmp+(n/64);//still working with floating points.
            tmp=tmp^(64/i);//this is a bitwise XOR operation. The result will always be an integer
            tmp=tmp&1;//this is a bitwise AND operation. Basically we just want to know if the first bit is a 1 or 0.
            outString+=charMap[tmp];

        }
    }//for
    document.getElementById("p").innerHTML=outString;
}

myInterval();
setInterval(myInterval,64);
</script>
</pre>

The result of the code in the two links you provided are very different from one another.
However the logic in the code is quite similar. Both use a for-loop to loop through all the characters, a mod operation on a non-integer number, and a bitwise xor operation.

How does it all work, well basically all I can tell you is to pay attention to the variables changing as the input and output change.

All the logic appears to be some sort of bitwise cryptic way to decide which of 2 characters or a line break to add to the page.

I don’t quite follow it myself from a calculus or trigonometry sort of perspective.