[Flex] Tube3D

Tags: ,

ローカルから画像をロードしたらそれっぽく陰影を付けて立体的に見せてくれるアプリケーション。気に入ったタイミングでスナップショットボタンを押せばそのときの状態の画像がローカルマシンに保存されます。タイミング難しいけど。

» Tube3D (要Flash Player 10)

10 月 31, 2008

Comment 

[Flash] スペースチャンネル5 (version)

Tags:

[Flash] スペースチャンネル5 (version)
» [Flash] スペースチャンネル5 (version) (要Flash Player 10)
» source (抜粋)

Flash Player 10の3Dでは陰影を表現する機能がないので、テクスチャにあらかじめ陰影処理を施してそれっぽく見えるようにした。使ったのはSpotlight Pixel Bender Filter | Ryan Phelan。名前の通りスポットライト効果を施すフィルターでなかなか面白い。チェック柄のBitmapDataにスポットライト効果を施しただけで立体的に見えるようになった。残念な点はフィルター設定のパラメータが異常に多いところ。Pixel Bender Toolkitで試行錯誤しても使用用途が不明なものがある。

[Flash] スペースチャンネル5 - boreal-kiss.comのテクスチャクラスにスポットライト効果のShaderFilterを施しただけなので、ソースはShaderFilterに関係する部分だけ抜粋してある。

10 月 30, 2008

Comment 

[Flash] スペースチャンネル5

Tags:

[Flash] スペースチャンネル5
» [Flash] スペースチャンネル5 (SWF) (要Flash Player 10)
» source

Graphics.drawTriangles()とテクスチャマッピングスタディ。元アイデアはFlash 10, Part 4 of testing drawTriangles, Old-school Tunnels « Pixeleroより。簡単に説明すると円錐っぽい形状の多面体の底(とんがりコーンの底)から内側を見ている状態で、多面体の各頂点をxy座標方向に曲線的に動作させつつ内側に貼られたテクスチャのUVT座標を刻々と変化させているだけ。これだけで自分がトンネル内を進んでいるように見えるから驚き。”old-school”と題されているけど古典的な手法なのかな？note.x | [Away3D] Tunnelでも同じようなムービーがある。

flash.geom.Utils3Dクラスを初めて使ったが、これのおかげで3D座標計算部分がソース内に入り乱れなくなったので良い感じ。なお本家のソースは死ぬほど見づらく常人には解読不能なので、スクラッチから書き直した。コメントなどあんまり書いていないけど10倍は読みやすいと自負している。

10 月 28, 2008

3 Comments 

[DesignPatterns] Stateパターンでif文をなくす

Tags: ,

プログラミングテクニックのまとめ - プログラミング日記の「ifをポリモーフィズムによりなくせ」に相当するものをActionScriptで実践した。以下の例では分岐が高々2箇所なのでif文をなくす労力の方が無駄に思えるが、if文やswitch文の分岐箇所が増えるような場合ほど威力を発揮するはず(拡張が容易・メンテナンスが楽などの理由)。

a. if文が必要な場合

例えば線を描画したいとき、描画始点はGraphics.moveTo()、その他はGraphics.lineTo()を使う。そのため以下の例のようにforループでArrayデータの内容を読み込んで折れ線グラフを描画させるルーチン内ではif文を使う必要がある。

package {
    import flash.display.Sprite;
    import flash.display.Shape;

    public class Main extends Sprite{
        private var _drawer:Shape;
        private var _data:Array = [0,10,0,10,0,10,0,10,0,10];//Test data

        public function Main(){
            _drawer = new Shape();
            addChild(_drawer);
            draw();
        }

        private function draw():void{
            _drawer.graphics.lineStyle(1,0x0);
            for (var i:int=0; i<_data.length; i++){
                var x:Number = 20*i;
                var y:Number = 20*_data[i];

                if (i==0){
                    _drawer.graphics.moveTo(x,y);
                }
                else {
                    _drawer.graphics.lineTo(x,y);
                }
            }
        }
    }
}

この分岐処理はGraphics.moveTo()とGraphics.lineTo()という全く別のメソッドを「直接」使うから生じている。つまり、これらメソッドをコントロールする管理クラスを新たに作って、管理クラス経由で「間接」的に扱えば(delegateする、と言う)回避することが可能になるわけだ。具体的にはforループ内ではその管理クラスの単一メソッドのみを呼び出すようにする。

b. if文が不要な場合

以下の例では管理クラスLineDrawer.asを導入して描画させている。線の始点であろうがなかろうが常にLineDrawer.draw()というメソッドを使うので結果if文がなくなっている。

