diffusion

2016.11.22

拡散は単体で利用するというより、ランダムで自然な散らばりを演出の一部として取り入れるケースが多いベーシックなロジックです。
今回は「形」と「ルール」を変えて、いくつかのパターンが切り替わるデモを作ってみました。

  • ベーシックな拡散
  • 直線を起点とした拡散
  • ドーナツ状の拡散
  • 半円が放射状に広がる拡散
  • 四角形内に広がる拡散

パーティクルの定義

まずはパーティクルをStarクラスとして定義します。
今回は拡散の種類を一定時間で変えていく形にしたいので、すべてのアニメーションルールをこのクラスに実装していきます。
それぞれのパーティクルは一定時間が経過するまでの間、現在のルールで決定した目標地点まで少しずつ向かっていきます。
一定時間が経過したら次のルールをランダムで決定し、目標地点を更新します。

[star.js]

ベーシックな拡散

画面全体に均一に広がる基本の拡散です。
動きが出るように中心付近から目標地点まで移動させています。

直線を起点とした拡散

仮想的な直線を起点にして、中心から離れるにつれてまばらにします。
今回は仮想的な直線を2次元回転して天の川っぽい感じにしました。

ドーナツ状の拡散

円の淵を起点に散らばらせます。
ランダムに求めた角度の少数点を切ると筋張った表現になります。

半円が放射状に広がる拡散

画面の中央を起点として少しずつ回転させて描いた半円状に拡散させます。

四角形内に広がる拡散

仮想的な四角形の範囲内で拡散させます。

メイン処理の定義

パーティクルの定義ができたら、一定時間ごとに定義した関数を実行すればアニメーションが切り替わります。

[space.js]

パフォーマンス

総当たり系の処理ではないので、かなりの数を取り扱うことができました。
PCで80000個、スマホで5000個くらいは大丈夫そうです。
イベント装置のフロント実装ではopenFrameworksやMaxなどが候補になりますが、条件は限られるものの開発効率を考慮するとjsも有力な選択肢になりそうです。