Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く
Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く
Canvas で、フラクタルであるコッホ曲線、フラクタルツリーを描いたのでメモ。
コッホ曲線
コッホ曲線についての解説は、AOJにあります。
コッホ曲線 | アルゴリズムとデータ構造 | Aizu Online Judge
setTimeout() を使って、アニメーションにしています。
サンプル
コード
drawKoch(canvas_id, p1, p2, n, line_config, interval_ms)関数で描画。
-
p1: 始端位置
-
p2: 終端位置
-
n: 何ステップを行うか
-
line_config:
-
color: 色
-
width: 線幅
-
-
interval_ms: 1ライン描画するのにかける時間
フラクタルツリー
サンプル
コード
drawFractalTree(canvas_id, pos0, len0, scale, angle_deg, step, line_config, interval_ms ) 関数で描画している。
-
pos0: treeの初期位置
-
scale: 次stepでの長さをスケーリング
-
angle_deg: 次stepで何度で枝分かれするか
-
step: 何step行うか
-
line_config:
-
color: 色
-
width: 線の幅
-
-
interval_ms: 1ラインを描画する時間[ms]
