分12今回から取り組む新しいお題は,前回予告したつぎのjsdo.itのサンプルだ。ワイヤーフレームで描かれた星形を,3次元空間のy軸で回している。先に申し上げておくと,CreateJSに3次元座標を扱うクラスはない。2次元座標の変換を,3次元の考え方に応用してつくる。3次元空間の扱いには少し説明が要る。そのため,お題は3回くらいをかけて仕上げるつもりだ。このjsdo.itのJavaScriptコードは,もう少し簡略化することになる。星形を頂点座標と直線で描くそういうことで,2次元平面の動かない星形から描いていこう(図1⁠)⁠。平面に星形を描いて終わりなら,EaselJSのGraphicsクラスにその名もGraphics.drawPolyStar()というメソッドがある(⁠「⁠EaselJSで描いた星形を回す」参照⁠)⁠。EaselJSのオブジェクトは3次元空間で回せない。そこでどうするかというと,3次元の頂点座標をオブジェクトでつくり,その回転を計算して描こうというもくろみだ。したがって,ここでは頂点をまずは2次元座標で定め,それらを直線で結んで星形にする。描画の準備から先にしよう。0.7.0の新しいメソッドを使う。script要素には最新版のライブラリを読み込んでおく。src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>body要素に加えたcanvas要素にはid属性("myCanvas")を与え,初めに呼出す関数(initialize())をonload属性で定めておくことはいつもどおりだ。描画はShapeインスタンスに行う。いっても,具体的にはShape.graphicsプロパティで参照するGraphicsオブジェクトに描くので,Shapeインスタンスはステージに置いた後触らない。そのため,変数(drawGraphics)には,Graphicsオブジェクトを直に納めることにする。Shapeインスタンスは別の関数(createGraphics())でつくる。引数に渡したxy座標で位置を定めたら,Stageオブジェクトの表示リストに加える。前述の変数(drawGraphics)に与えるGraphicsオブジェクトを,Shapeインスタンスから取り出して返した。これで,ステージに新たなShapeインスタンスが置かれ,そのGraphicsオブジェクトの参照が変数に得られる。drawShape.graphics;}つぎに,星形の頂点座標をPointオブジェクトでつくり,それらを配列に納める。そのための関数(createStarPoints())をつぎのように定め,3つの引数で星のかたちを決められるようにしよう。3つの引数は,頂点数,および山と谷の半径だ(図2⁠)⁠。頂点は尖った山の数,半径は中心から山の頂点と谷の底までのそれぞれの長さで決める。0)は星の中心にとって,山と谷の点の座標をすべて求めたい。原点から求める点までの長さと,2点を結ぶ直線が正のx軸となす角度からxy座標はつぎのように導ける(第11回「マウスポインタの動きに合わせてインスタンスをランダムに落とす」「⁠インスタンスの動きに水平方向の初速を加える」参照⁠)⁠。sinθ)(⁠再掲)では,新たな関数(createStarPoints())の3つの引数から,星形の山と谷の座標を求めてみよう。この関数は初期化の関数(initialize())で呼出し,戻り値として座標のPointエレメントが納められた配列を受け取って,変数(points)に入れることとする。星形の山と谷の各点と原点を結んだ中心角はすべて等しい。その角度(theta)は,引数の山の頂点数(numVertices)の2倍で1周の角度2π(360度)を割れば導ける。座標は星形のてっぺん,つまり12時方向の山の点からとる。その角度(angle)は-π/2(-90度)だ。そのうえで,角度(angle)はforループで増やしつつ,山と谷の点の座標を交互にPointオブジェクトにして配列(starPoints)に納める。すべての座標が求められたら,その配列を返せばよい。starPoints;}後は,配列(points)から座標を取出して,すべて直線で結ぶだけだ。その関数(draw())も新たに定めて,初期化の関数から呼出す。引数はPointエレメントが納められた配列とする。Graphicsオブジェクトは変数(drawGraphics)にとってあるので,そこに直線で星形を描く。線描の関数(draw())はGraphicsクラスのメソッドにより,Graphics.beginStroke()で線の色("mediumblue"⁠)⁠,Graphics.setStrokeStyle()はその太さ(3)を定める。Graphics.moveTo()が描き始めの座標を決めたら,forループで引数の配列から取り出したPointオブジェクトの座標を順にGraphics.lineTo()メソッドによって結べば星形が描かれる。stage.update();}さて,上記コードで直線を描くforループの組立てにひとつ工夫がある。配列の始めのPointエレメントから描き始めるなら,その座標をGraphics.moveTo()メソッドで起点に定める。なると,最後のエレメントの座標までGraphics.lineTo()メソッドで直線を結んだ後,改めて起点まで戻って直線を描かないと一周しない。すると,forループでは初めのPointエレメントから順に直線が描かれ,起点とした最後の座標まで結んだところで星はでき上がる。ひとつ補っておきたいのは,星形を描く前にGraphics.clear()メソッドを呼び出していることだ。まっさらなGraphicsオブジェクトには消す描画などない。この後,星形をアニメーションさせるつもりだ。そのため,このメソッドの呼出しをすでに加えておいた。ここまでをまとめたのがつぎのコード1だ。ステージの真ん中に5頂点の星形が直線で描かれる(前掲図1参照⁠)⁠。単純な線描とはいえ,座標から計算してつくった。したがって,考え方は3次元の描画にも応用できる。