２Ｄゲーム用の３行３列のマトリックスの関数を作ろう

・	単位行列を作成する
・	平行行列を作成する
・	回転行列を作成する
・	拡縮行列を作成する
・	座標の射影変換
・	ベクトルの射影変換
・	マトリックスの射影変換
・	正規直交行列の逆行列を作成する
・	逆行列を作成する
・	ソースをダウンロード

前のページに戻る

単位行列を作成する

■行列の型

Matrixクラスと互換性を持たせるために同じオブジェクト形式で行列計算しています。

ここで扱うマトリックスの形式


var matrix = {
	a  : 0 , b  : 0,
	c  : 0 , d  : 0,
	tx : 0 , ty : 0,
};

■単位行列生成

行列用のオブジェクトを生成する関数です。これで単位行列を作ります。

単位行列の作成


function Mtx33Create(){
	return {
		a : 1,    b : 0,
		c : 0,    d : 1,
		tx: 0,    ty: 0
	};
}

使用例です。

例）行列を作成する


	var matrix = Mtx33Create();

上に戻る

平行行列を作成する

■平行行列生成

平行行列を作成します。

第01引数にx座標
第02引数にy座標を指定します。
戻り値に行列がオブジェクト型で返ります。

平行行列を作成


function Mtx33Translate(x,y){
	return {
		a : 1,    b : 0,
		c : 0,    d : 1,
		tx: x,    ty: y
	};
}

使用例です。

例）x座標に 20 y座標に -7 移動する行列


	var matrix = Mtx33Translate(20,-7);

■平行行列 × 行列

平行行列を生成してから、別の行列の前に置いて乗算する関数です。

第01引数にx座標
第02引数にy座標
第03引数に行列を指定します。
戻り値に行列がオブジェクト型で返ります。

平行行列を別の行列の前に置いて乗算


function Mtx33TranslatePref(x,y,m){
	return {
		a : m.a,
		b : m.b,
		c : m.c,
		d : m.d,
		tx: x * m.a + y * m.c + m.tx,
		ty: x * m.b + y * m.d + m.ty
	};
}

使用例です。

例）[(5,5)移動する行列] × [(20,-7)移動する行列]


	var m1 = Mtx33Translate(20,-7);
	var m2 = Mtx33TranslatePref(5,5,m1);

■行列 × 平行行列

平行行列を生成してから、別の行列の後に置いて乗算する関数です。

第01引数にx座標
第02引数にy座標
第03引数に行列
戻り値に行列が返ります。

平行行列を別の行列の後に置いて乗算


function Mtx33TranslatePost(x,y,m){
	return {
		a : m.a,
		b : m.b,
		c : m.c,
		d : m.d,
		tx: m.tx + x,
		ty: m.ty + y
	};
}

使用例です。

例）[(20,-7)移動する行列] × [(5,5)移動する行列]


	var m1 = Mtx33Translate(20,-7);
	var m2 = Mtx33TranslatePost(5,5,m1);

上に戻る

回転行列を作成する

回転行列生成

第01引数に角度
戻り値に行列が返ります。
回転行列を作成
function Mtx33Rotate(rot){
  
  var rad = rot * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);

  return {
    a : cos,  b : sin,
    c : -sin,  d : cos,
    tx: 0,    ty: 0
  };

}
　
例）原点から30度回転する行列
    var matrix = Mtx33Rotate(30);

    
　

　
回転行列 × 行列

回転行列を生成してから、別の行列の前に置いて乗算する関数です。

第01引数にx座標
第02引数に行列
戻り値に行列が返ります。
回転行列を別の行列の前に置いて乗算
function Mtx33RotatePref(rot,m){
  
  var rad = rot * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);
  
  return {
    a :  cos * m.a + sin * m.c,
    b :  cos * m.b + sin * m.d,
    c : -sin * m.a + cos * m.c,
    d : -sin * m.b + cos * m.d,
    tx: m.tx,
    ty: m.ty
  };

}
　
例）[30 度回転する行列] × [(5,5)移動する行列]
    var m1 = Mtx33Translate(20 ,-7);
    var m2 = Mtx33RotatePref(30 ,m1);

    
　

　
