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

数学ノート

やさしい行列 #1

公開 更新

職場の人のために書いたコンピュータグラフィックス視点の行列入門プリントです。行列の基礎的な考え方や仕組みを解説しています。

行列とは

上から順に、移動の行列、回転の行列、拡大縮小の行列。

コンピュータグラフィックスの世界ではモデルを移動させたり回転させたりするために行列という空間をつくり、それを利用して座標を一括で変換させる処理を行っています。

3次元の行列はややこしいのでシンプルな2次元から始め、行列の基本的な概念を図を交えて解説していきます。行列は計算量は多いですが、足し算や掛け算ばかりなので概念さえ理解すればそんなに難しくはないはずです。

いろいろな座標系

これはよく見る一般的な座標系です。横軸が x、縦軸が y です。これが当たり前だと思いがちですが・・・

このような座標系も存在するのです。歪んでいるように見えますがやはり横軸が x、縦軸が y です。この世界の座標 (6,2)(6, 2) は点 P の位置になります。

向こう側の世界

P のローカル座標は (3, 1)。

いま、とあるふたつの世界（座標系）を重ねてみました。向こう側の世界の点 P は座標 (3,1)(3, 1) の位置にありますが、こちら側から見たらどこにあるのでしょうか・・・

ここで軸に注目してみてください。向こう側の世界の x’ 軸のひとマスは x 方向に 2、y 方向に 1 のベクトルの形になっています。つまり向こう側で x’ 方向にひとマス進むということはこちら側で x 方向に 2、y 方向に 1 進んでいることになります。これを手掛かりにすれば P の座標を計算できるはずです・・・

計算してみよう

x 成分

x’ 軸方向に 3 進むと x 軸方向には 2×3=62 \times 3 = 6 進み、y’ 軸方向に 1 進むと x 軸方向には 1×1=11 \times 1 = 1 進むので、合計で 6+1=76 + 1 = 7 進んだことになります。

y 成分

x’ 軸方向に 3 進むと y 軸方向には 1×3=31 \times 3 = 3 進み、y’ 軸方向に 1 進むと y 軸方向には 3×1=33 \times 1 = 3 進むので、合計で 3+3=63 + 3 = 6 進んだことになります。

というわけで向こうの世界の (3,1)(3, 1) である点 P はこちら側の世界から見た座標では (7,6)(7, 6) に位置していることがわかりました。

行列の計算式

毎回図を見ながら計算するのも面倒くさいので、便利な行列の式を使うことにします。前のページの計算を式で表すとこのようになります。

[31]×[2113]=[76]\begin{bmatrix} 3 & 1 \end{bmatrix} \times \begin{bmatrix} 2 & 1 \\ 1 & 3 \end{bmatrix} = \begin{bmatrix} 7 & 6 \end{bmatrix}

左が座標、真ん中が向こうの世界をあらわした行列、右が変換後の座標です。

計算手順はこのようになります。何か難しそうな計算式に見えますがやっていることは前ページと同じです。

[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}

横方向と縦方向でそれぞれの成分を掛け算するかたちになります。

掛け算の方向はこうすると覚えやすいかも・・・

要素を細かく見てみると・・

真ん中の行列の上の行が x' 軸のベクトル、下の行が y' 軸のベクトル。左の列が x 成分、右の列が y 成分。

軸のベクトルの x、y 各成分に座標を掛けて足していることがわかると思います。座標を “掛ける回数” と考えればわかりやすいかもしれません。前の図と見比べながら考えてみてください。

空間は軸で定義できる

ここで問題です。つぎの行列における (3,1)(3, 1) の座標をこれまでと同じ方法で求めてみましょう。

[13−11]\begin{bmatrix} 1 & 3 \\ -1 & 1 \end{bmatrix}
答え (2, 10)
[21−13]\begin{bmatrix} 2 & 1 \\ -1 & 3 \end{bmatrix}
答え (5, 6)

軸のベクトル情報があれば空間を定義することが出来るというところが行列のポイントです。

何もしない行列

ここで大事な行列をもうひとつ紹介します。私たちがよく知っているいつもの座標系です。空の行列と言われたりしています。

[1001]\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}

真横に x 軸、縦に y 軸という当たり前の座標系ですが、行列の空間では x 軸は (1,0)(1, 0)、y 軸は (0,1)(0, 1) を向くベクトルと定義します。座標にこの行列を掛けても何も変わらないことを確認してみてください。

[31]×[1001]=[3×1+1×03×0+1×1]=[31]\begin{bmatrix} 3 & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix} = \begin{bmatrix} 3 \times 1 + 1 \times 0 & 3 \times 0 + 1 \times 1 \end{bmatrix} = \begin{bmatrix} 3 & 1 \end{bmatrix}

x 軸には x 成分しかなく、y 軸には y 成分しかないという状態ですね。いままで当たり前のように慣れ親しんできたこの座標系は「たまたま」軸の他成分が 0 だったと考えてみてください。今までとは違った見方ができるようになってきたのではないでしょうか。

座標変換の流れ

[xy]×[33−13]=[3×x+(−1)×y3×x+3×y]\begin{bmatrix} x & y \end{bmatrix} \times \begin{bmatrix} 3 & 3 \\ -1 & 3 \end{bmatrix} = \begin{bmatrix} 3 \times x + (-1) \times y & 3 \times x + 3 \times y \end{bmatrix}

コンピュータグラフィックスの世界ではモデルのすべての頂点に対してこのような計算をすることで座標変換が行われます。

実際は今回扱ったような平行四辺形のいびつな空間はあまり使われないのですが、空間は軸によって表すことが出来るということを強調するために敢えて使ってみました。

次回に続きます・・・

やさしい行列 #2「三角関数と回転行列」へ続く →

付録：もとのプリント

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

表紙
1ページ：行列とは
2ページ：いろいろな座標系
3ページ：向こう側の世界
4ページ：計算してみよう
5ページ：行列の計算式
6ページ：空間は軸で定義できる
7ページ：何もしない行列
8ページ：座標変換の流れ

← 記事一覧へ