pbjファイルをローカルからアップロードすると、PixelBenderのコードを内部に埋め込んだActionScriptのクラスを生成します。pbjファイルがパラメータを含む場合は、各パラメータに対して自動的にgetter/setterも用意します。インプットに対しても自動でgetter/setterを生成します。

このツールの利点としては

• コンパイル時にPixelBenderのコードを含めることができるので、pbjファイルを外部読み込みする必要が無くなる
• pbjファイルにどのようなパラメータやインプットを設定すればいいのか分かる

といったことがあります。wonderflに投稿する際にメインのコードとPixelBenderをひとつのファイルにまとめたり、パラメータやインプットの指定ミスを減らせることができるかと思います。

エンコード/デコード処理はこのようになっています。

//pbjファイル → 埋め込みコード
function encode(bytes:ByteArray):Array {
    var code:Array = new Array();
    bytes.position = 0;
    while (bytes.bytesAvailable) {
        code.push(bytes.readByte());
    }
    return code;
}

encode(loader.data);

//埋め込みコード → Shaderインスタンス
function decode(code:Array):ByteArray {
    var bytes:ByteArray = new ByteArray();
    for (var i:uint = 0, l:uint = code.length; i < l; ++i) {
        bytes.writeByte(code[i]);
    }
    return bytes;
}

var shader:Shader = new Shader( decode(code) );

おまけ
結局使わなかったのですが、このツールを作るにあたりpbjファイルをディスアセンブルするクラスをC++からASに移植しました。
» Pixel Bender .pbj files （C++版のディスアセンブラ）

当初はpbjファイルをディスアセンブルしてパラメータのgetter/setterを自動生成ｓていたのですが、Shaderインスタンスのdataプロパティを列挙すれば必要な情報を取得できることに、移植完了後に気づきました。なのでディスアセンブラはお蔵入りとなってしまったのですが、せっかくなので置いておきます。使い方はクラスファイルの最初のほうを見てください。
» PBJDecoder.as

RunをクリックするとSource Codeに記述したコードが実行され、実行結果がOutputへ出力されます。場合によっては（というかPreset Codeでは Hello, World! 以外全て）入力待ち状態になるのでその際はInputに要求された文字列もしくは数値を入力してSendをクリックします。

Whitespace？なにそれおいしいの？
Whitespaceは簡単なプログラミング言語です。ただし見えないことを除いては。なぜならばWhitespaceのソースコードは半角スペース、タブ、改行のみで構成されているからです。それ以外の文字は全てコメントとして扱われます。

ちなみに、公式サイトに掲載されているHello Worldのソースです。なんだろうこのドヤ感。
» Hello World

スタックマシンとしての動作と文法
Whitespaceは記憶領域としてスタック、ヒープというものを使います。ASで言うならばスタックはArray、ヒープはObjectと言ったところでしょうか。スタックは値を一番上に積み上げるか、一番上から取り出すことしかできませんし、値を見るだけでもいちいち取り出さなければいけません。ヒープは任意のラベル（アドレス）に値を保存したり、保存しておいた値を取り出しすことができます。

//スタックのイメージ
stack.push(value);           //値の積み上げ
var value:int = stack.pop(); //値の取り出し

//ヒープのイメージ
heap[address] = value;         //値の保存
var value:int = heap[address]; //値の取り出し

ソースコードは処理命令の羅列となっているので、Whitespaceはソースコードの最初から順番に処理命令を読み取りながら、スタックとヒープを操作してプログラムを実行していきます。ひとつの処理命令は「IMP + コマンド + パラメータ」のセットになっています。それぞれの役割は次のようになっています。

• IMP ･･･ Instruction Modification Parameterの略で、処理命令の大まかなカテゴリを表します（AS的にはパッケージのようなものです）。
• コマンド ･･･ 処理命令の具体的な種類を表します（AS的にはメソッドのようなものです）。
• パラメータ ･･･ コマンドを実行するための引数です。コマンドによっては無い場合があります。

