お品書き
• 01 フィルタでカラーを変換する
  
• 02 行列で座標を変換する
• 03 矩形のビットマップを3頂点で変形する
• 04 変換行列を3次元表現に応用する

このレジュメは第20回「Creators MeetUp」のために書いた。当日のUSTREAM録画をつぎに掲げる。

行列(Matrix)は、一定の計算規則にしたがうパラメータ数値(成分)の集まり(正確には、Wikipedia参照)。

01 フィルタでカラーを変換する

行列は、フィルタでおもに内部的に使われる。パラメータの数値やスライドバーが行列成分を変化させる。

図001■Adobe Photoshop CC 2014の[照明効果]フィルタ

Flash(ActionScript)やCreateJSのColorMatrixFilterでは、カラー変換行列により、ピクセルのRGBAカラー値を変えることができる。

図002■ColorMatrixFilterで彩度を変える

*画像クリックでSWFを含むページが開く。

以下は、セピア調のカラー変換行列。詳しくは、MSDN Magazine「Sepia Tone, StringLogicalComparer, and More」(英文)参照。

	0.393	0.769	0.189	0	0
	0.349	0.686	0.168	0	0
	0.272	0.534	0.131	0	0
	0	0	0	1	0

サンプル001■EaselJSでインスタンスにフィルタとマスクをかける

02 行列で座標を変換する

座標を行列で伸縮、回転、移動することができる。2次元平面では3行×3列の正方行列で表される。

	a	c	tx
	b	d	ty
	0	0	1

変換	変換する値	変換行列の値	変換結果
デフォルト	変換なし
平行移動	x座標: tx y座標: ty
拡大・縮小	水平伸縮率: a 垂直伸縮率: b
回転	回転角: θ
傾斜	垂直傾斜率: b 水平傾斜率: c

伸縮・回転・平行移動がすべて変換行列で扱える。さらに、変換を組合わせることもできる。

図003■行列を使った座標変換

*画像クリックでSWFを含むページが開く。

03 矩形のビットマップを3頂点で変形する

矩形のビットマップの3頂点を動かして、自由な平行四辺形に変えられる(アフィン変換)。

サンプル002■EaselJSのMatrix2Dクラスを使ったインスタンスの変形

a: 水平伸縮値 / デフォルトの幅
b: 垂直傾斜値 / デフォルトの幅
c: 水平傾斜値 / デフォルトの高さ
d: 垂直伸縮値 / デフォルトの高さ
t_x: 水平座標値
t_y: 垂直座標値

傾斜率x (c) = 水平傾斜 / デフォルトの高さ = (70 - 20) / 100 = 0.5 傾斜率y (b) = 垂直傾斜 / デフォルトの幅 = (40 - 10) / 100 = 0.3

function transform(point0, point1, point2) {   var myImage = myBitmap.image;   var point1_0_x = point0.x - point1.x;   var point1_0_y = point0.y - point1.y;   var point1_2_x = point2.x - point1.x;   var point1_2_y = point2.y - point1.y;   var matrix = new Matrix2D();   matrix.tx = point1.x;   matrix.ty = point1.y;   matrix.a = point1_0_x / myImage.width;   matrix.b = point1_0_y / myImage.width;   matrix.c = point1_2_x / myImage.height;   matrix.d = point1_2_y / myImage.height;   matrix.decompose(myBitmap);   stage.update(); }

04 変換行列を3次元表現に応用する

変換行列を使って3次元表現に応用できる。ただし、ビットマップの変形ではパースがかけられない。

サンプル003■EaselJSのMatrix2Dクラスを用いた3次元表現

ビットマップの変形ではなく、頂点座標を直に計算して描画すれば、パースもかけられる。詳しくは、Gihyo.jp連載に第20回「立方体のワイヤーフレームを水平に回す」から3回にわたって解説した。

サンプル004■立方体の6面をx軸とy軸で回す

作成者: 野中文雄
作成日: 2014年9月20日