p5.js シェルピンスキーのギャスケット

今日は「シェルピンスキーのギャスケット」を紹介します。

「シェルピンスキーのギャスケット」とは、以下のような三角形のことをいいます。

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

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

editor.p5js.org

アルゴリズムは以下のような感じです。

1. 正三角形の頂点を用意する（頂点をそれぞれV1,V2,V3とする）
2. キャンバス中の点からランダムに1つの点を選ぶ（選んだ点をPとする）
3. 正三角形の頂点からランダムに1つの点を選ぶ（選んだ点をVnとする）
4. 点Pと点Vnの中点をMとする
5. 点Mを描画する
6. 点Mを点Pと見なして、手順3に戻る

この手順を繰り返すと「シェルピンスキーのギャスケット」が現れてきます。

ソースコード中の変数speedは、描画速度を早くするための変数です。

draw()関数が1回呼び出されるごとに、点Mを100個描画するようにしています。

単純なアルゴリズムからこのような図形が現れてくるのは何とも神秘的ですね。