by Raph Su

クリエイターのNicky Caseさんが、水辺を飛び交うホタルの様子を再現したようなコンテンツ「Fireflies」を作りました。ランダムに光っているのではなく、ちゃんとページ内を飛び交うホタルがそれぞれの個体の体内時計に合わせて一定周期で光っていて、ホタルの数や光る間隔を変更可能。また、「近くのホタルが光ったら体内時計が進む」というオプションもあって、マングローブの樹に密集して光る東南アジアのホタルの様子を再現することもできます。

Fireflies

http://ncase.me/fireflies/



ホタルの近くでクリック操作をするとホタルが光ります。そのままドラッグ操作をしてもホタルは光るので、クリックしたままのカーソルをホタルの周りでうろうろさせると、ホタルは連続でチカチカと光ります。



ホタルはリーダーの合図に合わせて光っているわけではなく、それぞれの体内時計に合わせて一定周期で光っています。Caseさんはこれを、秒針が12時のところに来るたびにホタルが光る、という形で再現しています。



さらに、Caseさんは「Nudge the neighbor」というオプションをつけました。これは、光ったホタルの近くにいたホタルは体内時計が少し進むという仕組み。



つまり、ホタルが密集しているところにいると周囲のホタルが光るごとに体内時計がどんどん進み、次に光るまでの間隔は短くなります。このオプションをONにしてしばらくホタルを見ていると、最初はわりとバラバラに光っていたホタルが、だんだんと集団になっている部分でシンクロしていくのがわかります。



さらにページ下部に進むと、上から「ホタルの数(10〜500)」「時計表示をする(ON/OFF)」「時計の速度(ゆっくり〜速い)」「隣のホタルの影響を受ける(ON/OFF)」「どれぐらい影響を受けるか(わずか〜たくさん)」「隣のホタルとの距離(近い〜遠い)」といったオプションが用意されていて、いろいろな光らせ方ができます。



ちなみに、「時計表示をする」にすると飛んでいるホタルの姿が体内時計表示になるので、「Nudge the neighbor」のオプションをオンにしたときホタルがどれぐらいの影響を受け、どうやってシンクロしていくかの過程がよくわかります。



制作者のNicky Caseさんはクリエイター支援サービス「Patreon」で400名近いパトロンから支援を受けながらこうしたインタラクティブコンテンツなどを制作しています。なお、Firefliesはパブリックドメインにするということで、ソース類がGitHubで公開されています。

GitHub - ncase/fireflies: Fireflies: an example of emergence

https://github.com/ncase/fireflies