2次元図形の基本的変換（幾何学的変換）

本記事では，コンピュータグラフィクスの基礎である2次元座標変換を紹介します．

コンピュータグラフィクスにおいて，代表的な2次元図形には，**線分**と**ポリゴン（多角形）**があります．
線分は**2点の座標**，ポリゴンは**複数座標**で表されます（必ずしも，ポリゴン=3点の座標という訳ではありません）．

コンピュータグラフィクスで図形を生成する際，図形を構成する座標をいちいち定義することは少なく，既に定義されている図形を**変形**し，目的の図形を取得するのが一般的です．
この変形操作のことを**幾何学的変換**といいます．

CG関連の参考書や論文に載っている幾何学的変換は，一見複雑そうに見えますが，
以下の5つの基本的な変換の組み合わせで表すことができます．　

- **平行移動**
- **拡大・縮小**
- **回転**
- 鏡映
- スキュー

ここでは，この5つの中でもより一般的な**平行移動**，**拡大・縮小**，**回転**について説明し，
これらの変換を組み合わせるために必要な同次変換についても取り上げます．


##平行移動
図形全体を向きや大きさを保ったまま，平行に移動する変換です．
図形を構成する個々の点$(x,y)$をそれぞれ$t_x$，$t_y$だけ移動させるだけです．
移動させた点を$(x',y')$とすると以下のように表すことができます．

```math
\left\{
\begin{array}{ll}
x'=x+t_x \\
y'=y+t_y
\end{array}
\right.
```
これを，ベクトルで表現すると以下のように**和の形**で表されます．

```math
\begin{bmatrix}
x'  \\
y'
\end{bmatrix}
=
\begin{bmatrix}
x  \\
y
\end{bmatrix}
+
\begin{bmatrix}
t_x  \\
t_y
\end{bmatrix}
```

##拡大・縮小
図形全体の拡大と縮小を行う変換です．
拡大・縮小は，一般的に**原点中心**で行います．
図形を構成する個々の点$(x,y)$をそれぞれ$s_x$，$s_y$倍するだけです．
変換後の点を$(x',y')$とすると以下のように表されます．

```math
\left\{
\begin{array}{ll}
x'=s_xx & (s_x>1では拡大，0<s_x<1では縮小)\\
y'=s_yy & (s_y>1では拡大，0<s_y<1では縮小)
\end{array}
\right.
```
これを，ベクトルで表現すると以下のように**積の形**で表されます．

```math
\begin{bmatrix}
x'  \\
y'
\end{bmatrix}
=
\begin{bmatrix}
s_x & 0  \\
0 & s_y
\end{bmatrix}
\begin{bmatrix}
x  \\
y
\end{bmatrix}
```

##回転
図形全体を回転させる変換です．
回転も，拡大・縮小と同様，一般的に**原点中心**で行います．
図形を構成する個々の点$(x,y)$を，原点を中心に反時計回りに角度$θ$だけ回転させます．
変換後の点を$(x',y')$とすると以下のように表されます．

```math
\left\{
\begin{array}{ll}
x'=x\cosθ-y\sinθ\\
y'=x\sinθ+y\cosθ
\end{array}
\right.
```

これを，ベクトルで表現すると以下のように**積の形**で表されます．

```math
\begin{bmatrix}
x'  \\
y'
\end{bmatrix}
=
\begin{bmatrix}
\cosθ & -\sinθ  \\
\sinθ & \cosθ
\end{bmatrix}
\begin{bmatrix}
x  \\
y
\end{bmatrix}
```

##同次座標
ここまで平行移動，拡大・縮小，回転をそれぞれ$\begin{bmatrix}x & y\end{bmatrix}$のベクトルで表現しました．
ここで着目して欲しいのが，平行移動については**和の形**となり，拡大・縮小と回転は**積の形**となってしまいます．
このような形の違いは，幾何学変換をまとめて扱う際に都合が悪いのです．

そこで登場するのが，幾何学変換を統一的に表現可能にする**同次座標**というものです．
これまで用いてきた$(x,y)$などの**通常座標**では，幾何学変換によって積や和などバラバラでしたが，同次座標を用いると，幾何学変換をすべて**積の形**で表現することができます．

 
では，同次座標とはどのような座標なのでしょうか？
これまで通常座標で位置を表す際$(x,y)$を用いていました．
対して同次座標は，そこに**実数$w$**という概念を追加して，$(wx, wy, w)$として位置を表します．
また，この実数wの値は**0以外なら何でもよい**ので，簡単にするために普通は$w=1$とし，$(x,y)$を$(x,y,1)$と表現します．
つまり，通常座標で$(3,5)$であれば，同次座標では$(3,5,1)$と表します．

それでは，先ほど説明した，平行移動，拡大・縮小，回転を同次座標を用いて表してみましょう．

* **平行移動**

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\begin{bmatrix}
1 & 0 & t_x \\
0 & 1 & t_y \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```
また，一般的に平行移動の変換行列を省略して$\boldsymbol{T}(t_x, t_y)$と表され，これを用いると，

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\boldsymbol{T}(t_x, t_y)
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```

* **拡大・縮小**

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\begin{bmatrix}
s_x & 0 & 0 \\
0 & s_y & 0 \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```
また，一般的に拡大・縮小の変換行列を省略して$\boldsymbol{S}(t_x, t_y)$と表され，これを用いると，

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\boldsymbol{S}(t_x, t_y)
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```

* **回転**

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\begin{bmatrix}
\cosθ & -\sinθ & 0  \\
\sinθ & \cosθ & 0 \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```
また，一般的に拡大・縮小の変換行列を省略して$\boldsymbol{R}(θ)$と表され，これを用いると，

```math
\begin{bmatrix}
x'  \\
y'  \\
1
\end{bmatrix}
=
\boldsymbol{R}(θ)
\begin{bmatrix}
x  \\
y  \\
1
\end{bmatrix}
```

<br/>
以上が，2次元図形の基本的な変換3つとなります．
残りの変換に**鏡映**，**スキュー**がありますが，また次の記事で解説します．