AS3のパーティクルエンジン Stardustのpapervision3dを使ったサンプル「CollidingCubes」の加工を試してみました。

Stardustに、AS3の3Dライブラリ「Papervision3d」を組み合わせたサンプルを加工してみました。正方形のワイヤーフレームの中を青いキューブがランダムに動作するものです。その外枠の正方形のワイヤーフレームは、マウスの動きで立体的な動きをします。

Papervision3dのライブラリは、SVNでチェックアウトして取得します。

下記より取得しました。
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/

中で動いている青いキューブの表面を変更してみました。アイコンの顔写真を貼り付けてみました。

CubeEmitter.asを少し修正しました。

//必要なライブラリをインポート
import org.papervision3d.materials.BitmapAssetMaterial;

//元々の記載　青いキューブのマテリアルを生成する箇所をコメントアウト
//var mat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff0000, 0x550000);

//アイコンの顔写真をライブラリに取り込み、画像のプロパティを開いて
//「ActionScriptに書き出し」にチェック
//→クラス名を入力。今回は「tMap」としました
//そのｔMapを指定して、表面の画像として設定
var mat:BitmapAssetMaterial = new BitmapAssetMaterial('tMap');

修正したデータがこちらです。
http://www.vivo-win.com/flash_library/stardust/stardust_03/

AS3のパーティクルエンジン Stardustのサンプル 「Sakura」の加工を試してみました。

AS3のパーティクルエンジン　Stardustのサンプル　「Sakura」の加工を試してみました。

AS3のパーティクルエンジン「Stardust 1.3.186」には、沢山のサンプルが付いています。その中に「Sakura」というサンプルがあります。さくらの花びらが舞うものです。マウスカーソルの位置によって、花びらが舞う方向が変化します。

今回は、サンプル内にflaの元データがあるので、それを加工することができるかどうかを試してみます。パブリッシュプレビューをすると、

Vec3D.asの21行目でエラーが出ます。

public function get onChange():ISignal { return _onChange; }
1046: 型が見つからないか、コンパイル時定数ではありません : ISignal。

どうやら下記のファイルが読み込めていないようです。
import idv.cjcat.signals.ISignal;

「Stardust 1.3.186」の中には、該当するファイルはありませんでした。調べると「cjsignals」というものがあり、その中に「ISignal」もありました。

cjsignals
http://code.google.com/p/cjsignals/

「CJSignals 1.0.32」をダウンロードして、PATHの通るところに置けば、エラーは解消できました。

パブリッシュできるようになったので、動作のプログラムはそのままで、見栄えを変更してみました。花びらを羽毛に変えて、背景をせとうち児島ホテルから撮影した瀬戸大橋の画像に替えてみました。

羽毛ベクターデータは、下記より使わせていただきました。

羽毛のベクターデータ ｜ 商用フリーで使える影絵素材サイト シルエットデザイン
http://kage-design.com/wp/?p=949

修正したデータがこちらです。
http://www.vivo-win.com/flash_library/stardust/stardust_02/

ActionScript 3.0 のパーティクルエンジン Stardust (スターダスト)についてチュートリアルを試してみました。

FlashのAS3のパーティクルエンジン Stardust (スターダスト)のチュートリアルの記事がとても分かりやすかったので、試してみました。

Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01
http://clockmaker.jp/blog/2010/01/stardust-01/

チュートリアルの記事では、Flashでの操作フローの説明でしたが、FlashDevelopを使って試してみました。

Main.asがある階層に、Stardust 1.1.161の中の「src」--「idv」フォルダを配置するだけです。チュートリアルに記載されている内容を、Main.asにペーストすれば動作を確認できます。チュートリアルでは、赤い丸い玉が拡散していますが、それを青い四角に変更してみました。

