ProcessingからBetaが取れて、1.0になってた！

ダウンロードしてみたら、アイコンも変わってた！

Processing 1.0
http://processing.org/

ツールバーもスケッチのとこにきたりしてる。

で、えいっ！とコード書いてみた。

サンプル
http://violentcoding.com/experiment/processing/botanicCurve/index.html

「Visualizing Data」の日本語訳もでるし、これからちゃんとやろうと思います。

Book:ビジュアライジング・データ
http://www.oreilly.co.jp/books/9784873113784/

下のサンプルでどんな DisplacementMapFilter で流体っぽい動きになってるか試しみて、ソースを見た方がわかると思います。

_canvasBmpData = new BitmapData(MAP_WIDTH, MAP_HEIGHT, false, 0x000000);
var canvasBmp : Bitmap = new Bitmap(_canvasBmpData);
canvasBmp.filters = [new BlurFilter(4, 4, 1)];

_displaceMapFilter = new DisplacementMapFilter();
_displaceMapFilter.mapBitmap = _mapBmpData;

ドラッグすると FluidMap クラスで計算した結果を _fluidBmp として、DisplacementMapFilter の mapBitmap である _mapBmpData に draw() する。

// FluidMap : update
fluidMapBmpData = _fluidMap.updateMap();
_fluidBmp.bitmapData = fluidMapBmpData;

// update _mapBmpData
_mapBmpData.draw(_fluidBmp, _fluidBmp.transform.matrix);

DisplacementMapFilter の内容が変わったので _canvasBmpData に DisplacementMapFilter を繰り返し適用してやることで、描画が変化しつづける。（ことをEnterFrameでやってる。）

//updateDisplaceMapFilter(_canvasBmpData, _displaceMapFilter);で以下の処理
var sourceRect : Rectangle = _canvasBmpData.rect;
var destPoint : Point = new Point(sourceRect.left, sourceRect.top);
_canvasBmpData.applyFilter(_canvasBmpData, sourceRect, destPoint, _displaceMapFilter);

FluidMap では縦横サイズとグリッドのサイズを指定して、各グリッドのFluid計算用のデータ FluidMapDataを2次元配列に格納する。

例えば、300×300でグリッドのサイズを「10」としたら、30×30＝900の各グリッドに対して、Fluidの計算をしてるわけ。仮にグリッド無しでsetPixelしようとすると90000の処理になっっちゃう。

さらにその各グリッドの持つのXY方向のベクトル値を算出するために、隣接する６個のグリッドの値を使うのだけど、その取得にはまたその2次元配列を使うことになるわけで・・・。

その計算をEnterFrameで行っているわけだから、処理も遅くなる。

Fluidの計算自体は Glen Murphy氏のFluidコードのほぼそのまま。超省略な画像を置いておくので、これ見ながらソースを見た方が早いと思います。

必要なのはX方向とY方向の移動量（xVelとyVel）。それをDisplacementMapの色設定に使って、グリッドのサイズでマップ用のBitmapDataを作ってあげる。（色のFadeOutは強制的に色の値を変えちゃってるけど）

CalcPressure.as の「0.20」のところをGlen Murphy氏のFluidコードの通りに「0.25」にしてやると、波紋？な揺れが際立つよ。

ソースは前回と同じ。

ソース1：FluidSample.zip
ソース2：FluidSample_param.zip

Fluid \ Learning \ Processing 1.0 (BETA)
http://processing.org/learning/topics/fluid.html

Glen Murphy氏のコードはbodytag.orgの「FLUID3」とか、Glen Murphy氏のページにもあるやつ。

Glen Murphy氏のページのほうでは「Fluid3」のリンク先が「Smoke2」と入れ替わっちゃたりしていますけど。

このProcessingのコードをほぼそのままASでやっているサンプルはPapervison3Dに関わってるRalph Hauwert氏のところでダウンロードできて試せます。

若干コンパイルエラーがでますけど（voidがVoidだったりとか）、それを解消していけばすぐ動きました。

Fluid Dynamics : AS3 Source Code.
http://www.unitzeroone.com/blog/2005/10/25/fluid-dynamics-as3-source-code/

最初は、正統に流体シミュレーションを調べてからなんてちょっと思ったけど、ナビエ-ストークス方程式を理解して・・・なんて、数学のミレニアム懸賞問題とか理解できるわけありません。

高卒と同時に数学なんて忘れちゃって、四則演算以外の数学記号を見るだけでも嫌なのに。

Fluid Simulation for Computer Animation
http://www.cs.ubc.ca/~rbridson/fluidsimulation/

