文字列の円運動3(螺旋の表現)‐Papervision3Dのお勉強(11)‐

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

前回、前々回と文字列の円運動について書きましたが、今回はさらにその応用として、螺旋運動をさせてみます。
つまり、円運動に高さの概念を加えます。

螺旋のパラメータ設定

まず、変数にて螺旋運動の周回数と螺旋の高さを決めておきます。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------38〜39行目-----------
private var spiral_int:int = 3;//螺旋における周回数
private var height_int:int = 600;//螺旋高さ

初期角度の決定

円運動というのは0度〜360度の角度を持ちます。
ただ、今回は角度を0度〜1080度(0〜360×周回数)として扱います。
たとえば、720度という角度は2回転時点、900度という角度は2周半時点を意味します。

初期角度の決定は後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------62行目-----------
degrees_arr.push(i * 360 * spiral_int / text_str.length);//角度を均等に分割

描画処理

現在の角度が上限である1080度に対してどこまで増えているかを元に高さを計算します。
また、1080を達した際には0に戻す式を加えます。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------78行目-----------
text_arr[i].y = -1 * (height_int * degrees_arr[i] / (360 * spiral_int)) + basicy_int;

-----------91行目-----------
degrees_arr[i] %= 360 * spiral_int;

結果

という文字列が螺旋運動します。マウス位置によって全体の角度が変更されます。

ソース

/* * 文字列を文字に切り離しての螺旋運動 * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.Text3D; import org.papervision3d.typography.fonts.HelveticaBold; import flash.events.Event; public class Sample12 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var display:DisplayObject3D; private var degrees_arr:Array = new Array();//角度格納用配列 private var text_arr:Array = new Array();//文字格納配列 private var text_str:String = "SEISYUN-B CREATIVE LIFE RECOMMENDATION "; private var letterformat:Letter3DMaterial; private var basicx_int:int = 0;//基準x座標 private var basicz_int:int = 0;//基準z座標 private var basicy_int:int = 300;//基準y座標 private var radius_int:int = 500;//半径 private var speed_int:int = 3;//毎回の移動角度 private var spiral_int:int = 3;//螺旋における周回数 private var height_int:int = 600;//螺旋高さ //コンストラクタ public function Sample12() { init();//初期化関数開始 } //初期化関数 public function init():void{ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); display = new DisplayObject3D(); //文字の設定　引数は色コード・透過度 letterformat = new Letter3DMaterial(0x0000ff , 0.8); //文字の分解とText3Dインスタンス生成 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat)); degrees_arr.push(i * 360 * spiral_int / text_str.length);//角度を均等に分割 display.addChild(text_arr[i]); } scene.addChild(display); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //各文字の座標及び角度計算と角度の増加 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr[i].x = Math.sin(degrees_arr[i] * Math.PI/180) * radius_int + basicx_int; text_arr[i].z = Math.cos(degrees_arr[i] * Math.PI/180) * radius_int + basicz_int; text_arr[i].y = -1 * (height_int * degrees_arr[i] / (360 * spiral_int)) + basicy_int; //rotationYにおいての文字の反転が行えなかったため、scaleXを角度によって変更することで反転表示に対応 if(degrees_arr[i] % 360 > 90 && degrees_arr[i] % 360 < 270){ text_arr[i].rotationY = degrees_arr[i] + 180; text_arr[i].scaleX = 1; } else{ text_arr[i].rotationY = degrees_arr[i]; text_arr[i].scaleX = -1; } degrees_arr[i] += speed_int; degrees_arr[i] %= 360 * spiral_int; } //円形文字全体の角度変更 //マウスカーソルの位置に合わせて水平方向の角度を変更 //横に回すということはy座標中心に回すということ display.rotationY = ((mouseX / 550) * 180 - 90); //マウスカーソルの位置に合わせて垂直方向の角度を変更 //縦に回すということはx座標中心に回すということ display.rotationX = ((mouseY / 400) * 180 - 90); renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

Papervision3Dについての学習はとりあえずこれで一段落かなと思っています。
次はどうしようかな……。

文字列の円運動2(表示物のネスト)‐Papervision3Dのお勉強(10)‐へ。