２Ｄアフィン変換を使ってみよう

はじめに

行列といえば 高校数学の数 c で勉強しますが、ここでは、行列の演算方法がわからなくてもまったく気にする必要はなく、今から解説する通りに関数を組み合わせて使うだけで座標変換ができます。

なおここで使用する関数はこちらにあるので、すべてコピーして タイムラインの1番目に張って使うか、ダウンロードしてから、 asファイルを外部からインクルードして下さい。

　

行列を使ってできること

さて行列を使うことで3つの座標変換の結果を得ることができます。



・座標の移動



・原点を基点とした回転



・原点を基点とした拡大縮小




です。

各成分を持った行列を作ってみよう

　

ここから関数の使い方の説明になります。サンプルでは、やたらと関数の種類がありますが、実際のコアとなる関数は以下の 3 つです。この関数を使って座標変換の成分を持った行列を作ってみましょう。

・移動行列作成　Mtx33Translate(x,y);
・回転行列作成　Mtx33Rotate(rot);
・拡縮行列作成　Mtx33Scale(x,y);

　

では、各関数の使い方です。

　

平行移動行列作成

★Mtx33Translate();

第01引数 x 方向に移動したい値
第02引数 y 方向に移動したい値
戻り値 マトリックスの配列

　

移動する成分を持った行列を作成します。 例えばx方向に 3 、y方向に5移動させたいな～と思ったら以下のようにして関数を使います。返ってきた配列は後で使うのでとりあえず変数に格納します。

例) x方向に 3　、y方向に 5 移動する成分を持つ行列を作成

var matrix = _root.Mtx33Translate(3,5);

　

回転行列作成

★Mtx33Rotate();

第01引数 角度
戻り値 マトリックスの配列

　

原点を基点にして回転する成分を持った行列を作成します。 例えば原点を中心に30度回転させたいな～と思ったら以下のようにして関数を使います。返ってきた配列は後で使うのでとりあえず変数に格納します。

例) 原点を基点に30度 回転する成分を持つ行列を作成

var matrix = _root.Mtx33Rotate(30);

　

拡縮行列作成

★Mtx33Scale();

第01引数 角度
戻り値 マトリックスの配列

　

原点を基点にして x 方向と y 方向に拡大縮小する成分を持った行列を作成します。 例えば原点を中心にx方向に2倍、y方向に0.5倍拡大縮小させたいな～と思ったら以下のようにして関数を使います。返ってきた配列は後で使うのでとりあえず変数に格納します。

例) 原点を基点にx方向に2倍、y方向に0.5倍拡大する成分を持つ行列を作成

var matrix = _root.Mtx33Scale(2,0.5);

　

　

好きな座標をマトリックスに射影してみよう


次にこの関数を使います。この関数は、先ほど作った行列を使って、好きな座標を変換することができます。

★Vec2dTransformPoint();

第01引数 変換したいx座標
第02引数 変換したいy座標
第03引数 座標変換成分を持った行列
戻り値 変換後の座標(オブジェクト型)

　

使い方を見てみましょう。例えば座標(10,12)をx方向に3y方向に-2移動した後の座標を求めるには、以下のようにします。

　

座標(10,12)をx方向に3y方向に-2移動した後の座標

var m = _root.Mtx33Translate(3,-2); var vec = _root.Vec2dTransformPoint(10,12,m);

　

もうひとつ例です。座標（5,8）を原点を中心に30度回転した後の座標を求めてみます。

　

座標（5,8）を原点を中心に30度回転した後の座標

var m = _root.Mtx33Rotate( 30 ); var vec = _root.Vec2dTransformPoint(5, 8, m);

　

もうひとつ例です。座標（8,11）を原点を中心にx方向に 2 倍、y方向に 3 倍引き伸ばした後の座標を求めてみます。

　

座標（8,11）を原点を中心にx方向に2倍y方向に3倍引き伸ばした座標

var m = _root.Mtx33Scale( 2, 3 ); var vec = _root.Vec2dTransformPoint(8, 11, m);

　

簡単ですね。

　

　