それぞれの具体的なコードは以下で解説されているので、心の目で見るといいと思います。
» Whitespace基礎文法最速マスター

ソースコード
こちらからダウンロードして自由に使ってください。496行目辺りからインタプリタのクラスが記述してあります。本当は正規表現でスマートにやりたかったんですけど、汚くなっちゃいました。

外部から読み込んだ画像をテクスチャとして球面上にマッピングしています。
パースはつけていません。

一応最適化ということで、頂点をなるべく重複点させないようにしています。ただし画像の端に対応する頂点が反対側の端と（極に関しては隣とも）うまくマージできずにほったらかしなので、頑張ればもうちょっと減らせると思います。

迷ったのが、多数の3次元座標を Matrix3D を使って一括投影するのに、
Utils3D.projectVectorsとMatrix3D.transformVectorsがあるということ。
前者は2次元座標に、後者は3次元座標に投影してくれる。投影後にzバッファしようと思ったら、projectVectorsは第3引数で渡したuvtのうちtに奥行きが入っているのでそれでソートしてやる。transformVectorsなら3次元座標のzを使えばよろし。

今回は球体ということで、z バッファは必要なかったので（視点と逆向きの法線ベクトルを持つポリゴンのみを描画すればよい）、drawTrianglesの第4引数であるcullingの値を適切に設定することでこっち側向いてるポリゴンだけ描画しました。

具体的にはポリゴンを形成する頂点を時計回りで指定して、球体の内側から外側に向かって面の法線ベクトルを伸ばしてます。このときcullingにTriangleCulling.NEGATIVEを設定すれば、あっち側（視点ベクトルと同じ方向）を向いてるポリゴンは描画されないのでいい感じ。球体を内側から見る場合にはTriangleCulling.POSITIVEにする。

話を戻すと、projectVectorsでもtransformVectorsでもどっちでも良かったので、両方やって速い方を使うことにしたのですけど、両者ほとんど差がない。一瞬transformVectorsのが速い気がしたんだけど多分気のせい。

やってる途中でハマったのが、projectVectorsで投影後のuvt値のうち、t値がどうしても全部1になってしまう問題。これはpsyarkさんに教えてもらって理解。多謝。

@alumican_net 全部1になるのは、第一引数のMatrix3DがProjection行ってないからではないかなー [link]

PerspectiveProjection#toMatrix3D使うと計算楽だよ [link]

Projection行ってるかどうかは、Vector3Dを変換してwが大きくなるかで分かります。もしくはMatrix3Dの4列目に0以外があるかどうか（これはあまり自信なし） [link]

普通はrawData[11]が1とかになる。z→wにするために。 [link]

Matrix3DにPerspectiveProjectionを設定しないとダメらしい。並行投影なのでその辺を端折ったのがいけなかったのか。

最後に、drawTrianglesは意外と重い、期待値が高かっただけに拍子抜け。
限定的な使い方に絞って最適化頑張って、やっとPapervision3Dに勝てるくらい。

描画する頂点を全部まとめて毎フレーム1回のdrawTrianglesに押さえてはいますが、それでも結構くる。しかも残念なことに描画頂点数というよりは、むしろ描画領域が速度に大きく影響している。見えてないポリゴンをdrawTrianglesに渡さないとか色々試してみたけど結果はほとんど変わらず（むしろVectorを作り直すのに時間が余計かかったくらい）。結局画質を落とすのが一番パフォーマンスを上げるという結果になって萎え～。

とはいえdrawTrianglesを使えば簡単にかなりトリッキーなことができるので、使いどころを考えればおもしろい表現ができるはず。まだ完全には理解してないので、もっといい最適化手法がありそう。

サンプル
ご覧いただければ何が目的のライブラリなのか、だいたい分かると思います。

ダウンロード
» 通常版はこちら
» BoundaryResizer.asファイルのみ （拡張子をasに変更してください）

