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

数学ノート

やさしい行列 #4

公開 更新

コンピュータグラフィックス視点の行列入門プリントの4冊目です。今回は移動の行列と、そのために必要な 3 行 3 列の行列を扱います。

移動する世界

回転の行列
拡大縮小の行列

前回までは 2 行 2 列の行列で回転と拡大縮小を解説しました。回転も拡大縮小も原点を中心に座標変換する処理だったので、軸が原点から離れることはありませんでした。

移動の行列

しかし移動は特殊です。原点から離れてしまうので 2 行 2 列では表現できません。なのでこれまでと違った方法を使います。

3 行 3 列の行列

[100010001]\begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}
左上の 2×2 が回転と拡大、3 行目が移動、3 列目は常に 0 0 1。

移動を表現するために次元をひとつ増やして 3 行 3 列の行列にします。3 × 3 なので三次元を扱っているように見えますが違う使い方をします。

左上の 2 行 2 列はいままで通り拡大縮小と回転のために使います。3 行目が移動値を格納する場所になります。3 列目は便宜上 (0,0,1)(0, 0, 1) が並びます（これは行列の積で意味を成す値と配置なのですが今回は解説しません）。

上の行が x 軸のベクトル、真ん中が y 軸のベクトル、3 行目が移動値のベクトル（原点からのオフセット）。

イメージしやすいように行列を図にしてみました。移動の値だけ行列の軸がオフセットされているところがポイントです。軸が移動しているというよりは軸が原点 (0,0)(0,0) からオフセットしていると考えたほうがわかりやすいかもしれません。

3 行 3 列の計算式

[ab]×[cdef]=[ac+bead+bf]\begin{bmatrix} a & b \end{bmatrix} \times \begin{bmatrix} c & d \\ e & f \end{bmatrix} = \begin{bmatrix} ac+be & ad+bf \end{bmatrix}

2 行 2 列の行列とベクトルの掛け算はこのように計算しました。

[abc]×[defghijkl]=[ad+bg+cjae+bh+ckaf+bi+cl]\begin{bmatrix} a & b & c \end{bmatrix} \times \begin{bmatrix} d & e & f \\ g & h & i \\ j & k & l \end{bmatrix} = \begin{bmatrix} ad+bg+cj & ae+bh+ck & af+bi+cl \end{bmatrix}

3 行 3 列の行列とベクトルの掛け算も同じです。各成分を掛けて足していきます。これは次元が増えて 4 行 4 列になっても同じです。

ベクトルの座標変換

3 行 3 列の行列を使っていますがやっていることは 2 次元の計算です。ベクトルを座標変換する場合は、(x,y)(x, y) に z 成分として 1 を加えて計算していきます。

変換前の座標に z 成分の 1 を加えて掛け、最後に 1 を外すと変換後の座標になる。

行列の計算はこのようになります。

x′=x×d+y×g+1×jx' = x \times d + y \times g + 1 \times j y′=x×e+y×h+1×ly' = x \times e + y \times h + 1 \times l

具体例で見ていきましょう。座標 (3,1)(3, 1) を下の行列で座標変換してみます。

[210130521]\begin{bmatrix} 2 & 1 & 0 \\ 1 & 3 & 0 \\ 5 & 2 & 1 \end{bmatrix}
[311]×[210130521]=[1281]→[128]\begin{bmatrix} 3 & 1 & 1 \end{bmatrix} \times \begin{bmatrix} 2 & 1 & 0 \\ 1 & 3 & 0 \\ 5 & 2 & 1 \end{bmatrix} = \begin{bmatrix} 12 & 8 & 1 \end{bmatrix} \rightarrow \begin{bmatrix} 12 & 8 \end{bmatrix}

座標 (3,1)(3,1) は (12,8)(12,8) へ変換されました。

それぞれの行列のつくり方

移動

[100010x移動y移動1][100010521]\begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ x\text{移動} & y\text{移動} & 1 \end{bmatrix} \qquad \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 5 & 2 & 1 \end{bmatrix}

右は (5,2)(5, 2) 移動させる行列です。移動行列は三行目に移動させたい値を設定します。一行目と二行目の 2 × 2 のスペース（回転と拡大縮小）は空の行列にしておきます。

回転

[cos⁡θsin⁡θ0−sin⁡θcos⁡θ0001][cos⁡30sin⁡300−sin⁡30cos⁡300001]\begin{bmatrix} \cos\theta & \sin\theta & 0 \\ -\sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \qquad \begin{bmatrix} \cos 30 & \sin 30 & 0 \\ -\sin 30 & \cos 30 & 0 \\ 0 & 0 & 1 \end{bmatrix}

右は 30 度回転させる行列です。回転は 2 × 2 の行列と同じように左上の 4 マスを使います。三行目と三列目は (0,0,1)(0, 0, 1) にしておきます。

拡大