もう一度ここまでの流れを説明すると、座標変換の方法としては３つあり、移動と回転と拡大があります。その３つは以下の関数を使うことにより、変換の成分を持った行列を取得できます。


・移動行列作成 =　Mtx33Translate(x, y);
・回転行列作成 =　Mtx33Rotate(rot);
・拡縮行列作成 =　Mtx33Scale(x, y);

　

そして得られた行列を使ってこの関数で、好きな座標を変換した後の結果を得ることができます。

Vec2dTransformPoint(x, y, ３つの行列のどれか);

　

　

座標変換成分を１つの行列にまとめる


ここまでの説明ですでに座標変換はできるのですが、さらに行列には便利な使い方ができます。それは、移動、回転、拡大という３つの成分を１つの行列に合成して持たせることができるのです。
数学的には行列同士の乗算をしています。

行列と行列を合成するには以下の関数を使用します。

　

★Mtx33Transform();

第01引数 合成したい 1 つ目の行列
第02引数 合成したい 2 つ目の行列
戻り値 合成された行列

　

例えば、
「x座標に 2 、y座標に 3 移動する」行列と、
「原点を中心に30度回転する」行列を合成すると、
「x座標に 2 、y座標に 3 移動してから原点を中心に30度回転する」行列を得ることができます。

　

行列を1つに合成する

var m1 = _root.Mtx33Translate(2, 3); // 移動成分 var m2 = _root.Mtx33Rotate(30); // 回転成分 var m3 = _root.Mtx33Transform(m1 ,m2); // 合成

　

さらに３つ４つと何回でも合成をすることができます。

　

行列を1つに合成する

var m1 = _root.Mtx33Translate(2, 3); // 移動成分 var m2 = _root.Mtx33Rotate(30); // 回転成分 var m3 = _root.Mtx33Scale(1, 2); // 拡縮成分 var m4 = _root.Mtx33Translate(4, 8); // 移動成分 var m5 = _root.Mtx33Rotate(-10); // 回転成分 var m6 = _root.Mtx33Transform(m1 ,m2); // 合成 m6 = _root.Mtx33Transform(m6 ,m3); // 合成 m6 = _root.Mtx33Transform(m6 ,m4); // 合成 m6 = _root.Mtx33Transform(m6 ,m5); // 合成

　

そして合成して得られた行列で、Vec2dTransformPoint()関数を使って座標変換すると、合成した順番どおりの座標変換結果が得られるわけです。 上の例の場合では、

x方向に2、y方向に3移動してから
↓
原点を中心に30回転してから
↓
原点を中心にx方向に1倍、y方向に倍2移動してから
↓
x方向に4、y方向に8移動してから
↓
原点を中心に30回転。

　

した後と同じ座標変換の結果を得ることができます。

　

ここで非常に注意してもらいたいのが合成する順番によって結果が変わるということです。 例えば、

x方向に 30 、y方向に 1 移動してから
↓
原点を中心に90 回転する

という座標変換と、

原点を中心に 90 回転してから
↓
x方向に 30、y方向に 1 移動する

という座標変換は、別の値になるので合成の順番には注意してください。

　

　

好きな座標を中心に回転するには


行列を使うと原点を中心に回転や拡大ができることはわかりました。しかし、いつも原点を中心に回転したいとは限りません。好きな座標を中心に回転することはできないのでしょうか？

　

実はできます。例えば、座標(10,20)を中心に 30 度回転したいとします。そんなときは、まず、この回転させたい中心の座標が原点にくるように平行移動します。 そこで回転の変換をしてから、またもとの位置(10,20)に平行移動して戻します。

なにをしているのかというと、原点を中心にしか回転できないのであれば、一度原点に持っていって回転してからまたもとの位置に戻してしまえということなんですね。

　

(10, 20) を中心に30度回転する行列を作成

var m1 = _root.Mtx33Translate(-10, -20); // 移動成分 var m2 = _root.Mtx33Rotate(30); // 回転成分 var m3 = _root.Mtx33Translate( 10, 20); // 移動成分 var m4 = _root.Mtx33Transform(m1 ,m2); // 合成 m4 = _root.Mtx33Transform(m4 ,m3); // 合成