使い方
コードはこんな感じで。

var bmp:Bitmap = ...
var target:Rectangle = bmp.bitmapData.rect;
var boundary:Rectangle = new Rectangle(50, 50, 300, 300);
var scaleMode:String = BoundaryResizer.NO_BORDER;
var align:String = BoundaryResizer.TOP_LEFT;
var resized:Rectangle = BoundaryResizer.resize(target, boundary, scaleMode, align);
bmp.x = resized.x;
bmp.y = resized.y;
bmp.width = resized.width;
bmp.height = resized.height;

BoundaryResizer.resizeメソッドの引数はこんな感じで。

• target:Rectangle ･･･ 第1引数。リサイズ対象オブジェクトの矩形を指定します。上の例ではリサイズしたい画像の矩形となります。
• boundary:Rectangle ･･･ 第2引数。リサイズの基準となる矩形を指定します。上の例ではリサイズ後の画像を収める枠となります。
• scaleMode:String（省略可） ･･･第3引数。 リサイズ時のスケールモードを指定します。このパラメータはStageScaleModeと互換性があります。このパラメータを省略した場合はBoundaryResizer.NO_SCALEとなり、リサイズはおこなわれません。
• align:String（省略可） ･･･ 第4引数 。boundaryに対するtargetの基準位置を指定します。このパラメータはStageAlignと互換性があります。このパラメータを省略した場合はBoundaryResizer.CENTERとなり、縦横ともに中央揃えとなります。
• 戻り値:Rectangle ･･･ リサイズ後の矩形が返されます。target及びboundaryは変更しません。

リサイズ方法を操作するscaleModeには以下の定数を指定できます。

// targetとboundaryが完全に一致するようにリサイズされます。多くの場合、targetの縦横比は保たれません。
BoundaryResizer.EXACT_FIT

// targetが縦横比を保ち、かつtargetがboundaryの内側にフィットするようにリサイズされます。targetがトリミングされることはありませんが、上下または左右に隙間ができることがあります。
BoundaryResizer.SHOW_ALL

// targetが縦横比を保ち、かつboundaryがtargetの内側にフィットするようにリサイズされます。targetとboundaryの間に隙間ができることはありませんが、targetがトリミングされることがあります。
BoundaryResizer.NO_BORDER

// リサイズがおこなわれず、alignによる基準点合わせのみがおこなわれます。
BoundaryResizer.NO_SCALE

リサイズ後のオブジェクトの基準点を操作するalignには以下の定数を指定できます。

BoundaryResizer.TOP_LEFT     // x軸方向:左　, y軸方向:上
BoundaryResizer.TOP          // x軸方向:中央, y軸方向:上
BoundaryResizer.TOP_RIGHT    // x軸方向:右　, y軸方向:上
BoundaryResizer.LEFT         // x軸方向:左　, y軸方向:中央
BoundaryResizer.CENTER       // x軸方向:中央, y軸方向:中央
BoundaryResizer.RIGHT        // x軸方向:右　, y軸方向:中央
BoundaryResizer.BOTTOM_LEFT  // x軸方向:左　, y軸方向:下
BoundaryResizer.BOTTOM       // x軸方向:中央, y軸方向:下
BoundaryResizer.BOTTOM_RIGHT // x軸方向:右　, y軸方向:下

追記 09.10.08
・多少最適化しました。以前のバージョンをお使いの方はBoundaryResizer.asを入れ替えて頂ければ大丈夫です。
・wonderflのサンプルを更新しました。

追記 09.10.22
・使い方のサンプルコードに間違いがあったので修正しました。

先月の大阪てら子でSaqooshaさんがつくってたのが素敵だったので、見よう見まねでやってみました。ただやるだけだとつまんないので、RGBのカラーバージョンでアンサンブルしてみました（音の動的生成を使っているのでFlashPlayer10以上じゃないと動きません）。

