中植正剛
address

第3章 二次元図形の座標変換

3.0. この章の内容

図形は回転させたり裏返したりすることで別の図形を生成することができる。この章では、二次元図形の基本的な図形変換を取扱う。これらは、後ほど取扱う三次元画像の変換にとっても基本となる考え方である。

教科書 p.68 - 70参照

3.1. 座標系と座標

3.1.1. 座標系

二次元空間の中で一点の位置を表現するためには、横方向(x)と縦方向(y)の位置を示さなければならない。このために座標系を用いる。

座標系は原点と原点で交差する2本の直交した軸からなるが、二次元の場合、以下の二通りの座標系が存在する。

左: 左下を原点とした座標系(a)
右: 左上を原点とした座標系(b)

chap3_1.png(2075 byte)chap3_2.png(2012 byte)

CGでは a)の座標系を使うことが多い。しかし、画像処理ソフトによってはb)を使用するものもある。(Macromedia Flash MX 2004など)。

以後の解説は aの座標系を基に行うが、上手に読み替えることでbの座標系にも適用できる。

3.1.2. 座標

二次元の座標系に配置された点の座標は、次のように表わす

 (x,y) 
例:x=10, y=8のとき
(10,8) 

これを直交座標による表現方法という。

また、極座標という方法による表現方法もある。これは、原点0からの距離rと、基準の軸(大抵はx座標)から半時計周りに回転したの角度θの組み合わせで表現する方法で、次のように表わす

(r,θ)
chap3_28.png(1951 byte)

極座標を直交座標に直す際には次の式を用いる

x = rcosθ
y = rsinθ
chap3_30.png(2634 byte)

座標を計算によって別の位置に移動させる処理を座標変換という

3.2. 行列

次節3.3.では二次元画像を移動させたり、回転させたりといった幾何変換を取扱うが、その前提として行列の演算を理解しておく必要がある。

行列とは、複数の数値を格子状に並べて[ ] で括ったものである

行列の例
chap3_3.png(1311 byte)

* 一般的に、m行n列の行列をm×nと表わす。この例は2×2の行列であるが、1×2や2×1や3×3など、さまざまなものがある。

行列を用いることで、さまざまな四則計算ができる。

中学生にも解ける大学入試問題: かなり詳しく簡単に書いてある

行列同士の和

行列同士の足し算は、同じ位置にある数値同士を足す

chap3_5.png(3113 byte)

例:
chap3_4.png(1869 byte)

行列同士の積

行列同士の掛け算は、かけられる側(左側)の「行」かける側(右側)の「列」を掛け合わせるのが基本である。

2×2の行列と2×1の行列の掛け算
chap3_7.png(3164 byte)

2×2行列同士の掛け算
chap3_6.png(4391 byte)

3×3の行列と3×1の行列の掛け算

chap3_26.png(4344 byte)

3.3. 二次元座標の幾何変換

3.3.1. 平行移動

教科書 p.68参照

二次元座標上の点(x,y)をx軸方向にtx、y軸方向にtyだけ移動した点(x',y')は次のようになる

x' = x + tx
y' = y + ty

この式を使うと、座標上の一点だけではなく、点の集合である図形も同様の式で平行移動できる。

(10,10), (10,40), (40,10), (40,40)という頂点を持つ「N」という図形をx方向に10、y方向に10平行移動する場合、それぞれの頂点に対して、

x' = x + 10
y' = y + 10

を適用すると、(20,20),(20,50),(50,20),(50,50)という頂点を持つ「N」に変換される。
(* 実際には頂点だけではなく、図形上の全ての画素に対して上記の式が適用される)

平行移動の式を行列で表現すると次のようになる

chap3_8.png(1532 byte)

平行移動の例題

ある図形を右に8、上に10平行移動したときには、
chap3_31.png(1918 byte)
と表わすことができる

では、次の場合はどのように記述できるだろうか。

  1. 右に7、上に6
  2. 左に5、上に10
  3. 左に9、下に8

3.3.2. 拡大・縮小

教科書 p.69参照

二次元座標上の図形をx軸方向にsx、y軸方向にsy拡大・縮小する式は、

x' = sxx
y' = syy

である。

このとき、sx>1のときには拡大0<sx<1のときには縮小となる。

(10,10),(10,30),(30,10),(30,30)という頂点を持つ「N」という図形をx方向に2倍、y方向に2倍拡大する場合、それぞれの頂点に対して、

x' = 2x
y' = 2y

を適用すると、(20,20),(20,60),(60,20),(60,60)という頂点を持つ「N」に変換される。
(* 実際には頂点だけではなく、図形上の全ての画素に対して上記の式が適用される)

拡大・縮小の式を行列で表わすと次のようになる

chap3_9.png(2029 byte)

拡大・縮小の例題

今、次のような図があるとする

chap3_32.png(2399 byte)

元の図形をx方向に3倍拡大したい。このときの行列式は次のうちどれになるか

chap3_41.png(2529 byte)
  1. chap3_33.png(1824 byte)
  2. chap3_34.png(1843 byte)
  3. chap3_35.png(1873 byte)
  4. chap3_36.png(1846 byte)

元の図形を縦横共に半分に縮小したい。このときの行列式は次のうちのどれになるか。

chap3_42.png(2028 byte)
  1. chap3_37.png(1936 byte)
  2. chap3_38.png(1852 byte)
  3. chap3_39.png(2171 byte)
  4. chap3_40.png(2030 byte)

3.3.3. 回転

回転は原点を中心にθ度回転させるものとする。向きは反時計回りである。回転は、次の式で表わす

