javascript - 这个类似射线的动画背后的数学原理是什么？

Question

我已将此动画未混淆并简化为此处提供的 jsfiddle 。尽管如此，我仍然不太了解它背后的数学原理。

有人对动画有任何见解吗？

score 10 · Accepted Answer

由于缺少间隔速度，您的小提琴链接对我不起作用，也应该使用getElementById（只是因为它在 Internet Explorer 中工作并不能使其跨浏览器）。

在这里，我分叉了它，改用这个：

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

<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 循环遍历所有字符，对非整数进行 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。

score 6 · Accepted Answer

考虑每条线，当它扫过矩形区域时，实际上是（4？）线围绕固定原点的旋转。

根据视觉错觉，背景似乎在“移动”。实际发生的是，扫描线之间的区域在两个字符之间切换，因为这些线在它们之间旋转。

这是二维的旋转方程：

首先，在旋转（运动）之前和之后，可视化其中一条线中的 (x,y) 坐标对：

二维中的旋转描述和旋转方程

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

score 2 · Accepted Answer

我上面的答案着眼于用给定公式转换的整个平面。

我试图在这里简化它 - 上面的公式是旋转的三角方程，它更简单地用矩阵求解。

x1 是旋转变换（或算子）动作之前的 x 坐标。

y1 相同。说 x1 = 0 和 y1 = 1。这些是 xy 平面中矢量末端的 x,y 坐标 - 当前是您的屏幕。如果插入任何角度，您将获得新的坐标，矢量的“尾部”固定在同一位置。

如果你做很多次（次数取决于你选择的角度）你会回到 0 x = 0 和 y =1。

至于按位运算-我不知道为什么要使用它。

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

javascript - 这个类似射线的动画背后的数学原理是什么？

3 回答 3

Related

Reference