群れ
何百もの小さな魚が、「はなれる」「そろえる」「あつまる」の3つのルールだけで群れになる。指でなぞると、群れがついてきたり、サッと逃げたり。
- 🐟 60〜500匹
- 🤫 音はほぼなし
- 📱 指でもマウスでも
- 🆓 無料・登録不要
このブラウザはキャンバス描画に対応していません。
最新の Chrome / Safari / Edge でお試しください。
遊び方
- ☝️ 押さえる・なぞる暗い海を押さえている間だけ、指から半径150ピクセル以内の魚が指に引き寄せられます。指を止めると渦、動かすと行列になってついてきます。
- 🔁 集める ⇔ 逃がす「指に集める」ボタンを押すと「指から逃がす」に切り替わり、指の下にぽっかり穴が開くように群れが散ります。
- 🎚 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 画像にして、スマホの共有メニューに渡します。画像の共有に対応していないブラウザでは、ページのリンクを共有またはコピーします。それもできない場合は画像をダウンロードします。
この特集に載っています
最終更新