这个光线动画背后的数学原理是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (51)

我没有混淆和简化这个动画。尽管如此,我还是不太明白背后的数学原理。

提问于
用户回答回答于
<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>
用户回答回答于

假设每一条线,当它在矩形区域中移动时,实际上是线围绕固定原点的旋转。

背景似乎“移动”根据光学错觉。实际发生的是,扫描线之间的区域在两个煤焦之间切换,因为直线通过它们旋转。

以下是二维旋转方程:

首先,将(x,y)坐标对在其中一条直线中的旋转前后(运动)可视化:

因此,您可以为每一行做一个点集合,并通过任意大小的角度旋转它们,这取决于您想要动画的“平滑”程度。

所属标签

可能回答问题的人

  • 学生

    3 粉丝476 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 最爱开车啦

    8 粉丝503 提问5 回答
  • 骑牛看晨曦

    4 粉丝522 提问5 回答

扫码关注云+社区

领取腾讯云代金券