とあるデザイナーのテクニカルノート

数学ノート

やさしい行列 #3

公開 更新

コンピュータグラフィックス視点の行列入門プリントの3冊目です。今回は拡大縮小の行列と、行列の積を扱います。

向こう側のさらに向こう

前回は三角関数と回転行列の解説をしました。今回は拡大縮小の行列と、行列の積について解説していきます。

これまでは座標に対して行列を掛けてきましたが、今回は 2 行 2 列の行列同士の掛け算と、その仕組みについて探っていきます。

拡大縮小する世界

x 軸に 3 倍、y 軸方向に 2 倍のスケールを掛けた世界。

拡大縮小の行列は、対角に倍率を並べるだけです。

[x倍00y倍][3002]\begin{bmatrix} x\text{倍} & 0 \\ 0 & y\text{倍} \end{bmatrix} \qquad \begin{bmatrix} 3 & 0 \\ 0 & 2 \end{bmatrix}

右の行列は、上の行が x 軸のベクトル、下の行が y 軸のベクトルです。

上の図は x 軸に 3 倍、y 軸方向に 2 倍のスケールを掛けた行列です。何もしない行列の x 軸が (1,0)(1, 0)、y 軸が (0,1)(0, 1) だったことを思い出してください。拡大縮小行列も軸の方向はそのままにスケールさせたい値を設定するだけです。

[xy]×[3002]=[x×3+y×0x×0+y×2]=[x×3y×2]\begin{bmatrix} x & y \end{bmatrix} \times \begin{bmatrix} 3 & 0 \\ 0 & 2 \end{bmatrix} = \begin{bmatrix} x \times 3 + y \times 0 & x \times 0 + y \times 2 \end{bmatrix} = \begin{bmatrix} x \times 3 & y \times 2 \end{bmatrix}

(x,y)(x, y) という座標にこの行列を掛け合わせると余計なものが 0 で消えて x、y にそれぞれの倍率が掛かります。

拡大縮小の行列

[−2002]\begin{bmatrix} -2 & 0 \\ 0 & 2 \end{bmatrix}

拡大縮小行列の例を見ていきましょう。大きさを 2 倍にしつつ y 軸を境に反転させてみた行列です。

[0.500−2]\begin{bmatrix} 0.5 & 0 \\ 0 & -2 \end{bmatrix}

x 軸方向に縮小させて、y 軸方向に反転拡大をさせてみた行列です。回転行列に比べれば難しくないですよね？

行列の積

2 倍して 60 度回転する。

行列は便利なことに行列同士を掛けてひとつにまとめることができます。

座標を 2 倍させた後にさらに 60 度回転させる場合、2 倍の拡大行列を掛けた結果に回転行列を掛けることもできますが、「2 倍して 60 度回転」する行列を作って一度に行列変換することができます。

行列はひとまとめにできる。

行列をまとめることは非常にメリットがあり、例えば 100 個の頂点に 5 つの行列を連続で掛けることに比べると、1 つにまとめた行列なら計算コストが 5 分の 1 で済みます。

行列を連続で掛ける

それでははじめに座標に行列を連続で掛けてみます。頂点 (3,1)(3, 1) を 2 倍にしてから 60 度回転する計算をしてみます。

[31]×[2002]=[62]\begin{bmatrix} 3 & 1 \end{bmatrix} \times \begin{bmatrix} 2 & 0 \\ 0 & 2 \end{bmatrix} = \begin{bmatrix} 6 & 2 \end{bmatrix} [62]×[cos⁡60∘sin⁡60∘−sin⁡60∘cos⁡60∘]=[1.2676.196]\begin{bmatrix} 6 & 2 \end{bmatrix} \times \begin{bmatrix} \cos 60^\circ & \sin 60^\circ \\ -\sin 60^\circ & \cos 60^\circ \end{bmatrix} = \begin{bmatrix} 1.267 & 6.196 \end{bmatrix}
左：(3,1) に 2 倍の拡大行列を掛ける。右：(6,2) に 60 度の回転行列を掛ける。

