javascript - 回転後に HTML5 キャンバス内のポイントの位置を計算するにはどうすればよいですか?

Question

このコードを見た後、式x * sina + y * cosaがどこから来たのかわかりません。

各間隔の後、点は軸の周りをa角度だけ回転します。

回転後の点の x と z の位置が必要です。

上記の記事では、x * sina + y * cosa式が使用されています。から派生したのかわかりません。

私は三角関数を通過しましたが、まだ何もありません。

誰でも助けることができますか？基本的な考え方。いくつかの参照。

Answer 1

まず第一に、彼のコードは 3D 空間への射影ですが、問題は 2D 回転と同じ Z 軸上の回転についてであり、Z 値は同じに保たれます。

任意の点 (x,y) がある場合、直角三角形を形成します。この写真を見てください：

今、a15度だとします

その円は単位円と呼ばれ、半径は1です。

• Y軸に沿った緑の線の長さがsine角度です。
• X軸に沿った緑の線の長さがcosine角度です。

ポイントの座標によって形成される三角形のサイズは実際には問題ではないことに注意してください。同じ角度を維持する限り、ここでは単位円内の三角形のセクションのみが重要であるため、サインとコサインの値は同じままです。

はsineポイントが Y 軸でcosine移動する量で、 はポイントが空間内を移動し、最小ステップと同じ角度を維持するために X 軸で移動する量です (値の範囲は 0 から 1 です)。これは円の半径です)

しかし、原点に対する角度を変更するために空間内の点を移動するにはどうすればよいでしょうか?

まず、単位円と交差する任意の点、つまり三角形の斜辺が 1 の場合、その位置は(cosine, sine)です。たとえば(2,5)、単位円の外側の点の場合、その位置は です。(hypotenuse * cosine, hypotenuse * sine)

(x,y)原点から度の位置に点があり、aそれを度単位で回転させたいとします。これは、角度を度に変更しbた新しい位置が必要であることを意味しますが、原点 (斜辺) からの距離は同じに保たれます。(x',y')a+b

x = hypotenuse * cosine(a)
y = hypotenuse * sine(a)

x' = hypotenuse * cosine(a + b)
y' = hypotenuse * sine(a + b)

三角関数の角度加算式を使用すると、次のようになります。

cosine(a + b) = cosine(a) * cosine(b) - sine(a) * sine(b)
sine(a + b) = sine(a) * cosine(b) + cosine(a) * sine(b)

これを私たちに適用すると、次の(x',y')ようになります。

x' = hypotenuse * cosine(a) * cosine(b) - hypotenuse * sine(a) * sine(b)
y' = hypotenuse * sine(a) * cosine(b) + hypotenuse * cosine(a) * sine(b)

私たちの定義を覚えていれば(x,y)、これは次のものとまったく同じであることがわかります。

x' = x * cosine(b) - y * sine(b)
y' = y * cosine(b) + x * sine(b)

y'足し算の順序が逆になっているだけで、あなたの不思議な式が にあります。

Answer 2

回転は、複素平面などで説明できます。

cos(角度) + i * sin(角度) = e^(i*角度);

複素平面における乗算の規則は、A*e^(i*angle1) * B*e^(i*angle2) を示唆しています。ここで、A と B はベクトルの長さです。次に、これらのベクトルを乗算すると A*B*e^(i*(angle1+angle2)) が得られ、cos(angle)+i*sin(angle) の長さは 1 であるため、ベクトル A を複雑な乗算なしで回転させることができます。その長さに影響します。

(X+ i*y) * (cos(angle) + i*sin(angle)) == (x*cos-y*sin) + i * (x*sin+y*cos)
(「i」を省略を用語とし、実数部を x 座標、虚数部を y 座標として使用します。