18

私はこのアニメーションをわかりにくく単純化して、ここで入手できるjsfiddleにしました。それにもかかわらず、私はまだその背後にある数学を完全に理解していません。

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

4

3 に答える 3

10

インターバル速度が不足しているため、フィドルリンクが機能していませんでした。これも使用する必要があり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>

提供した2つのリンクのコードの結果は、互いに大きく異なります。ただし、コードのロジックは非常に似ています。どちらも、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ある種の観点からは、私自身はそれを完全にはフォローしていません。

于 2012-05-09T14:35:19.007 に答える
6

各線は、長方形の領域をスイープするときに、実際には固定された原点を中心とした（4？）線の回転であると考えてください。

目の錯覚により、背景が「動く」ように見えます。実際に発生するのは、スイープラインの間の領域が、ラインが2つの文字を回転するときに2つの文字の間で切り替わります。

これが2次元の回転方程式です。

まず、回転（モーション）の前後の線の1つで（x、y）座標ペアを視覚化します。

2次元での回転の説明と回転方程式

したがって、各線のポイントのコレクションを作成し、アニメーションの「スムーズさ」に応じて、任意のサイズの角度でそれらを回転させることができます。

于 2012-04-30T22:31:12.257 に答える
2

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

ここで単純化しようとしました-上記の式は回転の三角方程式であり、行列を使用してより簡単に解くことができます。

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

于 2012-05-10T09:49:02.620 に答える