描画
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) 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のソースコードは本ページの最後のリンクよりダウンロードすることができます。