在javascript中绘制分形?

时间:2015-07-31 08:31:27

标签: javascript math fractals

我正在研究一个2d(对于初学者)分形项目,作为一种有趣的方式来了解有关递归函数的更多信息。我正在寻找一些函数,它根据一些条件规则输出基于行的分形的坐标。就像H树一样。

是否有这样的功能/算法的名称?是否有任何简单的通用实现可供查看?

1 个答案:

答案 0 :(得分:2)

只是为了好玩:

var c = document.getElementById("cnv").getContext("2d");
var f = Math.sqrt(2);

function hor(x, y, len) {
  if(len < 1) return;

  c.beginPath();
  c.moveTo(x - len/2, y);
  c.lineTo(x + len/2, y);
  c.stroke();

  setTimeout(function() {
    ver(x - len/2, y, len/f);
    ver(x + len/2, y, len/f);
  }, 500);
}

function ver(x, y, len) {
  if(len < 1) return;

  c.beginPath();
  c.moveTo(x, y - len/2);
  c.lineTo(x, y + len/2);
  c.stroke();

  setTimeout(function() {
    hor(x, y - len/2, len/f);
    hor(x, y + len/2, len/f);
  }, 500);
}

hor(300, 90, 150)
<canvas id="cnv" width="600" height="180" />