我已经进行了清晰和简化的this animation进入可用的jsfiddle here 。尽管如此,我仍然不太明白其背后的数学原理。
有人对动画有任何见解吗?
最佳答案
由于缺少间隔速度,您的 fiddle 链接对我不起作用,应该使用 getElementById
也是如此(仅仅因为它在 Internet Explorer 中运行并不意味着它可以跨浏览器)。
在这里,我 fork 了它,请使用这个:
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 循环来循环所有字符、对非整数进行取模运算以及 bitwise
异或运算。
这一切是如何运作的,基本上都是 I can tell you is to pay attention to the variables changing as the input and output change
。
所有逻辑似乎都是某种bitwise
决定将两个字符或换行符中的哪一个添加到页面的神秘方法。
我自己不太明白 calculus or trigonometry
某种观点。
关于javascript - 这个类似射线的动画背后的数学原理是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10373151/