这种类似光线的动画背后的数学是什么？

Question

这种类似光线的动画背后的数学是什么？

Ran*_*lue 18 javascript math

我没有进行模糊处理,并将此动画简化为这里提供的jsfiddle .尽管如此,我仍然不太了解它背后的数学.

有人有解释动画的见解吗？

Answer 1

Tha*_*var 10

由于缺少间隔速度,你的小提琴链接对我不起作用,也应该使用getElementById(因为它在Internet Explorer中工作不会使它跨浏览器).

在这里,我分叉了,用这个代替:

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

我还清理了第一个链接中的代码:

<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>

Run Code Online (Sandbox Code Playgroud)

您提供的两个链接中的代码结果彼此非常不同.但是代码中的逻辑非常相似.两者都使用for循环遍历所有字符,对非整数进行mod操作,以及bitwisexor操作.

它是如何工作的,基本上都是如此I can tell you is to pay attention to the variables changing as the input and output change.

所有逻辑似乎都是某种bitwise神秘的方式来决定将2个字符或换行符中的哪一个添加到页面中.

从某种角度来说,我并不完全遵循它calculus or trigonometry.