今回の記事ではJavaScriptだけでマンデルブロ集合を描画してみます。
マンデルブロ集合は、マンデルブロ氏によって提唱されたもので、シンプルな数式から非常に複雑で美しい図形を描画できるので、プログラミングの世界では比較的有名だと思います。
簡単に言ってしまえば、ある規則を満たす複素数の集まりです。
マンデルブロ集合を描画することができれば、いろいろなパターンを見て楽しめるようになります。
この記事がその第一歩になればと思います。
目次
キャンバスを用意する
画家が絵を描くのにキャンバスを必要とするように、私たちプログラマがプログラムで絵を描くときもキャンバスが必要となります。ただし、高価なキャンバスは必要ありません。
ここでは便利なCanvas APIを使うことにします。
まずはJavaScriptを実行してキャンバスを設置するためのHTMLファイルを用意します。
次にサンプルコードを示します。HTMLファイルとして保存して、ブラウザ開いてみましょう。
次のようにブラウザに文字列が表示されるはずです。
これで基本的なセットアップは完了です。
理論を少しだけ
マンデルブロ集合の漸化式は次のように表されます。
Zn+1 = Zn2 + C
Z0 = 0
この式にn=0を入れてみます。
Z1 = C
次ににn=1, n=2を入れてみます。
Z2 = Z12 + C
Z3 = Z22 + C
このように、漸化式からZn+1の値を次々に求めることができます。
nを大きくしていったときに、Znが発散しないという条件を満たす複素数Cがマンデルブロ集合に属するとみなされます。
プログラム上は現実的な範囲で演算をする必要があるため、上記の手順を数十回繰り返して、Zの結果が小さな固定値を超えない場合は複素数Cがマンデルブロ集合に属しているとみなすことにします。
逆に結果が固定値を超えた場合には、複素数が集合に属していないとします。
実装
今回はマンデルブロ集合のフラクタル画像を生成することを目的にしていますので、先ほど作成したキャンバス上のX座標とY座標を複素数の実部と虚部に見立てることにします。
C = X + iY
まずはキャンバスを塗りつぶすだけのプログラムから作成していきます。
23行目の条件文で対象のピクセル塗りつぶすか判定しています。
実際にはbelongsToMandelbrotSet()内でマンデルブロ集合に属しているか判定してbooleanを返しますが、ここではまだ実装せずに固定でtrueを返しています。
このプログラムを実行すると、キャンバス内の全てのピクセルが黒く塗りつぶされるはずです。
次にbelongsToMandelbrotSet()の実装をして、対象のピクセルがマンデルブロ集合に属しているか判定できるようにしましょう。
理論のところで紹介した漸化式と判定を実装していきます。
MAXIMUM_ITERATION_LIMITは漸化式の計算を繰り返す回数、COMPLEX_NUMBER_THRESHOLDはZが小さな値か判定する固定値になります。
このプログラムをブラウザで実行すると、次の画像が得られます。
パラメータ変更の影響を見るために、MAXIMUM_ITERATION_LIMITを5, 10, 20とした3パターンを確認してみました。
LIMIT=5 
LIMIT=10 
LIMIT=20
マンデルブロ集合らしいものが表示されるようになってきました。
しかし、画像が見切れてしまっていることを残念に思うかもしれません。私は何回かの試行錯誤により、magnificationFactor=200, panX=2.5, panY=1.8という組み合わせを見つけました。
このパラメータでの実行結果は次のとおりです。
LIMIT=5 
LIMIT=10 
LIMIT=20
ちょっとした彩りを
モノクロでも美しいものは美しいです。しかし、色をつけることで美しさが増す可能性も秘めています。
今のところ、belongsToMandelbrotSet()では制限値を超えるかの判定のみを行なって、その判定結果をbooleanで返しています。
ここでは制限値を超えた回数でピクセルを塗りつぶす色を決定してみます。
具体的には制限値を超えた回数をMAXIMUM_ITERATION_LIMITで割ってパーセンテージで返すようにします。
この値を使ってピクセルを塗りつぶす色を変化させます。
次に実行結果です。
今までと同じように、MAXIMUM_ITERATION_LIMITを5, 10, 50というように変化させてみています。
LIMIT=5 
LIMIT=10 
LIMIT=50
完成です。
この記事ではここまでとしておきましょう。
まとめ
今回はJavaScriptのみでマンデルブロ集合というフラクタル図形を描画してみました。
基本的な構文だけで簡単にプログラムを作成することができたと思います。
きっとパラメータを変更することでもっと多くの魅力的な図形と出会うことができるはずですので、みなさんも試してみてはいかがでしょうか。
コメントを残す