What is the math behind this ray-like animation?

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.

Answer 2

Consider that each line, as it sweeps across the rectangular area, is actually a rotation of (4?) lines about a fixed origin.

The background appears to "move" according to optical illusion. What actually happens is that the area in between the sweep lines is toggling between two char's as the lines rotate through them.

Here is the rotation eq in 2 dimensions:

first, visualize an (x,y) coordinate pair in one of the lines, before and after rotation (motion):

So, you could make a collection of points for each line and rotate them through arbitrarily sized angles, depending upon how "smooth" you want the animation.

Answer 3

The answer above me looks at the whole plane being transformed with the given formulae.

I tried to simplify it here - The formula above is a trigonometric equation for rotation it is more simply solved with a matrix.

x1 is the x coordinate before the the rotation transformation (or operator) acts.

same for y1. say the x1 = 0 and y1 = 1. these are the x,y coordinates of of the end of the vector in the xy plane - currently your screen. if you plug any angle you will get new coordinates with the 'tail' of the vector fixes in the same position.

If you do it many times (number of times depends on the angle you choose) you will come back to 0 x = 0 and y =1.

as for the bitwise operation - I don't have any insight as for why exactly this was used.

each iteration there the bitwise operation acts to decide if the point the plane will be drawn or not. note k how the power of k changes the result.

Further reading -

http://en.wikipedia.org/wiki/Linear_algebra#Linear_transformations

http://www.youtube.com/user/khanacademy/videos?query=linear+algebra