行列 × 回転行列

回転行列を生成してから、別の行列の後に置いて乗算する関数です。

第01引数にx座標
第02引数に行列
戻り値に行列が返ります。
回転行列を別の行列の後に置いて乗算
function Mtx33RotatePost(rot,m){
  
  var rad = rot * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);

  return {
    a : m.a  * cos + m.b  * -sin,
    b : m.a  * sin + m.b  *  cos,
    c : m.c  * cos + m.d  * -sin,
    d : m.c  * sin + m.d  *  cos,
    tx: m.tx * cos + m.ty * -sin,
    ty: m.tx * sin + m.ty *  cos
  };
}
　
例）[(5,5)移動する行列] × [30 度回転する行列]
    var m1 = Mtx33Translate(5 ,5);
    var m2 = Mtx33RotatePost(30 ,m1);
　

上に戻る

拡縮行列を作成する

拡縮行列生成

第01引数にx方向の倍率
第02引数にy方向の倍率
戻り値に行列が返ります。
拡縮行列を作成
function Mtx33Scale(x,y){
  return {
    a : x,  b : 0,
    c : 0,  d : y,
    tx: 0,  ty: 0
  };
}
　
例）x方向に 2 倍、y方向に 0.5 倍拡縮する行列
    var matrix = Mtx33Scale(2 ,0.5);
　

　
拡縮行列 × 行列

拡縮行列を生成してから、別の行列の前に置いて乗算する関数です。

第01引数にx方向の倍率
第02引数にy方向の倍率
第03引数に行列
戻り値に行列が返ります。
拡縮行列を別の行列の後に置いて乗算
function Mtx33ScalePref(x,y,m){
  return {
    a : x * m.a,
    b : x * m.b,
    c : y * m.c,
    d : y * m.d,
    tx: m.tx,
    ty: m.ty
  };
}
　
例）[x方向に 2 倍、y方向に 0.5 倍拡縮する行列] × [30 度回転する行列]
    var m1 = Mtx33Rotate(30);
    var m2 = Mtx33ScalePref(2 ,0.5 ,m1);
    
　

　
行列 × 拡縮行列

拡縮行列を生成してから、別の行列の後に置いて乗算する関数です。

第01引数にx方向の倍率
第02引数にy方向の倍率
第03引数に行列
戻り値に行列が返ります。
拡縮行列を別の行列の後に置いて乗算
function Mtx33ScalePost(x,y,m){
  return {
    a : m.a  * x,
    b : m.b  * y,
    c : m.c  * x,
    d : m.d  * y,
    tx: m.tx * x,
    ty: m.ty * y
  };
}
　
例）[30 度回転する行列] × [x方向に 2 倍、y方向に 0.5 倍拡縮する行列]
    var m1 = Mtx33Rotate(30);
    var m2 = Mtx33ScalePost(2 ,0.5 ,m1);
    
　

上に戻る

座標の射影変換

座標の射影変換

第01引数にx座標
第02引数にy座標
第03引数に行列
戻り値にオブジェクト形式の座標が返ります。
２Ｄ座標をマトリックスに射影する
function Vec2dTransformPoint(x,y,m){
  return {
    x : x * m.a + y * m.c + m.tx,
    y : x * m.b + y * m.d + m.ty
  };
}
　
例）座標(10,20)を行列に射影した後の座標を求める
    var m = Mtx33Scale(1,2);       // x方向に1倍、y方向に2倍拡大
    m = Mtx33RotatePost(30,m);     // 30度回転
    m = Mtx33TranslatePost(2,5,m); // x方向に1移動、y方向に2移動

    var pos = Vec2dTransformPoint(10,20,m);
    
　

上に戻る

ベクトルの射影変換

ベクトルの射影変換

