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

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

描画

SVGを使用してマンデルブロを描画してみました。
Canvasで点を描画する場合とSVGで点を描画する場合の比較のために作成したもので実用性はない。
Canvasを使用してマンデルブロを描画してみました。 下図は、複素座標(-1.33,-1)-(1.33,1)の範囲を320*240ピクセルの大きさで最大反復回数64回でJavascriptにより描画しています。 素のSVGには点を描画する関数が無いので1ピクセルの大きさの四角形で代用しています。 320*240ピクセルの点を1ピクセルの大きさの長方形で表現しているので、約77万個のrectエレメントが作成される。
IE11(64bit)で使用メモリーを見たところ82,796kbyteも消費していた。Canvasの場合36,504kbyteである。
右クリックでSVG形式で保存すると6Mbyte近くになる。
24bitカラーで無圧縮の場合320*240*3byte=225kbyteであり、png形式で保存すると約17kbyteとなる。
IEの場合、Canvasに比べて10倍ほどの速度差が発生する。
SVGで描画しているが、点で描画しているので拡大するとCanvasと同じようにギザギザに見える。


CPU Windows ブラウザ 実行速度
Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz Windows 10 Edge 44.17763.1.0(64bit) 994ms
Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz Windows 8.1 InternetExplorer 11 11.0.9600.19236 2827ms
Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz Windows 10 IE 1365ms
Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz Windows 10 Edge 1057ms
Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz Windows 10 Chrome 62.0.3202.94(64bit) 647ms
Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz Windows 10 Edge 1029ms
Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz Windows 10 IE 1414ms
Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz Windows 10 Chrome 563ms
Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz Windows 10 Firefox 293ms
Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz(OC4.2GHz) Windows 7 InternetExplorer 11 11.0.9600.18638 3781ms
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

ソースコード

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

<body>

  <svg id="s1" width="320" height="240"  viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
  </svg>

<script type="text/javascript">

// マンデルブロ描画

function mandelbrot(svg,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;

      var rect1=document.createElementNS('http://www.w3.org/2000/svg','rect');
      rect1.setAttribute('x',sx);
      rect1.setAttribute('y',sy);
      rect1.setAttribute('width',1);
      rect1.setAttribute('height',1);
      rect1.setAttribute('stroke','none');
      rect1.setAttribute('fill','rgb(' +r1+','+g1+','+b1+ ')' );
      svg.appendChild(rect1);
      a+=(amax-amin)/wx;
      ++sx;
    }
    b+=(bmax-bmin)/wy;
    --sy;
  }
}


window.onload = function(){
// ページ読み込み時に実行したい処理
  var start_code=new Date();

  var svg1=document.getElementById('s1');
    mandelbrot(svg1,320,240,-1.33,-1,1.33,1);
  var run_code=new Date()-start_code;   //      実行時間ms単位
  document.getElementById("run_time").innerHTML="実行時間 "+run_code+"ms";
}
</script>

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