LoginSignup
256
176

More than 3 years have passed since last update.

canvas上で群れを表現

Last updated at Posted at 2019-10-07

前置き

プログラミング初心者のため、見苦しいコードが多いです。プログラムを組んで何か作るの好きです!

※ 2020/10/30追記
Pythonでボイドを利用したゲームを作ってみたので良かったら見てください。

生き物に関するプログラミングがしたい!

01.jpg

小さいころから生き物が好きだった。プログラミングで生物の行動シュミレーションなど出来たら面白そうだ。
調べたらボイドというアルゴリズムを見つけた。

ボイドって?

img_0.jpg

ボイド(Boids)は、アメリカのアニメーション・プログラマ、クレイグ・レイノルズが考案・作製した人工生命シミュレーションプログラムである。名称は「鳥もどき(bird-oid)」から取られている。

wikipediaからの引用。コンピュータ上に鳥オブジェクトを作成し、それに対して以下の3つのルールを作用させるだけで、鳥の群れを再現出来るというアルゴリズムのようだ。

1.結合(Cohesion)

cohesion.png

群れの個体の全ての座標からそれらの中心位置を求め、個体全てがそこへ向かうようにする。

2.分離(Separation)

separation.png

個体同士がある一定の距離を常に取るようにする。

3.整列(Alignment)

alignment.png

群れの個体全ての速度ベクトルを群れの速度ベクトルに合わせる

流行りのHTML5 + Javascriptで実装

今更だけどHTML5ってすごい!

a.gif

canvasの登場で本当に便利になりましたね。
一回だけFlashコンテンツ作ったことがあったけれども、今では全く見られなくなりましたね。おも〇ろムービーズなつかしい。ウォーリーをさがさないでなど好きでした。

参考サイト

前にチョロッとjsを触ったことがあるんですが、調べてみると色々変わったらしいので

こちらの記事を参考にさせて頂きました。

鳥ではなくボールで

鳥オブジェクトをcanvas上に描くことも考えたのですが、まずは慣れてからにしようと思って、今回はボールオブジェクトにしました。また今度、鳥オブジェクトを作ってみたいなと思います。

See the Pen BallBoids by hoihoi (@lizard_nest) on CodePen.

色々な動き

ボイドは上記の通り結合、分離、整列の3つのルールを適用することで鳥の群れの様な動きを得ることが出来ました。しかし、ルールを減らしてみても、面白い動きを得ることが出来ました。試しに以下の場合のように減らしてみます。

- 結合 分離 整列
場合① × ×
場合② ×
場合③ × ×
場合④ ×

場合①(結合)

sepaonly.gif
分離と整列のルールを無くすと、ボールは群れの中心にのみ向かいます。
そのため、群れ全体が近づいてきてしまうと、群れの中心も一定になってきてしまうため、時間がたつと塊のようになってしまいますね。何故かDS版どうぶつの森のハチを思い出しました。

場合②(結合、分離)

sepacohe.gif
これは一見3つのルールを適用したボイドと似ていますが、整列していない所為で群れ全体にまとまりがないですね。群れの外側の個体を見ると違いが分かりやすいです。

場合③(分離)

sepaonlygati.gif
分離ルールは言ってしまえば、ボールとボールの当たり判定と同じ意味のため、ただボールが他のボールとぶつかったら反射するという動きを繰り返していますね。もはや、群れを形成出来ていないです。

場合④(分離、整列)

aligncohe.gif
群れ全体が外枠である正方形型になっていますね。整列のおかげで群れ全体の速度ベクトルは合わせられているので、群れとしての形は成しています。外枠が円とかだったら円形の群れを形成するのかな?

最後に

ボイドはゲームなどでも群れを再現するために使われていたりするそうです。そのぐらい現実の鳥の群れの動きに近いのでしょうね。
駄文ですが、読んで頂きありがとうございました。

256
176
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
256
176