Canvas のピクセル操作 API でフラクタル図形を描く

Pocket

こんにちは、鈴木です。

最近 HTML5 関連の情報を調べているのですが、Canvas は見た目で分かりやすくて楽しいです。

今回は Canvas にフラクタルの定番、マンデルブロー集合とジュリア集合を描いてみたいと思います。

フラクタルを簡単に説明すると、部分を拡大すると全体に似ている(自己相似)などの特徴を持つものです。言葉で説明すると分かりづらいのですが、以下の画像を見て頂けば、フラクタルが持つ不思議な雰囲気を感じて頂けると思います。

マンデルブロー集合ジュリア集合

左がマンデルブロー集合、右がジュリア集合をそれぞれ視覚化したものです。

Google の画像検索で「fractal」をキーワードに検索すると色々な種類のフラクタル画像を見つけることができます。見るだけでも楽しいので、興味のある方は検索してみてください。

Canvas を使う

Canvas は以下のように canvas 要素で定義します。

描画領域の大きさは width と height で指定します。また、Javascript で操作しやすいように "drawable" という id も指定しています。

それではためし描きということで、単純な矩形を描画してみます。

Canvas に描画するには、document.getElementById("drawable") で作成した Canvas を取得し、canvas.getContext("2d") で描画用のコンテキストを取得します。コンテキストには描画用のメソッドがいくつか提供されていますので、それらを用いて好きに描画することができます。ここでは fillStyle に塗りつぶしスタイルを設定後、fillRect() で矩形を描画しています。

上記コードを実行すると、以下のような画像が得られるはずです。

黒

context には他にも多くの機能があります。例えば、グラデーションで描画することや、ベジェ曲線を描くことができます。

ピクセル操作 API

コンテキストが持つ高レベル API は非常に便利ですが、時にはピクセルデータを直接扱いたいこともあります。そのような時のために、ピクセル操作 API というものが用意されています。

以下のように context.getImageData() で取得できる ImageData オブジェクトを通じてピクセルデータにアクセスすることができます。

コード中のコメントにも記述していますが、imageData.data がピクセルデータの配列です。

配列は 4 要素で 1 ピクセル分の情報を持ち、先頭から順に「赤(R)」、「緑(G)」、「青(B)」、「不透明度(A)」、「赤(R)」、「緑(G)」、「青(B)」、「不透明度(A)」、・・・という順番で情報が収められています。つまり、座標が (x, y) の色情報には以下のようにアクセスします。

例として、全ピクセルを赤く塗りつぶすコードは以下のようになります。

実行すると、以下の画像が得られます。
赤

フラクタル画像を描く

さて、ピクセル操作に慣れてきたところで、フラクタル画像を描いてみたいと思います。冒頭でご紹介したマンデルブロー集合とジュリア集合を描きます。

コードが長くなるため、いくつかの関数に分割しました。

drawMandelbrotSet() がマンデルブロー集合を描画するメソッド、drawJuliaSet() がジュリア集合を描画するメソッドです。ジュリア集合を描きたい場合は「// ジュリア集合を描く」の部分のコメントアウトを外します。

実行すると以下のような画像が得られます。

マンデルブロー集合ジュリア集合

ピクセル操作 API は、最初に紹介した fillRect() のような高水準 API と比較すると非常に高速です。今回のように 1 ピクセルごとに計算で色を求めるようなケースでは、ピクセル操作 API がおすすめです。

 

Pocket

Comments are closed, but you can leave a trackback: Trackback URL.