Canvasによるマンデルブロ描画サンプル

icon 項目のみ表示/展開表示の切り替え

概要

Canvasを使用してマンデルブロを描画してみました。
下図は、複素座標(-1.33,-1)-(1.33,1)の範囲を320*240ピクセルの大きさで最大反復回数64回でJavascriptにより描画しています。
素のCanvasには点を描画する関数が無いので1ピクセルの大きさの四角形で代用しています。
図の下には描画に要した時間が表示されます。
マンデルブロについては、マンデルブロ描画プログラムVersion2.3を参照してください。
四角形の描画方法については、Canvasによる長方形の描画サンプルを参照してください。


以下に環境による実行速度の例を示します。
CPU Windows ブラウザ 実行速度
Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz Windows 10 Edge 44.17763.1.0(64bit) 131ms
Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz Windows 8.1 InternetExplorer 11 11.0.9600.19236 242ms
Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz(OC4.2GHz) Windows 7 InternetExplorer 11 11.0.9600.18638 248ms
Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz(OC4.2GHz) Windows 7 Chrome 58.0.3029.96(64bit) 69ms
Intel(R) Celeron(R) CPU G3900 @ 2.80GHz Windows 10 Edge 25.10586.0.0(64bit) 310ms
Intel(R) Celeron(R) CPU G3900 @ 2.80GHz Windows 10 Chrome 58.0.3029.96(64bit) 70ms
Intel(R) Celeron(R) CPU G3900 @ 2.80GHz Windows 10 Firefox 53.0(32bit) 162ms
Intel(R) Core(TM) M-5Y71 CPU @ 1.20GHz Windows 10 Edge 47.17134.1.0(64bit) 192ms
Intel(R) Core(TM) M-5Y71 CPU @ 1.20GHz Windows 10 Chrome 70.0.3538.77(64bit) 181ms
Intel(R) Atom(TM) CPU Z3775 @ 1.46GHz Windows 10 Edge 42.17134.1.0(32bit) 1043ms

ソースコード

本ページからCanvasによるマンデルブロ描画にかかわる部分のみを抽出したhtmlのソースコードを以下に示します。
htmlのソースコードは本ページの最後のリンクよりダウンロードすることができます。 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 <meta charset="utf-8"/>
 <title>Canvasによるマンデルブロ描画サンプル</title>
</head> 

<body> 

<canvas id="c1" width="320" height="240"></canvas><br />

<script type="text/javascript">

// マンデルブロ描画
function mandelbrot(ctx,wx,wy,amin,bmin,amax,bmax){
  var a,b,c;
  var sx,sy;
  sy=wy-1;
  for(b=bmin;b<bmax;){
    sx=0;
    for(a=amin;a<amax;){
      var x=0;
      var y=0;
      for(c=0;c<64;c++){
        var x2=x*x;
        var y2=y*y;
        var zx=x2-y2-a;
        var zy=2*x*y-b;
        x=zx;
        y=zy;
        if(4<=x2+y2)
          break;
      }
      var r1=(c & 0x3)<<6;
      var g1=(c & 0xc)<<4;
      var b1=(c & 0x30)<<2;
      ctx.fillStyle = 'rgb(' +r1+','+g1+','+b1+ ')';
      ctx.fillRect(sx,sy,1,1);
      a+=(amax-amin)/wx;
      ++sx;
    }
    b+=(bmax-bmin)/wy;
    --sy;
  }
}

window.onload = function(){
  var canvas = document.getElementById('c1');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    mandelbrot(ctx,320,240,-1.33,-1,1.33,1);
  }
}
</script>

</body> 
</html>
ソースファイルのダウンロード(mandelbrot.zip)