座標に拡大行列を掛けた結果にさらに回転行列を掛けたら、座標は (1.267, 6.196)(1.267,\ 6.196) に移動しました。

行列をまとめてから掛ける

2 行 2 列の行列同士の掛け算はこのようになります。（しくみは後ほど解説します）

[abcd]×[efgh]=[ae+bgaf+bhce+dgcf+dh]\begin{bmatrix} a & b \\ c & d \end{bmatrix} \times \begin{bmatrix} e & f \\ g & h \end{bmatrix} = \begin{bmatrix} ae+bg & af+bh \\ ce+dg & cf+dh \end{bmatrix}

では 2 倍の拡大行列と 60 度の回転行列を公式通り掛けて新しい行列をつくってみます。

[2002]×[cos⁡60∘sin⁡60∘−sin⁡60∘cos⁡60∘]=[1.01.732−1.7321.0]\begin{bmatrix} 2 & 0 \\ 0 & 2 \end{bmatrix} \times \begin{bmatrix} \cos 60^\circ & \sin 60^\circ \\ -\sin 60^\circ & \cos 60^\circ \end{bmatrix} = \begin{bmatrix} 1.0 & 1.732 \\ -1.732 & 1.0 \end{bmatrix}

右が「2 倍して 60 度回転する行列」です。それでは座標 (3,1)(3, 1) にこの行列を掛けてみましょう。

[31]×[1.01.732−1.7321.0]=[1.2676.196]\begin{bmatrix} 3 & 1 \end{bmatrix} \times \begin{bmatrix} 1.0 & 1.732 \\ -1.732 & 1.0 \end{bmatrix} = \begin{bmatrix} 1.267 & 6.196 \end{bmatrix}

前のページで連続で掛けた場合と同じ結果になりました。

式の意味するもの

それでは 2 行 2 列の行列の掛け算について見ていきましょう。2 行 2 列になったことで複雑に見えますが・・

[abcd]×[efgh]=[ae+bgaf+bhce+dgcf+dh]\begin{bmatrix} a & b \\ c & d \end{bmatrix} \times \begin{bmatrix} e & f \\ g & h \end{bmatrix} = \begin{bmatrix} ae+bg & af+bh \\ ce+dg & cf+dh \end{bmatrix}

上段と下段に分けて見てみると・・・

座標の行列変換と同じ構造が上下に並んでいるだけということに気がついたでしょうか？

上：x 軸のベクトルから変換後の x 軸ベクトルへ。下：y 軸のベクトルから変換後の y 軸ベクトルへ。

行列は軸を並べた構造だったので、それぞれの軸のベクトル（座標）に行列変換を掛けて新しい軸をつくっている仕組みになります。

軸の座標変換

2 倍の拡大行列に 60 度の回転行列を掛けると下図のようになります。

2 倍の拡大行列の軸
(2, 0) と (0, 2) を座標変換する

行列の軸 (2,0)(2, 0) と (0,2)(0, 2) を座標変換することは、座標 (2,0)(2, 0) と (0,2)(0, 2) を座標変換することと同じです。

変換後の軸は (1.0, 1.732) と (-1.732, 1.0)。

2 行 2 列の行列同士の積もまた軸の座標変換なのでした。仕組みを理解していただけたでしょうか？

拡大行列、回転行列、行列の積と学んだので次回は移動行列を解説する予定です。

← やさしい行列 #2「三角関数と回転行列」へ戻る やさしい行列 #4「移動の行列と3行3列」へ続く →

付録：もとのプリント

上の記事は、配布したプリントを画面で読める形に組み直したものです。誌面そのものは以下のとおり（押すと大きくなります）。

表紙
1ページ：向こう側のさらに向こう
2ページ：拡大縮小する世界
3ページ：拡大縮小の行列
4ページ：行列の積
5ページ：行列を連続で掛ける
6ページ：行列をまとめてから掛ける
7ページ：式の意味するもの
8ページ：軸の座標変換

← 記事一覧へ