第01引数にベクトルのx成分
第02引数にベクトルのy成分
第03引数に行列
戻り値にオブジェクト形式のベクトルが返ります。
２Ｄベクトルをマトリックスに射影する
function Vec2dTransformVector (x,y,m){
  return {
    x : x * m.a + y * m.c,
    y : x * m.b + y * m.d
  };
};
　
例）ベクトル(10,20)を行列に射影した後のベクトルを求める
    var m = Mtx33Scale(1,2);       // x方向に1倍、y方向に2倍拡大
    m = Mtx33RotatePost(30,m);     // 30度回転

    var vec = Vec2dTransformVector(10,20,m);
　

上に戻る

マトリックスの射影変換

行列×行列の計算

第01引数に前に置く行列
第02引数に後に置く行列
戻り値に行列が返ります。

行列同士を乗算する


function Mtx33Transform  (m1,m2){
  return {
    a : m1.a * m2.a + m1.b * m2.c,
    b : m1.a * m2.b + m1.b * m2.d,
    c : m1.c * m2.a + m1.d * m2.c,
    d : m1.c * m2.b + m1.d * m2.d,
    tx: m1.tx * m2.a + m1.ty * m2.c + m2.tx,
    ty: m1.tx * m2.b + m1.ty * m2.d + m2.ty
  };
};

例）行列と行列の乗算



    var m1 = Mtx33Scale(1,2);       // x方向に1倍、y方向に2倍拡大
    var m2 = Mtx33Rotate(30,m);     // 30度回転

    var m3 = Mtx33Transform(m1 ,m2);

上に戻る

正規直交行列の逆行列を作成する

正規直交行列の逆行列を作成する

第01引数に行列
戻り値にオブジェクト形式の逆行列が返ります。
正規直交行列の逆行列を作成する
function Mtx33InvertOrthoNormal (m){
  return {
    a : m.a,
    b : m.c,
    c : m.b,
    d : m.d,
    tx: -m.tx * m.a + -m.ty * m.b,
    ty: -m.tx * m.c + -m.ty * m.d
  };
}
　
例）座標(10,20)を行列に射影した後の座標を求める
    var m1 = Mtx33Rotate(30);     // 30度回転
    var m2 = Mtx33InvertOrthoNormal(m1);
　

上に戻る

逆行列を作成する

逆行列を作成する

第01引数に行列
戻り値にオブジェクト形式の逆行列が返ります。

逆行列を作成する


function Mtx33Invert (m){
  var o = {
    a : 1.0,  b : 0.0,
    c : 0.0,  d : 1.0,
    tx: 0.0,  ty: 0.0
  }

  var _01 = m.b;
  var _11 = m.d;
  var _21 = m.ty;

  if(m.a){
    o.a /= m.a;
    _01 /= m.a;
  }
  _11 -= m.c * _01;
  o.c -= m.c * o.a;
  _21 -= m.tx * _01;
  o.tx -= m.tx * o.a;

  if(_11){
    o.c /= _11;
  }
  o.tx -= _21 * o.c;
  o.a -= _01 * o.c;


  _01 = m.b;
  _11 = m.d;
  _21 = m.ty;
	
  if(m.a){
    o.b /= m.a;
    _01 /= m.a;
  }
  _11 -= m.c * _01;
  o.d -= m.c * o.b;
  _21 -= m.tx * _01;
  o.ty -= m.tx * o.b;

  if(_11){
    o.d /= _11;
  }
  o.ty -= _21 * o.d;
  o.b -= _01 * o.d;

  return o;
}

例）座標(10,20)を行列に射影した後の座標を求める


    var m1 = Mtx33Scale(1,2);        // x方向に1倍、y方向に2倍拡大
    m1 = Mtx33RotatePost(30,m1);     // 30度回転
    m1 = Mtx33TranslatePost(2,5,m1); // x方向に1移動、y方向に2移動

    var m2 = Mtx33Invert(m1);

上に戻る

ソースをダウンロード

- 関数をまとめたソース -

mtx33.as(10kバイト) ActionScript ファイル

上に戻る

前のページに戻る