这个射线状动画背后的数学原理是什么？

Question

我已将此动画进行了非混淆化和简化，并在这里提供了jsfiddle版本。但是，我仍然不太理解其背后的数学原理。

是否有人可以提供解释该动画的见解？

- Randomblue

---

正如URL所述，该场景是一个光线追踪的移动视点棋盘。例如，请参见http://www.cs.utah.edu/~shirley/classes/cs684_98/students/psutton/hw3/raytracer.html。 - lhf

Answer 1

由于缺少时间间隔，您的Fiddle链接对我无效，应该也使用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>

你提供的两个链接中的代码结果非常不同，但是它们的逻辑非常相似。两者都使用for循环来遍历所有字符、对非整数进行取模运算和按位异或运算。

它到底是如何工作的呢？基本上，我能告诉你的就是注意随着输入和输出变化而改变的变量。

所有的逻辑似乎都是一些比特加密方式来决定在页面中添加哪个2个字符或一个换行符。

从微积分或三角学的角度来看，我自己也不太理解。

- Thalaivar

---

在if语句中（mod2 == 0），我看到你正在执行这个操作var tmp=(mod2*(64/i))-(64/i)（在else从句中）。但是我们需要乘以mod2（它将等于1）吗？ - Parth Thakkar

@ParthThakkar：在代码中，它说，“请注意，如果使用非整数数字（如我们目前所做的），模运算可能会导致像1.984375这样的数字”。 - Bill Lynch

好的！错过了那个...对我来说，循环通常都是整数...它只是从我的脑海中溜走了。 - Parth Thakkar

Answer 2

考虑到每一行，当它在矩形区域中扫过时，实际上是围绕一个固定点做旋转的(4?)条线。所谓的背景“移动”是光学幻觉引起的。实际上，当线条穿过它们时，出现在扫描线之间的区域在两个字符之间切换。以下是二维旋转方程式：
首先，将(x,y)坐标对在旋转(运动)前后的其中一条直线上进行可视化：

因此，您可以为每条线制作一个点集，并将它们通过任意大小的角度旋转，具体取决于您想要动画有多“平滑”。

- negEntropy

---

嘿，你能解释一下这些数学公式吗？你是怎么得出它们的？其实我还在上高中，只懂一些基本的三角函数。只是想了解一下这些公式的推导过程，如果你能解释一下就太好了。谢谢！ - Parth Thakkar

@ParthThakkar：看看我下面的答案...你就会明白了。 - Thalaivar

Answer 3

上面的答案考虑了使用给定的公式转换整个平面。

我试图在这里简化它 - 上面的公式是一个旋转的三角函数方程，可以用矩阵更简单地解决。

x1是旋转变换（或操作）作用之前的x坐标。

y1也一样。比如说，x1 = 0，y1 = 1。这些是向量在xy平面上的末端的x，y坐标 - 目前是您的屏幕。如果您插入任何角度，都会得到新的坐标，向量的“尾巴”保持在相同位置。

如果您多次执行它（次数取决于您选择的角度），则会回到0 x = 0和y = 1。

至于位运算 - 我没有任何关于为什么要使用它的见解。

每次迭代中，位运算用于决定是否绘制平面上的点。请注意k的幂如何改变结果。

进一步阅读 -

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

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

- raam86