Archives for blog ViolentCoding

[Flash]流体っぽいのを作ろうと思った

2008 年 7 月 26 日

流体っぽいのをProcessing.orgのLearingにあるGlen Murphy氏のFluidコードを参考に作ろうと思った。

 

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

 

Related posts

Filed in Flash · 1 Response · Post comment

[word]踊るんだ。踊り続けるんだ。

2008 年 7 月 26 日

踊るんだ。踊り続けるんだ。何故踊るかなんて考えちゃいけない。意味なんてことは考えちゃいけない。意味なんてもともとないんだ。

どれだけ馬鹿馬鹿しく思えても、そんなこと気にしちゃいけない。きちんとステップを踏んで踊り続けるんだよ。そして固まってしまったものを少しずつでもいいからほぐしていくんだよ。まだ手遅れになっていないものもあるはずだ。使えるものは全部使うんだよ。ベストを尽くすんだよ。怖がることは何もない。

それもとびっきり上手く踊るんだ。みんなが感心するくらいに。

だから踊るんだよ。音楽の続く限り

村上春樹　ダンス・ダンス・ダンス（上）

Related posts

Filed in word · No responses · Post comment

[Flash]Flash CS3 変形基準点用の拡張機能を作った

2008 年 5 月 21 日

Flash CS3 でオブジェクトの変形基準点をごにょごにょする拡張機能。「Apply」ボタンで選択中オブジェクトの変形基準点を一括で位置指定する。

オブジェクトの変形基準点を１個１個ダブルクリックしたり、シンボルの基準点を気にしたり、オブジェクトの端に吸着させて・・・の作業をあまり気にせずできるようになります。

TransformationPoint

 

2008/5/23追記：
「変形基準点」のことをヘルプでみたら「変形点」って書いてあった。
そもそも拡張機能の名前が「TransformationPoint」なんだから「変形点」が正しいわ。
でも、自分は「変形の基準点」って認識。

 

 

「CENTER」ではオブジェクトの真ん中を基準に変形基準点の位置を設定します。
( 0, 0 )でど真ん中、( -5, 10 )ならば、ど真ん中から左に5ピクセル、下に10ピクセル移動した位置となります。
TransformationPoint CENTER

 

「LEFT-TOP」はオブジェクトの左上が基準となり、「CENTER」と同じように変形基準点の位置を指定します。
TransformationPoint LEFT-TOP

 

さらに「LEFT-TOP」時の「Ratio」では、オブジェクトのタテヨコに対する比率で変形基準点を指定します。
( 0, 0 )が左上、( 0.5, 0.5 )が真ん中、( 1, 1 )で右下という感じ。
TransformationPoint Ratio

 

「Reset」 ボタンは変形基準点をダブルクリックした時の挙動。MCならばシンボルの基準点に変形基準点が合うやつ。
TransformationPoint Reset

 

そして、お年寄りにも優しくパネルの大きさに合わせて拡大する。
TransformationPoint Big

 

本当は、「選択中の各オブジェクトに対して一括設定する」モードと、「それら全体の選択枠に対して設定する」モードの２種類を切り替えできるようにしたかったけど、JSFLで「fl.getDocumentDOM().setTransformationPoint()」を複数選択状態で呼び出すと、Flashが落ちてしまうのでできなかった。

 

Spark project に入れようと思っているのだが、その準備ができるまではここで。

2008/5/23
Spark Projectにコミットしました。
TransformationPoint - Spark project
http://www.libspark.org/wiki/e_s_jp/TransformationPoint

 

ダウンロード

2008/07/31 : Version 1.1.1に更新

回転と傾斜変形が適用されている場合での変形点の設定バグに対応。
回転角度が-180,-135,-90,-45,0,45,90,135,180度の場合のみ変形点を設定します。

 

TransformationPoint.mxp 1.1.1
http://www.libspark.org/svn/mxp/TransformationPoint/trunk/FlashCS3/mxp/TransformationPoint.mxp
Flash CS3用です。
※インストールにはExtension Managerが必要です。

ソースリポジトリ

TransformationPoint 1.1.1 ソース
http://www.libspark.org/svn/mxp/TransformationPoint/trunk/FlashCS3/src/

利用方法

「ウィンドウ」メニュー ＞ その他のパネル ＞ TransformationPoint

 

一応作った時のも

TransformationPoint 1.0.0
tp_mxp_1_0_0.zip
Flash CS3用です。
※インストールにはExtension Managerが必要です。


TransformationPoint 1.0.0 ソースダウンロード
tp_src_1_0_0.zip

Related posts

Filed in Flash · No responses · Post comment

[Flash]Processingの教材をFlashで（２）

2008 年 4 月 24 日

Processingのソースを参考にして、Flashで作るsketch練習の続き。

 

教材は引き続き、パリで行われたらしい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マウス位置に応じて、枝の角度が変わるようになってる。

TreeFractal_AS3_p5

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の線の長さ分だけ上方向にずらす感じ。

TreeFractal_AS3_01

 

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

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


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

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

TreeFractal_AS3_03

 

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

 

Related posts

Filed in Flash · No responses · Post comment

[Flash]Processingの教材をFlashで

2008 年 4 月 23 日

Processingのソースを参考にして、Flashで作るsketchの練習。

 

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

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

 

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

_04_Points_Proximites

まずは、ダウンロードした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

 

Related posts

Filed in Flash · No responses · Post comment

Pages: Prev 1 2 3 4 5 6 7 8 9 Next