このレイのようなアニメーションの背後にある数学は何ですか？

Question

this animationを利用できます。hereです。それにもかかわらず、私はまだそれの背後にある数学をあまり理解していません。

誰かがアニメーションについて説明する洞察を持っていますか？

Answer 1

（それが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> 

のコードの結果：私もあなたの最初のリンクでコードをクリーンアップしている

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

：ここ

は、私はそれが、代わりにこれを使用してフォークあなたが提供した2つのリンクはお互いに非常に異なっています。 しかし、コード内のロジックは非常に似ています。どちらもforループを使用してすべての文字をループし、非整数のmod演算とbitwise xor演算を使用します。

どうすればうまくいくのですか、基本的にはすべてI can tell you is to pay attention to the variables changing as the input and output changeです。

すべてのロジックは、bitwiseの2種類の文字または改行をページに追加するかどうかを決めるための慎重な方法のようです。

calculus or trigonometryの視点から私はそれ自身をかなりフォローしていません。

Answer 2

各ラインは、矩形領域を横切って実際には、固定原点を中心にした（4π）ラインの回転であると考えてください。

錯視によって、背景が「動く」ように見えます。実際に何が起こるかは、掃引線の間の領域が、線がそれらを回転するときに2つのチャーの間を切り替えることです。 （x、y）が回転（運動）の前後に、行のいずれかに一対の座標視覚化、

最初：

ここ

は、2次元で回転当量であります

したがって、アニメーションをどのように「スムーズに」するかによって、各行のポイントのコレクションを作成し、任意の大きさの角度で回転させることができます。あなたのフィドルリンクは、欠落によりインターバル速度に私のために働いていなかった、あまりにもgetElementByIdを使用する必要があります

Answer 3

上記の答えは、与えられた数式で変換された平面全体を見ています。

私はここでそれを簡略化しようとしました - 上記の公式は、回転のための三角式です。より簡単に を行列で解きます。

x1は回転変換（または演算子）が動作する前のx座標です。

y1と同じです。 x1 = 0、y1 = 1とします。これはxy平面上の ベクトルの末尾のx、y座標です - 現在は画面です。任意の角度を差し込むと、同じ位置にあるベクトル修正の 'tail'を使って新しい の座標が得られます。

何度も（選択した角度に応じて回数が変わります）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