package {
    import flash.display.Sprite;
    import com.borealkiss.controls.LineDrawer;

    public class Main extends Sprite{
        private var _drawer:LineDrawer;
        private var _data:Array = [0,10,0,10,0,10,0,10,0,10];//Test data

        public function Main(){
            _drawer = new LineDrawer();
            addChild(_drawer);
            draw();
        }

        private function draw():void{
            _drawer.graphics.lineStyle(1,0x0);
            for (var i:int=0; i<_data.length; i++){
                var x:Number = 20*i;
                var y:Number = 20*_data[i];
                _drawer.draw(x,y);
            }
        }
    }
}

以下if文がなくなったカラクリ部分について。

b-1. LineDrawer.as (管理クラス)

Main.asから呼ばれるのはLineDrawer.draw()メソッドのみ。ポイントはLineDrawer.draw()内で実際に働く中身の入れ替えを行っているところ。最初にLineDrawer.draw()が呼ばれたときに実際に働くのがプロパティ”_moveToState”にセットされたクラス(MoveToState.as)、それ以降はプロパティ”_lineToState”にセットされた「別」クラス(LineToState.as)で、それぞれdraw()というメソッドを持っているがメソッドの内容は全く別物になっている(b-3, b-4参照)。そしてこの二つのクラスの受け皿に担当するプロパティ”_currentState”はこの両クラスを参照できるようにそれぞれの同一継承元であるクラス型(IState.as)で定義されている。これがポリモーフィズム(クラス型の多様性)。イメージとしてはクラス型を日本人型に設定しておき、東京人型クラスも大阪人型クラスも参照できるような状態。

package com.borealkiss.controls{
    import flash.display.Shape;

    public class LineDrawer extends Shape{
        private var _moveToState:IState;
        private var _lineToState:IState;
        private var _currentState:IState;

        public function LineDrawer(){
            _moveToState = new MoveToState(this);
            _lineToState = new LineToState(this);
            init();
        }

        public function draw(x:Number,y:Number):void{
            _currentState.draw(x,y);
            _currentState = _lineToState;
        }

        public function init():void{
            _currentState = _moveToState;
        }

    }
}

b-2. IState.as (インターフェイス)

LineDrawer.as(管理クラス)内で呼び出されて働かされるクラスMoveToState.asとLineToState.asが継承している親玉クラス。これがあるからポリモーフィズムが可能になる。重要なのはMoveToStateクラスとLineToStateクラスが共通して継承しているクラスが存在していることなので、インターフェイスを使わなくてもアブストラクト的なクラスを作成して代用してもよい(MoveToState extends XXX, LineToState extends XXX, のXXXに相当するクラス)。

package com.borealkiss.controls{
    public interface IState{
        function draw(x:Number,y:Number):void;
    }
}

b-3. MoveToState.as

折れ線グラフの始点描画時点でのみ呼ばれるクラス。MoveToState.draw()はGraphics.moveTo()を実際に行う。

package com.borealkiss.controls{
    public class MoveToState implements IState{
        protected var _drawer:LineDrawer;

        public function MoveToState(drawer:LineDrawer){
            _drawer = drawer;
        }

        public function draw(x:Number,y:Number):void{
            _drawer.graphics.moveTo(x,y);
        }
    }
}

b-4. LineToState.as

折れ線グラフの始点以降で呼ばれるクラス。LineToState.draw()はGraphics.lineTo()を実際に行う。MoveToStateクラスを継承しているので必然的にIStateインターフェースも継承している。

package com.borealkiss.controls{
    public class LineToState extends MoveToState{

        public function LineToState(drawer:LineDrawer){
            super(drawer);
        }

        override public function draw(x:Number,y:Number):void{
            _drawer.graphics.lineTo(x,y);
        }
    }
}

追記 2008/12/17

以下の記事で引用いただいたのですが、プログラミングの思想という点で大変参考になります。extendsとかimplementsが好きな方にオススメ。

あるStateパターンの実装について

10 月 25, 2008

Comment 

[Flash] パワースペクトル

Tags: ,

[Flash] パワースペクトル
» [Flash] パワースペクトル (SWF) (要Flash Player 10、音注意)
» ソースコード

Flash Player 10から音を生成できるようになったのでそのテスト。単周期のサイン波を生成してそのパワースペクトルをSoundMixer.computeSpectrum()で表示。ダイナミックサウンドについては情報がまちまちなので完全には理解できていない。が、Saqoosha.net :: SoundMixer.computeSpectrum の FFT モードの周波数帯に書いてあるように0-11kHzの範囲でスペクトルが表示されているので結果はおかしくない、と思う。スペクトルに幅がでちゃってるのは生成されたサウンドに問題があるのかフーリエ変換の精度に問題あるのか不明。

10 月 24, 2008

Comment 

Next Page →