What is the math behind this ray-like animation?

javascript, math

Solution

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.

Problem

Original source