import flash.display.*;
class MyCircle extends Sprite {
  public function MyCircle() {
    graphics.beginFill(0x0033FF); //青色
    graphics.drawRect(0, 0, 20, 20); // 矩形を描く

修正してコンパイルしたデータがこちらです。
http://www.vivo-win.com/flash_library/stardust/stardust_01/

簡単にパーティクルが作れます。カスタマイズできるオプションが沢山ありそうです。

wonderflで使用可能なライブラリの一覧より、Google Maps API for Flashを試してみました。

wonderflでimportすることにより簡単に使用可能なライブラリの一覧
http://wonderfl.net/libraries

には、Google Maps API for Flashも用意されています。

Google Maps API for Flash
http://code.google.com/intl/ja/apis/maps/documentation/flash/

岡山駅を中央に指定したマップの表示をしてみました。

Google Maps API for Flash Example Okayama Station
http://wonderfl.net/c/f99V

wonderflでは、他の人の作ったソースをForkして、簡単に作り変えをすることが出来るので、動く状態から変更をしていって理解が出来るのがとてもいい勉強法になると思います。

湘北短期大学情報メディア学科では、wonderflを使ったグラフィックスプログラミングをされているそうです。自分が変更できるサンプルが沢山ある環境での学習はとても効率がよいと思います。

湘北短期大学　wonderfl校
http://homepage.mac.com/tmotoike/Lectures/GraphicsProgramming/index.html

wonderflでimportすることにより簡単に使用可能なライブラリの一覧より、トィーン系のライブラリから試してみます。

wonderflでimportすることにより簡単に使用可能なライブラリの一覧
http://wonderfl.net/libraries

には、トィーン系のライブラリが複数用意されてあります。

その中から、TweenLiteを試してみます。TweenLiteの使い方は、公式サイトにてInteractive demoがあるので、簡単に分かります。

TweenLite
http://www.greensock.com/tweenlite/

赤いターゲットマークに人が近づいていくアニメーションをTweenLiteを使ってどのように指定するかが分かります。「Easing Function」のプルダウンを選ぶと、ターゲットへの近づき方を選べます。ゆっくりスピードを落としながら近づくとか、ターゲットを一度通りすぎて戻ってくるとか。その動きの指定方法は、その下の「AS3 code」の箇所にコードとして表示されます。

wonderflでのTweenLite Back.easeInOutの指定をしたファイルが下記のものです。動き出す前に、一度バックしてからターゲットへ移動。ターゲットを行き過ぎてから戻ります。

TweenLite_easing_Back_easeInOut
http://wonderfl.net/c/sIvj

Frocessing「電子アートとビジュアルデザインのためのプログラミング言語ProcessingをActionScriptでの実装したもの」を試してみました。

Processingという電子アートとビジュアルデザインのためのプログラミング言語があります。その内容をActionScript言語で実装したFrocessingというActionScriptライブラリがあります。Flashの環境にてProcessingとほぼ同様の開発ができるので楽しいです。

ProcessingのAS版ライブラリ「Frocessing」
http://blog.alt-scape.com/archives/138

に掲載されていたソースファイルを変更しながら中身を確認してみました。カーソルの位置によってランダムに表示される円の大きさが変化するものです。ソースの中で変えたのは色の指定部分だけです。

カーソルが画面内左にあれば、小さな円

真ん中付近にあれば、中くらいの円

右側にあれば、大きな円

出来上がったものがこれです。
 カーソルの位置によってランダムに表示される円の大きさが変化

参考サイト

Processing
http://www.processing.org/

Frocessing
http://www.libspark.org/wiki/nutsu/Frocessing

Frocessingのことを調べていると、ｗｏｎｄｅｒｆｌ　のサイトに沢山の情報があるのが分かりました。ｗｏｎｄｅｒｆｌ自体は、以前より知っていたのですが、使ったことはありませんでした。ｗｏｎｄｅｒｆｌには、Frocessing以外にも主なＡＳライブラリが既に用意されており、本当にブラウザ上だけでＦｌａｓｈの開発が出来ます。

wonderfl build flash online
http://wonderfl.net/

Ｔｗｉｔｅｒのアカウントでログインできたので、まずは、 ＡＳライブラリを一通りみてみます。それだけでも結構時間がかかりそうです。

wonderflでimportすることにより簡単に使用可能なライブラリの一覧
http://wonderfl.net/libraries