Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

フラクタル図形 ツリー2015/06/28

canvasを用いてフラクタルっぽいものを描画


意外と簡単に実装できた。


【若干解説】
drawTree(x, y, r, l)は座標(x,y)から角度r、長さlの木を描画する。
描画の際にlが一定以上（5を超える）の場合に小枝を描画する。


※Firefox以外での動作不明


canvas未対応
tree.js 
var cvr = Math.PI/180;  // converter
var canvas = document.getElementById("canvasArea"); // canvasを取得
var ctx;
function drawTree(x, y, r, l){    
  if (Math.abs(l) > 5) { // 枝の長さが一定以上なら小枝をつける
    var px = x + (l/2)*Math.cos(r * cvr);  // 小枝の分岐点
    var py = y - (l/2)*Math.sin(r * cvr);  // 小枝の分岐点

    drawTree(x + l * Math.cos(r * cvr), y - l * Math.sin(r * cvr), r, l*0.8);// 小枝１
    drawTree(px, py, r+25, l*0.5);  // 小枝２
    drawTree(px, py, r-25, l*0.5);  // 小枝３
  }
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + l*Math.cos(r * cvr), y - l*Math.sin(r * cvr));  // "枝" を描画 
  ctx.stroke();
}

if (canvas.getContext) { // canvasに対応しているなら
  ctx = canvas.getContext("2d");  // ctxはグローバル
  drawTree(150, 500, 90, 100); //木を描画
}