[x倍000y倍0001][300020001]\begin{bmatrix} x\text{倍} & 0 & 0 \\ 0 & y\text{倍} & 0 \\ 0 & 0 & 1 \end{bmatrix} \qquad \begin{bmatrix} 3 & 0 & 0 \\ 0 & 2 & 0 \\ 0 & 0 & 1 \end{bmatrix}

右は x 方向に 3、y 方向に 2 拡大させる行列です。拡大縮小の行列も回転と同じように左上の部分を使います。

移動させてみる

具体例で見てみましょう。座標 (3,1)(3, 1) に (5,2)(5, 2) 移動する行列を掛けてみます。z 成分に 1 を加えます。左上 4 マスは何もしない行列ということに注目してください。

[311]×[100010521]\begin{bmatrix} 3 & 1 & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 5 & 2 & 1 \end{bmatrix} =[3×1+1×0+1×51×0+1×1+1×21]= \begin{bmatrix} 3 \times 1 + 1 \times 0 + 1 \times 5 & 1 \times 0 + 1 \times 1 + 1 \times 2 & 1 \end{bmatrix} =[3+51+21]=[831]= \begin{bmatrix} 3+5 & 1+2 & 1 \end{bmatrix} = \begin{bmatrix} 8 & 3 & 1 \end{bmatrix}

x 成分と y 成分に移動値が加算されます。z 成分は不要なので外して結果は (8,3)(8, 3) となります。

図にするとこのようになります。新しい軸のグリッドが (5,2)(5, 2) だけオフセットしていますね。z 成分に 1 を加えて計算するのは移動値をそのまま加算するためということが分かると思います。

回転させてみる

それでは回転の行列です。座標 (3,1)(3, 1) に 30 度回転する行列を掛けてみます。三行目の移動部分は 0 になっていることに注目してください。

もとの誌面では「60度」と書かれています（付録の7ページ）。掛けている行列も答えも 30 度のものなので、書き間違いとみて 30 度に直しました。

[311]×[cos⁡30sin⁡300−sin⁡30cos⁡300001]\begin{bmatrix} 3 & 1 & 1 \end{bmatrix} \times \begin{bmatrix} \cos 30 & \sin 30 & 0 \\ -\sin 30 & \cos 30 & 0 \\ 0 & 0 & 1 \end{bmatrix} =[3×cos⁡30+1×(−sin⁡30)+1×01×sin⁡30+1×cos⁡30+1×01]= \begin{bmatrix} 3 \times \cos 30 + 1 \times (-\sin 30) + 1 \times 0 & 1 \times \sin 30 + 1 \times \cos 30 + 1 \times 0 & 1 \end{bmatrix} =[3×cos⁡30+1×(−sin⁡30)1×sin⁡30+1×cos⁡301]= \begin{bmatrix} 3 \times \cos 30 + 1 \times (-\sin 30) & 1 \times \sin 30 + 1 \times \cos 30 & 1 \end{bmatrix}

3 行目の (0,0,1)(0,0,1) の並びが上手く機能して z 成分が 0 になり、2 × 2 の回転行列と同じ計算になります。

=[2.0982.3661]= \begin{bmatrix} 2.098 & 2.366 & 1 \end{bmatrix}

z 成分は不要なので外して結果は (2.098, 2.366)(2.098,\ 2.366) となります。

図にするとこのようになります。2 × 2 の回転行列と同じ計算をしています。

拡大縮小させてみる

最後に拡大縮小行列です。座標 (3,1)(3, 1) に (3,2)(3, 2) の拡大行列を掛けてみます。

[311]×[300020001]\begin{bmatrix} 3 & 1 & 1 \end{bmatrix} \times \begin{bmatrix} 3 & 0 & 0 \\ 0 & 2 & 0 \\ 0 & 0 & 1 \end{bmatrix} =[3×3+1×0+1×01×0+1×2+1×01]= \begin{bmatrix} 3 \times 3 + 1 \times 0 + 1 \times 0 & 1 \times 0 + 1 \times 2 + 1 \times 0 & 1 \end{bmatrix} =[3×31×21]=[921]= \begin{bmatrix} 3 \times 3 & 1 \times 2 & 1 \end{bmatrix} = \begin{bmatrix} 9 & 2 & 1 \end{bmatrix}

x 方向に 3、y 方向に 2 が掛かる計算になります。z 成分は不要なので外して結果は (9,2)(9, 2) となります。

図にするとこのようになります。回転行列と同じで 2 × 2 の行列と同じ計算になります。次回は 3 × 3 の行列の積を具体例を使って解説していきます。

← やさしい行列 #3「拡大縮小の行列と行列の積」へ戻る

付録：もとのプリント

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

表紙
1ページ：移動する世界
2ページ：3行3列の行列
3ページ：3行3列の計算式
4ページ：ベクトルの座標変換
5ページ：それぞれの行列のつくり方
6ページ：移動させてみる
7ページ：回転させてみる
8ページ：拡大縮小させてみる

← 記事一覧へ