群れのアイコン
エンタメ

群れ

何百もの小さな魚が、「はなれる」「そろえる」「あつまる」の3つのルールだけで群れになる。指でなぞると、群れがついてきたり、サッと逃げたり。

遊び方

  1. ☝️ 押さえる・なぞる暗い海を押さえている間だけ、指から半径150ピクセル以内の魚が指に引き寄せられます。指を止めると渦、動かすと行列になってついてきます。
  2. 🔁 集める ⇔ 逃がす「指に集める」ボタンを押すと「指から逃がす」に切り替わり、指の下にぽっかり穴が開くように群れが散ります。
  3. 🎚 2本のスライダー「数」で60〜500匹、「群れの強さ」でまとまり具合を変えられます。動かした瞬間から泳ぎ方が変わります。

🔄 リセットで群れを放し直し、「この群れをシェア」で今の画面を画像にして送れます。

群れの3つのルール

魚1匹1匹が守っているのは、この3つだけです。どれも「半径38ピクセル以内の仲間」しか見ていません。リーダーも、群れ全体の形を決める指示もありません。

  • はなれる分離

    17ピクセルより近い仲間からは離れる。3つの中でいちばん強いルールで、群れが一点に潰れるのを防ぎます。

  • そろえる整列

    近くの仲間の泳ぐ向きの平均に、自分の向きを寄せる。群れが同じ方向へ流れるのはこのルールのおかげです。

  • あつまる結合

    近くの仲間の真ん中へ寄っていく。はぐれた魚が群れに戻ってくるのはこのルールです。

つくりの話

「ボイド」という古典

この群れは、コンピュータグラフィックスの世界で「ボイド(boids)」と呼ばれる考え方をそのまま使っています。1986年にクレイグ・レイノルズが考案したもので、上の3つのルールを全員が同時に守るだけで、鳥の群れや魚群に見える動きが勝手に生まれます。誰も全体を見ていないのに全体がまとまる。このおもちゃの見どころは、絵の美しさよりその不思議さのほうです。

「群れの強さ」は2つのルールにだけ効く

スライダーが動かしているのは「そろえる」と「あつまる」の強さです。「はなれる」は固定で、いつも3つの中でいちばん強くしてあります。そうしないと、群れの強さを100にしたとき魚が一か所に吸い込まれて、ただの光の点になってしまうからです。

逆に0にしても、2つのルールは少しだけ残しています。完全に消すと魚はばらばらに泳ぐだけになり、0から少し上げたときに小さな群れがぽつぽつ生まれる、いちばん面白い変化が見えなくなります。

急ハンドルを切らない

魚が向きを変える力には上限をつけています。目標の向きへ一気に曲がるのではなく、毎コマ少しずつ寄せていくので、群れ全体がゆるやかに弧を描いて旋回します。また、泳ぐ速さには下限があって、どの魚も止まることがありません。

指に集まる魚が渦を巻くのは、この2つのせいです。指めがけて寄ってきても止まれず、急にも曲がれないので、行き過ぎては戻り、指のまわりを回り続けます。渦を描くプログラムはどこにも書いていません。

指の引力も、指の真下で無限に強くならないように計算しています。近いほど強いけれど上限があり、150ピクセルの縁でなめらかにゼロになります。

近所だけを調べる

魚は自分の近くの仲間しか見ませんが、「近くにいるのは誰か」を毎回全員と比べて探すと、500匹ではひとコマに約25万組の距離計算が必要になります。そこで画面を38ピクセル角のマス目に区切り、自分のマスとまわり8マスにいる魚だけを調べています。マスの一辺を見える範囲と同じ長さにしてあるので、これで見落としは出ません。

端のない海

画面の右端から出た魚は左端から、上から出た魚は下から戻ってきます。仲間探しも端をまたいでつながっているので、群れが画面の端を越えても、ちぎれずに一つの群れのまま泳ぎ続けます。

ここには落とし穴がありました。群れが端をまたいでいるとき、仲間の「位置の平均」をそのまま取ると、右端と左端の真ん中、つまり画面の中央が群れの中心だと計算されてしまいます。そこで位置ではなく「自分から見て仲間がどちらにどれだけ離れているか」を、端を越える近道で測って平均しています。

色は泳ぐ向き

魚の色は、泳いでいる向きで決まります。同じ方向へ泳ぐ魚は同じ色になるので、まとまった群れは一色に見え、群れが旋回すると色が波のように移り変わります。速く泳ぐ魚ほど明るく光ります。

画面はコマごとに完全には消さず、少しずつ暗く塗り重ねています。そのため魚の通り道が淡い光の尾になって残り、重なった魚は明るさが足し合わされて、群れの密なところほど輝きます。指を押さえている間は、集めるモードなら暖色、逃がすモードなら寒色の光が指の下に灯ります。

楽しみ方

  • 指を止めて渦をつくる:押さえたまま動かさずに待つと、群れが指のまわりを回る渦に育ちます。
  • 捕食者ごっこ:「指から逃がす」にして群れの中に指を突っ込むと、群れが割れて、通り過ぎたあとにまた合流します。
  • 群れの強さを0と100で比べる:0ではばらばらの小魚、100では大きな一つの群れ。少しずつ上げていくと、群れが生まれる境目が見えます。
  • 自由研究の題材に:3つのルールだけで群れができることを、条件を変えたスクショで並べると、そのまま観察記録になります。
  • ただ眺める:何も触らなくても群れは泳ぎ続けます。寝る前の水槽がわりにどうぞ。

よくある質問

最初の魚の数はどう決まりますか?

画面の広さに合わせて自動で決めています。スマホのような狭い画面では最大240匹、広い画面では最大460匹です。「数」スライダーで動かすと、その値が次からの初期値になります。

設定は保存されますか? データは送られますか?

「数」「群れの強さ」「集める/逃がす」の3つだけを、お使いのブラウザの中に保存しています。サーバーには何も送りません。

魚の動きがゆっくりです

端末で「視差効果を減らす(動きを減らす)」設定がオンだと、目に優しいように泳ぐ速さを半分ほどに落としています。

「この群れをシェア」で何が送られますか?

今の画面を PNG 画像にして、スマホの共有メニューに渡します。画像の共有に対応していないブラウザでは、ページのリンクを共有またはコピーします。それもできない場合は画像をダウンロードします。

この特集に載っています

最終更新

この気分のトイ

もっと遊ぶ

このアプリの気分アート・クラフト没入・ふしぎ