nodegarden

2016.11.22

プログラミングの練習でもよく用いられる、ノードガーデンを作成しました。

基本的なノードガーデンの仕組みに関しては、こちらを参考にさせていただきました。
もし実際に案件でこの表現を使用するとなると、完全にランダムで動きまわるよりは、ある程度の形を保って動いた方が使い勝手が良さそうなので、今回は少しだけ動きにルールを持たせることにしました。

目標とする形

下記の図のように、エリアを3つに分け、それぞれのエリア内でノードが動いている形を目指します。

node

基本的には①と②のエリアにノードが多く溜まるように設定し、中央を開けるようにします。
③のエリアは全体を包括するエリアで、①と②のエリア以外にも、全体を漂うノードをいくつか用意することで、ざっくりと三角形の形を表現しつつ、ノードが偏りすぎないようにします。

ノードの定義

まずは位置や速度を管理するノードのクラスを定義します。

1. クラスの作成

「エリアの指定」という引数を設け、作成するノードの配置先を文字列で受け取るようにしています。
今回は、上に記載した図でいう①をleft、②をright、③をcenterとしました。

 

2. 細かな設定

left、right、centerという3つの配置先のエリア名を受け取り、switchで設定を切り替えるようにします。
leftの場合は、作成するエリアは三角形の形になっているので、60°の角を持つ直角三角形と仮定し、現在のx座標を元にy座標の最大値(三角形の範囲を超えない位置)を決定させます。
x座標の最大値から現在のx座標をマイナスし、タンジェント60度の比率1.732をかけることで、y座標の最大値が決まります。
決定したy座標の最大値よりもyの値が超えてしまった場合は、x、yともに方向転換を行い、またノードがエリア内に戻っていくように設定します。

 

rightの場合もやることはほぼ同じですが、x座標の向かう方向や、y座標の最大値の求め方は異なります。

 

centerの場合は、y座標の最大値は単純に画面サイズと同じですので、画面の領域内をはみ出ないようにだけ設定します。

コンテナの定義

ノードの定義ができたら、次はノードを包括するコンテナの定義をします。
エリアごとに必要な数だけノードのインスタンスを作成していきます。

 

ループで回して、各々のノードを動かし、描画を行います。

 

ソースコードの全文はこちらです。

[node.js]

 

[nodegarden.js]

まとめ

大量のノードの操作をfor文で回しているため、ノードの数が多ければ多いほど、パフォーマンスは下がってしまいます。
数は減らし、閾値を長くするなどで、画面がほどよく埋まる、且つ、パフォーマンスも許せるようなラインを探る必要があるようです。
エリアを区切ってノードを動かすことによって、動き自体はちょっと面白いものになったので、パフォーマンスを調整して、どこかで使用できたら良いなと思います。