javascript/canvas でシンプルな 2D ゲームを作成しています。自分の位置に対する特定のオブジェクトの角度を把握する必要があります。
つまり、私が (10,10) にいて、オブジェクトが (10,5) にあるとします。これは 90 度になります (正の Y が下、負の Y が上) (10,10) 対 (10, 15) は 270 度になります。
これについてどうすればいいですか?
javascript/canvas でシンプルな 2D ゲームを作成しています。自分の位置に対する特定のオブジェクトの角度を把握する必要があります。
つまり、私が (10,10) にいて、オブジェクトが (10,5) にあるとします。これは 90 度になります (正の Y が下、負の Y が上) (10,10) 対 (10, 15) は 270 度になります。
これについてどうすればいいですか?
あなたが (a, b) にいて、オブジェクトが (c, d) にあるとします。次に、オブジェクトの相対位置は (x, y) = (c - a, d - b) です。
次に、Math.atan2()
関数を使用して角度をラジアンで取得できます。
var theta = Math.atan2(-y, x);
結果は [-π, π] の範囲にあることに注意してください。負でない数が必要な場合は、追加する必要があります
if (theta < 0)
theta += 2 * Math.PI;
ラジアンを度に変換し、 を掛け180 / Math.PI
ます。
座標が (xMe, yMe) で、それらの座標が (xThem, yThem) の場合、次の式を使用できます。
arctan((yMe-yThem)/(xThem-xMe))
通常は になりますarctan((yThem-yMe)/(xThem-xMe))
が、この場合は y 軸の符号が反転しています。
結果をラジアンから度数に変換するには、180/pi を掛けます。
したがって、JavaScript では次のようになります。Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PI
atan は -pi/2 ~ pi/2 (つまり、-90 ~ 90 度) の値を返します。ただし、(xThem - xMe、yMe - yThem) ベクトルがどの象限にあるかを確認し、それに応じて調整することができます。
素人の言葉で:
function pointDirection(x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
}
HTML5 キャンバスでは、原点は左上隅であるため、y 軸は上から下に伸びます。したがって、単位円のどこにいても、点Aから中心(C)までの角度を計算するために、実際には次のようにする必要があります
angle = Math.atan2(Cy-Ay,Ax-Cx)
[-π, π] の範囲で結果が得られます。
キャンバスの原点を左下隅にしなかった理由がわかりません。