回転変換

記号の意味

: ベクトル- 矢印付きの文字
: 長さ- ベクトルの大きさ
: 単位ベクトル- 長さ1のベクトル
: 内積- 2つのベクトルから数値を計算
: シータ- 角度を表すギリシャ文字
: 余弦- 角度から比率を求める関数

概要

回転行列を使って、キャラクターやオブジェクトを原点中心に回転させる変換を実装する方法を学びます。

回転変換とは

回転変換は、原点を中心に点を回す変換です。ゲームでよく使われる変換の1つです。

実用例

キャラクターの向き変更: プレイヤーの向きを変える
タレットが敵を向く: 自動砲台が敵の方向を向く
カメラの回転: プレイヤーの視点を回転させる
回転するオブジェクト: コインやアイテムが回転する演出

角度の表現

角度には度(°) とラジアン(rad) の2つの表現方法があります。

単位	説明	用途
度(°)	円を360等分したもの	日常的な表現
ラジアン(rad)	円周の長さで角度を表す	数学的な表現・プログラミング

ラジアンとは？

角度の単位の一つで、プログラミングでよく使われます。

180度 = π（パイ）ラジアン ≈ 3.14ラジアン
90度 = π/2ラジアン
45度 = π/4ラジアン

JavaScriptのMath.cos()やMath.sin()はラジアン単位で動作します。

なぜラジアンを使うのか？

数学的な計算では、ラジアンの方が自然で扱いやすいためです。円周の長さは $2\pi r$ なので、1周は $2\pi$ ラジアンになります。

変換式

180° = \pi \text{ rad}

\text{ラジアン} = \text{度} \times \frac{\pi}{180}

JavaScriptでの角度変換

JavaScriptの三角関数(Math.sin, Math.cos)はラジアンを使うため、度をラジアンに変換する必要があります。

変換式: ラジアン = 度 × (Math.PI / 180)

回転行列

角度 $\theta$ で回転させる行列は次の形になります:

\begin{bmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{bmatrix}

三角比（サイン・コサイン・タンジェント）とは？

直角三角形の辺の比から、角度と長さの関係を求める関数です。

コサイン (cos): 角度 → 水平方向の長さ（横成分）
サイン (sin): 角度 → 垂直方向の長さ（縦成分）
タンジェント (tan): 角度 → 傾き（縦÷横）

回転での役割

回転では、cosとsinを使って「その角度で1進んだ時の横と縦の移動量」を計算します。

例えば、45度（π/4ラジアン）の場合：

Math.cos(Math.PI / 4) = 0.707... (水平方向の成分)
Math.sin(Math.PI / 4) = 0.707... (垂直方向の成分)

これが回転行列の各要素になります。

この行列を使うと、点 $(x, y)$ を原点を中心に $\theta$ だけ回転できます。

計算例

点 $(1, 0)$ を90°回転させる場合:

\begin{bmatrix} \cos 90° & -\sin 90° \\ \sin 90° & \cos 90° \end{bmatrix} \begin{bmatrix} 1 \\ 0 \end{bmatrix} = \begin{bmatrix} 0 & -1 \\ 1 & 0 \end{bmatrix} \begin{bmatrix} 1 \\ 0 \end{bmatrix} = \begin{bmatrix} 0 \\ 1 \end{bmatrix}

回転の仕組み

右向き $(1, 0)$ が上向き $(0, 1)$ に回転しました。90度の回転で、x軸方向のベクトルがy軸方向に移動しています。

JavaScriptでの実装

度をラジアンに変換

JavaScript

function degToRad(degrees) {
  return degrees * (Math.PI / 180);
}

なぜ180で割るのか？

度（°）をラジアンに変換する理由：

JavaScriptのMath.cos()やMath.sin()はラジアン単位で動作
180度 = πラジアンという関係があります

変換式の意味

degrees * (Math.PI / 180) = 度 × (π / 180)
例: 90度 → 90 × (π / 180) = π / 2 ラジアン
例: 45度 → 45 × (π / 180) = π / 4 ラジアン

人間にとっては度（0°〜360°）の方が分かりやすいので、まず度で考えてからラジアンに変換する方法がよく使われます。

回転行列の生成

JavaScript

function createRotationMatrix(angleDegrees) {
  const rad = degToRad(angleDegrees);
  return {
    a: Math.cos(rad),
    b: -Math.sin(rad),
    c: Math.sin(rad),
    d: Math.cos(rad)
  };
}

点を回転させる

JavaScript

function rotatePoint(x, y, angleDegrees) {
  const matrix = createRotationMatrix(angleDegrees);
  return {
    x: matrix.a * x + matrix.b * y,
    y: matrix.c * x + matrix.d * y
  };
}

// 使用例
const rotated = rotatePoint(1, 0, 90);
console.log(rotated); // { x: 0, y: 1 } (約)

インタラクティブデモ

角度を変えて、点がどう回転するか確認してみましょう。

回転角度: 45°

回転行列

cos(θ)

0.707

-sin(θ)

-0.707

sin(θ)

0.707

cos(θ)

0.707

3.000

0.000

2.121

角度: 45° = 0.785 rad

x' = 0.707 × 3 + -0.707 × 0 = 2.121

y' = 0.707 × 3 + 0.707 × 0 = 2.121