x' = xcosθ - ysinθ
y' = xsinθ + ycosθ

回転の式を行列で表わすと次のようになる。

chap3_10.png(2753 byte)

例えば、次のような図があるとする

chap3_44.png(2032 byte)

これを原点を中心に45度回転させたいとする

chap3_45.png(3308 byte)

この回転を表わす行列式は次のようになる

chap3_46.png(1882 byte)

つまり、

chap3_47.png(1609 byte)

回転の練習問題

次のような図があるとする

chap3_43.png(2440 byte)

これを原点を中心として30度回転させたい。

chap3_49.png(4134 byte)

行列式は次のどれになるだろうか

  1. chap3_50.png(1656 byte)
  2. chap3_51.png(1665 byte)
  3. chap3_52.png(1843 byte)
  4. chap3_53.png(1836 byte)

3.3.4. 反転(鏡映)

教科書 p.70参照

ある図形をx軸に関して反転させる操作は次の式で表わされる

x' = x
y' = -y

これを行列で表わすと、次のようになる。

chap3_11.png(2091 byte)

同様に、y軸に関して反転するには、次の式を用いる

x' = -x
y' = y

行列では次のようになる

chap3_12.png(2125 byte)

このように、x軸やy軸などの直線に関して反転させ、線対称の画像を得る操作を鏡映という。

原点に対して点対称の移動を行う場合は、

x' = -x
y' = -y

となる

行列による表現は次のとおりである。

chap3_13.png(2090 byte)

反転の例題

次の図形を考える

chap3_43.png(2440 byte)
  1. この図形をx軸に対して反転させたい
    chap3_54.png(3320 byte)
    このときの行列式を書き出そう
  2. 元の図形をy軸に対して反転させたい
    chap3_55.png(2474 byte)
    このときの行列式を書き出そう
  3. 元の画像を原点を中心として点対称の移動を行いたい
    このときの行列式を書き出そう

3.3.5. せん断 (shear)

せん断は少々理解しにくい変換であるが、底のないダンボール箱を上から覗きこんだところを思い浮かべていただきたい。底のないダンボールは四角の状態から、次の図のように、さまざまな形に変形させることができる。

長方形のせん断
chap3_14.png(3496 byte)

それぞれの辺は平行を保ったまま変形される。このような変形をせん断という

説明をわかりやすくするために、ダンボール箱を例にとって長方形のせん断を例にあげたが、せん断は長方形である必要はない。次に五角形のせん断の図を示す

五角形のせん断
chap3_15.png(4958 byte)

ただし、この場合も、やみくもに変形しているわけではなく、五角形を取り巻く見えないダンボール箱があるとすると、そのダンボール箱の対面する辺が平行を保ったまま変形するように五角形が変形している。

chap3_16.png(7512 byte)

せん断は次の式によって処理される

x' = ax + y
y' = x + by

せん断を行列で表現すると次式のようになる

chap3_17.png(1990 byte)

3.4. アフィン変換

拡大・縮小・回転・反転・せん断のように2×2の行列で表わされる変換と、2×1の行列で表わされる平行移動を組み合わせて統一的に扱う変換をアフィン変換という。

アフィン変換によって、図形をXY座標上で自由に変形したり移動したりできる。例えば、「画像を反転させてから、x方向に3、y方向に6平行移動」したり、「画像を60度回転してから、x方向に8、y方向に5平行移動する」というような変換が可能である。

なお、アフィン変換は必ずしも[拡大・縮小・回転・反転・せん断]と[平行移動]の両方を行う必要はなく、いずれか一つでもよい

アフィン変換の式は次のとおりである。

x' = ax + by + tx
y' = cx + dy + ty

このとき、a,b,c,dは回転・拡大縮小・反転・せん断を処理し、txとtyは平行移動を処理する。

これを行列で表わすと次のように3×3の行列となる

chap3_20.png(2816 byte)
アフィン変換の例

ある図形を、原点を中心に30度回転させてから右(X軸方向)に5、上(Y軸方向)に3移動させる場合を考える。このときの式は次のとおりである。

chap3_27.png(2864 byte)

上記の式で、左上の2行2列は回転を表わし、右1列の上側2つはx=5、y=3の移動を表わす。

なお、必ずしも二種類の変換を混ぜる必要はない。例えば、平行移動だけなら次のような式になる。

chap3_61.png(1838 byte)

上記は、右(X軸方向)に5、上(Y軸方向)に10移動させる式である。

X軸方向に3倍、Y軸方向に1.5倍拡大するときには、次のような式となる。

chap3_62.png(1961 byte)

アフィン変換の例題

次のような図がある

chap3_43.png(2440 byte)

これを原点を中心に30°回転し、さらに右に2、上に3平行移動させたい

chap3_56.png(6619 byte)

行列式は次のどれになるか

  1. chap3_57.png(2538 byte)
  2. chap3_58.png(2575 byte)
  3. chap3_59.png(2898 byte)
  4. chap3_60.png(3296 byte)

3.5. 連続する変換の表現

拡大縮小の後に回転を行ったり、せん断の後に回転を行ったりといったように、連続して変換を行うときには、次のように3×3の行列を変換の順に右から並べてゆく

chap3_63.png(2507 byte)

計算は右から順に行ってゆく。

例えば、ある図形を、X軸方向に3,y軸方向に5拡大した後に、原点について45度回転し、さらにX軸方向に4,y軸方向に3平行移動させる場合は次のような行列式で表わすことができる。

chap3_64.png(3719 byte)
このページに関するお問い合わせはaddressまでお願いいたします。