分123前回の第7回「回り込むカメラの真ん中にオブジェクトを捉える」では,真ん中のオブジェクトが中心となる円周上に,等しい間隔で複数のオブジェクトを並べ,カメラはその外の円軌道から回り込ませた(第7回コード3⁠)⁠。今回は,オブジェクトの位置や大きさをランダムにしてみよう。Matrix3Dクラスで座標を回転するオブジェクトをランダムに変換する前に,第7回コード3で円周上の座標を求めた関数(getPolarPosition())は書き替える。座標の回転や伸縮,さらに移動まで一手に引受けるMatrix3Dクラスを使ってみたい。"matrix"というのは数学の「行列」を意味する(映画を思い浮かべてはいけない⁠)⁠。難しげに聞こえるかもしれないが,つまるところ数値をパラメータで変換する仕組みだ(※1⁠)⁠。CS6のフィルタやカラー調整は,内部的に行列を用いて行われている(図1⁠)⁠。これらの機能は,画像のピクセルごとのカラー値を変換する。CS6の「色相・彩度」フィルタAway3DのMatrix3Dクラスが変換するのは3次元座標だ。パラメータを変えることにより,回転や伸縮,あるいは移動ができる。難しく考えすぎずに,つぎの図2のようなパネルを思い浮かべてもらえばよい。スライダではなく,もちろんJavaScriptコードを書いて変換しなければならない。Matrix3Dクラスは座標を回転・伸縮・移動するMatrix3Dクラスに備わる回転・伸縮・移動の座標変換メソッドは,つぎの表1のとおりだ。円周上の座標を求めるには,回転のappendRotation()メソッドを使う。引数には度数の角度と回転軸を与える。y軸で回したいので,回転軸はVector3D.Y_AXISとする。今のところ前変換(prepend)と後変換(append)が何かは気にしなくてよい(※2⁠)⁠。Matrix3Dクラスに慣れることを心がけよう。z)Matrix3Dクラスで,距離と角度から円周上の座標をどう求めるか。0)をその角度回せばよい。Matrix3Dオブジェクトは変換行列を表し,3次元座標ではない。Matrix3D.transformVector()メソッドに座標のVector3Dオブジェクトを渡せば,変換されたVector3Dオブジェクトが得られる。距離と角度から円周上の座標を返す関数(getPolarPosition())は,以下のようにほぼすべて書き替えた(※3⁠)⁠。matrix.transformVector(vector);}これで,円軌道上に置くオブジェクトは,Matrix3Dオブジェクトの行列変換により位置が決まる。書き替えたスクリプト全体は,つぎのコード1のとおりだ。動きの見た目は第7回コード3と変わらない。matrix.transformVector(vector);}※1行列についてもう少し詳しくは,「⁠行列?なにそれ?おいしいの?」参照。15分間のビデオでもご覧いただける。※2一応説明しておくと,行列による座標変換は掛け算で行われる。実数の乗算と異なり,行列は掛ける順序が変わると答えが違ってしまう(交換法則が成立たない⁠)⁠。これは,フィルタでモザイクを掛けてからぼかすのと,ぼかしてからモザイクを掛けたのでは画像が変わることからもわかるだろう。そこで,掛け算の左右(前後)どちらに置くのか,メソッドが分けて用意されているのだ。※3前回xz平面におけるy軸回りの回転が数学とは反対方向だということで,角度(rotationY)を正負逆にした(再掲第7回図6⁠)⁠。Away3DのMatrix3Dクラスはコンピュータグラフィックス向けにつくられているので,そのような考慮はしなくてよい。