utsusie
線形代数の基礎

変換の合成

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

概要

行列の積を使って複数の変換（回転・拡大縮小・移動）を組み合わせ、複雑な動きを効率的に実装する方法を学びます。

変換合成の基本

変換の合成は、複数の変換を組み合わせることです。行列の積を使うと、回転しながら拡大するような複雑な動きを簡潔に表現できます。

実用例

  • 回転しながら拡大: アイテムが回転しながら大きくなる演出
  • 移動しながら回転: 弾が飛びながら回転する
  • 複雑なアニメーション: 複数のエフェクトを重ねる
  • キャラクターの関節構造: 腕や足の階層的な動き

行列の積

複数の変換を1つにまとめるには、行列を掛け算します:

Mtotal=M3⋅M2⋅M1M_{total} = M_3 \cdot M_2 \cdot M_1

この合成行列 MtotalM_{total} を点に適用すると、M1M_1、M2M_2、M3M_3 を順番に適用したのと同じ結果になります。

行列の掛け算

2×2行列の積は次のように計算します:

[a1b1c1d1][a2b2c2d2]=[a1a2+b1c2a1b2+b1d2c1a2+d1c2c1b2+d1d2]\begin{bmatrix} a_1 & b_1 \\ c_1 & d_1 \end{bmatrix} \begin{bmatrix} a_2 & b_2 \\ c_2 & d_2 \end{bmatrix} = \begin{bmatrix} a_1 a_2 + b_1 c_2 & a_1 b_2 + b_1 d_2 \\ c_1 a_2 + d_1 c_2 & c_1 b_2 + d_1 d_2 \end{bmatrix}

変換の順序

重要: 行列の掛け算は非可換です。つまり、順序を変えると結果が変わります:

A×B≠B×AA \times B \neq B \times A
非可換とは？順序が重要な理由

可換と非可換

  • 可換: 順序を入れ替えても結果が同じ（例: 普通の足し算 2 + 3 = 3 + 2）
  • 非可換: 順序を入れ替えると結果が変わる（例: 行列の積）

具体例で理解する

想像してみてください：

  1. 「北に5歩進んでから、90度右回転」
  2. 「90度右回転してから、北に5歩進む」

この2つは全く違う場所に到着しますよね？

行列の積も同じで：

  • 「回転 → 拡大」: 回転してから拡大（形が変わらない）
  • 「拡大 → 回転」: 拡大してから回転（同じ結果）

でも：

  • 「回転 → 移動」: 回転してから移動
  • 「移動 → 回転」: 移動してから回転（違う場所に行く！）

変換を合成する時は、適用する順序を必ず意識しましょう。

例えば:

  • 回転 → 拡大: 回転してから拡大
  • 拡大 → 回転: 拡大してから回転

この2つは異なる結果になります。

JavaScriptでの実装

行列の積を計算

JavaScript
function multiplyMatrices(m1, m2) {
  return {
    a: m1.a * m2.a + m1.b * m2.c,
    b: m1.a * m2.b + m1.b * m2.d,
    c: m1.c * m2.a + m1.d * m2.c,
    d: m1.c * m2.b + m1.d * m2.d
  };
}

複数の変換を合成

JavaScript
// 回転行列を生成
function createRotation(angle) {
  const rad = angle * Math.PI / 180;
  return {
    a: Math.cos(rad),
    b: -Math.sin(rad),
    c: Math.sin(rad),
    d: Math.cos(rad)
  };
}

// スケーリング行列を生成
function createScale(scaleX, scaleY) {
  return {
    a: scaleX,
    b: 0,
    c: 0,
    d: scaleY
  };
}

// 合成変換: 回転してから拡大
const rotation = createRotation(45);
const scale = createScale(2, 2);
const combined = multiplyMatrices(scale, rotation);

インタラクティブデモ

変換の順序を入れ替えて、結果の違いを確認しましょう。

変換の順序に注目

変換の順序を変えると、結果が変わります。ラジオボタンを切り替えて、矢印の向きと長さの違いを観察してみましょう。

回転 → 拡大の合成
拡大
1.500
0.000
0.000
1.500
×
回転
0.707
-0.707
0.707
0.707
=
合成
1.061
-1.061
1.061
1.061