webカメラ（カメラがない人はサンプルの静止画像）からリアルタイムで読み込んだ画像をRGB分解します。分解されたRGB画像をもとに音を鳴らすおもちゃです。RGBの順にオクターブ単位で音域が低くなっているので、頑張れば3パートでハモれるかも知れません。

いい感じの音を鳴らすために
あの楽器っぽいスクリプト Ver1.2(メニューをつけてみた）
の波形生成アルゴリズムを使わせてもらってます。ありがとうございます。

また、単純にBitmapData.copyChannelやColorMatrixFilterなどでRGB分解すると、例えば白い部分などは全チャネルで反応してしまいます。そこで、人の目が見て赤緑青な部分を直感的にRGB成分として取り出せるように、RGBExtractorというクラスを作りました。

このクラスは入力画像の全ピクセルに以下の処理をおこなうことでRGB各成分を抽出します。ここで、R,G,Bはある座標における入力画像の色、R’,G’,B’は分解後のその座標の色となります(計算上マイナスになった場合は0とします)。
scaleは0以上の任意の実数です。写真などの自然画像にはRGBの純色はまず出てこないので、scaleがある程度高くないとハッキリと検出できませんでした。

R' = scale * ( R - max(G, B) )
G' = scale * ( G - max(B, R) )
B' = scale * ( B - max(R, G) )

この処理は、実際にはフィルタで全ピクセルをバッチ処理しています。RGBExtractorクラスはまだ詰めが甘いので、もう少し精度を上げられるように頑張ってSpark Projectにコミットしておきます。

今回初めてFlashPlayer10の動的音生成を使ってみたのですが、鳴らすだけなら思ってたより簡単でした。それ以上に、音の鳴るものは作っててやっぱり面白くて、音楽ってすごいなあって改めて感じました。幸いにもSpark Projectには音関係の素晴らしいライブラリがたくさんあるので、もっと使わせていただこうと思います。そんな感じです。

前回のエントリに書いたyugop氏の言葉にもろ影響されてますが、美しいものを作りたくなったので、やったった。ActionScript3.0で流体シミュレーション。ついでにサイトトップも更新しました。

実はまともにDisplacementMapFilterを使ったのは初めてでした、うへぁ。流体シミュレーションも初めてだったので色々戸惑ったけど、まあまあおもろいもんが作れた気がするぞ。

どうやってるかというと、基本的なアルゴリズムはblog ViolentCodingさんのを使っていて、それを動画に適用した感じです。で、そのまんまだとマウスを素早く動かすとゼリーみたいにぷるぷるしちゃったので（可愛いけど）、ドロっとするようにアルゴリズムを改造。あとは高速化のためにセルを2次元配列で走査するのではなく、リンクリストを使うように変更しました。他にも色々やった気がするけど、忘れた。

リンクリストってのは、隣のセルを参照として持っておいて、その参照を使って隣へアクセスする方法。配列演算子を使わずに、隣へ隣へとセルの参照をたどることで、まるっとアクセスします。

今回は各セル毎に、forに代わる次セルへの参照と、流体の速度場を更新するための上下左右8方向のセルの参照を持たせました。これがめっぽう速いのなんのなのです。（フレームレートで言うと5フレームくらい違う）

なので、今度から頻繁に配列を回すときはリンクリストを使うようにするとよさげです。ターゲットプレーヤーが10のときにVectorとどっちが速いのか要検証ですが。

あと、この流体表現。
ライブラリは必殺技という精神に基づいて、trick7さんのTeraFireみたいに

alumiFluid(target);

とかで任意のオブジェクトを液状化できると素敵なので現在制作中だったりします。もちろん、汎用流体ライブラリとしても使えるようにするつもりです。需要あるかどうか分からんけど。

wonderflのはソースにコメントを書いてないので、ライブラリ化のときにちゃんとします。少々お待ちを、すみません。

では～。