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マウス位置に応じて、枝の角度が変わるようになってる。
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
Related posts
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で作って遊んでみた。
まずは、ダウンロードした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
Flash CS3とFlex Builder 3のヘルプに表示されるヘルプ用HTMLファイルのローカル保存場所をメモ。
Flash CS3
Mac OS X：
Macintosh HD/ライブラリの
Application Support/Adobe/Flash CS3/ja/Configuration/HelpPanel/Help
Windows XP：
C:¥Documents and Settings¥All Usersの
Application Data¥Adobe¥Flash CS3¥ja¥Configuration¥HelpPanel¥Help
ActionScript 3.0 コンポーネントリファレンスガイドなら、
Help/ActionScriptLangRefV3/index.htmlになる。
Flex Builder 3
Flex Builder 3の場合はというと、Flex Builder 3をインストールしたフォルダの「plugins/com.adobe.flexbuilder.helpなんとか」というのがヘルプ用HTMLファイル類。
その中で日本語ヘルプファイルは「com.adobe.flexbuilder.help.nl1_3.0.194161/nl/ja」にある「doc.zip」。
Adobe Flex Builder 3/plugins/com.adobe.flexbuilder.help.nl1_3.0.194161/nl/ja/doc.zip
Adobe Flex 3 リファレンスガイドなら、「doc.zip」を解凍して
doc/langref/index.htmlになる。
Webのリファレンスが使えない時は思い出してあげてください。
まぁ、普通にアプリを立ち上げればそれで済むんだけどね。
Related posts
既に、Pepeさんやnitoyonさんが紹介している「Flex, ActionScript, AIR Posters」をWebで見れるようにしてみました。
Flex Team
Update on Flex, ActionScript, AIR Posters
中垣 茂 （ Shigeru Nakagaki ） | ブログ （ Flex, AIR, ColdFusion ）
AS3, Flex 3, AIR ポスター．．．97メガっすか
てっく煮ブログ
AIR・AS3・Flex3のクラス相関図ポスターが公開中
申し訳ないですが、Silverlightです。
Silverlight 2.0 Betaのプラグインが必要なので見たい人は入れてください。
Microsoft Silverlight: Light Up the Web
http://www.microsoft.com/silverlight/default.aspx
Adobe ActionScript 3.0 Class Diagram Viewer - Silverlight 2.0 Beta
http://violentcoding.com/content/AdobeAS3ClassDiagramViewer/index.html
posters.pdfから1枚7,200×10,800ピクセル（解像度300相当）のPNG画像に書き出し、それら５枚を横に並べています。各画像のサイズは、22.3MB、32.3MB、32.7MB、24.1MB、30.0MBというボリュームです。
SilverlightのDeep Zoomという機能を使って表示してます。
MIX08で紹介されていたHard Rock Cafeのサイトで使っているやつです。
Hard Rock Memorabilia
http://memorabilia.hardrock.com/
マウスドラッグで画像の移動やマウスホイールで拡大縮小ができます。
Deep Zoomでは拡大縮小や移動を行っている最中に、結構な負荷がかかっています・・・。
CPU%で拡大縮小・移動時には80% - 90%位のスコアをたたき出しております。
作りはMSエバンジェリスト 大野さんの完コピです。
develop .net : Silverlight 2 の新機能 - Deep Zoom
http://blogs.msdn.com/mohno/archive/2008/03/12/silverlight-2-deep-zoom.aspx
develop .net : Silverlight 2 の新機能 - Deep Zoom（マウスホイール編）
http://blogs.msdn.com/mohno/archive/2008/03/12/Silverlight-2-Deep-Zoom-with-Mouse-Wheel.aspx
Related posts
前の投稿で、kulerを使ったMacのカラーピッカー「Mondrianum」について書きましたが、では本家Adobeのアプリケーション用kulerパネルはどうなっているか見てみます。
ひとつはオマケみたいなものですが、自分が知っているもので３つ。
まずは、Flash CS3。
Pixelfumes Flash Blogで公開されたFlash CS3で使えるkulerパネル。
カラースキームをクリックすると、新規レイヤーを作成し、各色50×50の四角形をステージに追加してくれます。
Blogで公開していたのだけど、今やAdobeのDeveloper Centerに載っています。
拡張機能を公開しているだけでなく、さらになんと「kulerパネルの作り方」として拡張機能のパッケージを作るところまで、ソースコードを公開してくれています。MXPはもちろん、flaファイルにAS、JSFLとMXIファイルまで超太っ腹です。
Adobe - Developer Center : Creating the kuler panel for Flash CS3 Professional
http://www.adobe.com/devnet/flash/articles/kuler_panel.html
Pixelfumes Flash Blog
http://pixelfumes.blogspot.com/
Pixelfumes Flash Blog: Flash CS3 Kuler Panel Updates
http://pixelfumes.blogspot.com/2007/06/flash-cs3-kuler-panel-updates.html
Pixelfumes - Multimedia Solutions
http://pixelfumes.com/
で、同じくPixelfumes Flash BlogからFireworks用のkulerパネル。
Fireworksでは各色50×50のパスで描かれた四角形を追加してくれます。
Pixelfumes Flash Blog: Adobe Fireworks CS3 Kuler Panel Released
http://pixelfumes.blogspot.com/2007/08/adobe-fireworks-cs3-kuler-panel.html
そしてオマケは英語版Illustrator CS3のみのkulerパネル。
Adobe Labs - kuler
http://labs.adobe.com/technologies/kuler/
kuler_faq.pdfより
Q.Why is the kuler panel only available in the English versions of Illustrator CS3?
A. The inclusion of the kuler panel only in the English releases of Illustrator CS3 matches the languages currently supported by kuler.
kulerのカラースキームをIllustratorで使うには、kulerのサイトにログインして、カラースキームのaseファイルをダウンロードしないとスウォッチとして使えないんですが、kulerパネルから直接カラースキームをカラーグループとしてスウォッチに追加できたりするんですね。
なんで、日本語版のIllustratorにも入れてくれないんですかね・・・
Related posts
