p5.js サンゴ礁

Daniel Shiffmanという方が作成した以下の動画を参考に

サンゴ礁のようなものを作成するプログラムを作ってみました。

作成したといっても、動画で紹介されていたものを少し修正しただけですが。

・参考にした動画

　<https://www.youtube.com/watch?v=Cl_Gjj80gPE&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH&index=38>

出来上がった作品

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

アルゴリズムの説明

上記のようなサンゴ礁が生成される仕組みはいたってシンプルです。

１．キャンバスの中心に点Pを置く（点Pはサンゴ礁のもとになる点）

２．上下左右にたくさんの点を配置する

３．配置した点をランダムウォークさせる

４．ランダムウォーク中の点が中心のサンゴ礁にくっついたら、

　　ランダムウォークをやめて位置を固定し、色付けする

という感じです。

実際には以下のような感じでサンゴ礁が生成されます。

これが初期状態です（説明のため背景色は黒色にしています）。

上下左右にあった点が徐々に中心に近づいていく。

中心のサンゴ礁にくっついたらランダムウォークをやめ、色付けする。

徐々に中心からまわりに伸びていく。

少しずつグラデーションが現れる。

完成

ランダムウォークって面白いですね。