ということで、Glen Murphy氏のProcessingコードをベースにDisplacementMapFilterを使う方法でやってみたのがこれ。

一度クリックしてからドラッグするとFluidっぽい動きします。そして今回も例によって負荷高めなのです。一度始めると止める事はしません。ソースを置いとくので、ダウンロードしてから試した方が無難です。

それと、Macの場合はFlashPlayer 10で見た方が良いはずです。FlashPlayer 9で作っていますが、FlashPlayer 10では描画速度が速くなってるし（Windows環境と比べてまともになった感じ）。

内容の解説は[Flash]流体っぽいのを作ろうと思った（２）で。ソースは置いとく。

ソース1：FluidSample.zip
ソース2：FluidSample_param.zip

教材は引き続き、パリで行われたらしいProcessing workshopのソース。
ダウンロードしたProcessingのソース「01_Classes」＞「_08_Arbre_Fractale」をFlashにした。

Processing workshop in Paris – code sources | v3ga
http://v3ga.net/blog/2008/04/processing-workshop-in-paris-code-sources/

再帰でフラクタルを描くやつ。画面のXマウス位置に応じて、枝の角度が変わるようになってる。

Flashで作ったけど機能としてはProcessingと同じようにできた。
Processingのやつは再帰的に線を描画していく中で、描画に対する指定が加算されていくから、特別に座標や角度の計算を気にする必要は無い。

void dessine(float x, float y, float angle) {
 	pushMatrix();
 	translate(x,y,0);

 	rotate(angle);
 	line(0,0,0,-longueur);

 	dessineFilles(float(mouseX)/float(width)*PI/5);
 	popMatrix();
}

それを、まぁFlashならではということで、それぞれの線はまっすぐ上向きで同じだけど、Spriteの入れ子入れ子で回転角度が加算されているような構造にしてみた。Spriteの配置位置は(0,0)から親Spriteの線の長さ分だけ上方向にずらす感じ。

EnterFrameMouseMoveでmouseXを取って角度が変わるけど、線の描画を毎度行ってるのではなく各Spriteの角度を変化させてる。このTree型のフラクタルの枝の角度が変わるのが楽しかったので、パラメータをいじれるようにしてみた。

今回も負荷は高め。そしてコンテンツ開始と同時に再帰再帰でフラクタルを描くから、環境によっては１５秒ルールで厳しいかも。

private function draw( lineAngle:Number ) : void {
 	rotation = lineAngle;
 	//scaleX = lineAngle / 180 * 2;
 	drawChildren( lineAngle );
}

なんか回転だけじゃなく、適当にsacleXとかやってみたりしたら、全く予想もしない図柄になってしまった。

ソース：TreeFractal_AS3.zip
ソース：TreeFractal_AS3param.zip

今回の教材は、パリで行われたらしいProcessing workshopのソース。

Processing workshop in Paris – code sources | v3ga
http://v3ga.net/blog/2008/04/processing-workshop-in-paris-code-sources/

その中から、いくつかをFlashで作って遊んでみた。

まずは、ダウンロードしたProcessingのソース「01_Classes」＞「_04_Points_Proximites」で動作を確認。
ドラッグすると、赤い円が描画され、画面の端で跳ね返りながら、円同士が近づくと、線で繋がれる。

さすが、パリでのworkshopということだけあって、コメントや変数名がフランス語。それを英語に変換しつつ、AS 3.0 用に直したりして、Flashにソースを移植。

で、Flashで作ったのがこれ。ドラッグじゃなくて、マウスダウンで描画する。
円の数が増えると大変なことになるので無理をしないことをおすすめ。

Processingでは毎フレームdrawで背景ベタ塗りと円と線を描いているのだけど、このFlashではShapeの座標を移動させる方法でやってみた。

Flashでも線は毎フレーム描画。Processingのと同じように配列for文の入れ子で全ての円に対し距離判定して、線を描いているけど、やっぱきびしい。

それにProcessingのやつでは「F」キーで円の移動残像モードとかやってるけど、毎フレーム半透明の塗りで全面を覆っていくとかFlashじゃ「もういや！」って感じでやってない。

ソース：PointsProximities_AS3.zip

all manner of distractions » Blog Archive » Supernova
http://www.flight404.com/blog/?p=60

新星、超新星のように最後にまとまっていく様が見事。感心すらする。

Nova (audio by Helios) from flight404 on Vimeo

all manner of distractions
http://www.flight404.com/blog/

iTunesのヴィジュアライザ「magnetosphere」も貼っておかないと。
barbarian software | magnetosphere
http://software.barbariangroup.com/magnetosphere/