はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

Canvas でフラクタル(コッホ曲線、フラクタルツリー)を描く

Canvasフラクタル(コッホ曲線、フラクタルツリー)を描く

Canvas で、フラクタルであるコッホ曲線、フラクタルツリーを描いたのでメモ。

コッホ曲線

コッホ曲線についての解説は、AOJにあります。

コッホ曲線 | アルゴリズムとデータ構造 | Aizu Online Judge

setTimeout() を使って、アニメーションにしています。

サンプル

codepen.io

コード

drawKoch(canvas_id, p1, p2, n, line_config, interval_ms)関数で描画。

  • canvas_id: canvasのid名

  • p1: 始端位置

  • p2: 終端位置

  • n: 何ステップを行うか

  • line_config:

    • color: 色

    • width: 線幅

  • interval_ms: 1ライン描画するのにかける時間

Canvas でコッホ曲線を描く

フラクタルツリー

サンプル

codepen.io

コード

drawFractalTree(canvas_id, pos0, len0, scale, angle_deg, step, line_config, interval_ms ) 関数で描画している。

  • canvas_id: canvasのid名

  • pos0: treeの初期位置

  • scale: 次stepでの長さをスケーリング

  • angle_deg: 次stepで何度で枝分かれするか

  • step: 何step行うか

  • line_config:

    • color: 色

    • width: 線の幅

  • interval_ms: 1ラインを描画する時間[ms]

Canvas でFractal Tree を描く