Javascript: Barnsley Fern Fractal

Question

谁能看一看这段代码，指出为什么产生的巴恩斯利羊齿分形看起来不正确？

function barnsley (ctx) {

ctx.fillStyle = 'green';
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
var self = this;

this.itts = 100000;
this.ittsCount = 0;
this.x = 0;
this.y = 0;

this.main = function () {
    for (var i=0;i<itts;i++) {
        var rand = Math.random()*100;
        if (rand < 1) {
            self.one();
        } else if (rand < 86) {
            self.two();
        } else if (rand < 94) {
            self.three();
        } else {
            self.four();
        }
    }
}

this.one = function () {
    var xn = self.x;
    var yn = self.y;
    var zx = 0;
    var zy = 0.16 * yn;
    self.drawPoint(zx,zy);
}

this.two = function () {
    var xn = self.x;
    var yn = self.y;
    var zx = 0.85 * xn + 0.4 * yn;
    var zy = -0.04 * xn + 0.85 * yn + 1.6;
    self.drawPoint(zx,zy);
}

this.three = function () {
    var xn = self.x;
    var yn = self.y;
    var zx = 0.2 * xn - 0.26 * yn;
    var zy = 0.23 * xn + 0.22 * yn + 1.6;
    self.drawPoint(zx,zy);
}

this.four = function () {
    var xn = self.x;
    var yn = self.y;
    var zx = -0.15 * xn + 0.28 * yn;
    var zy = 0.26 * xn + 0.24 * yn + 0.44;
    self.drawPoint(zx,zy);
}

this.drawPoint = function (xn,yn) {
    self.x = xn;
    self.y = yn;
    ctx.fillRect(xn*20,-yn*20,1,1);
}

this.main();
}

它有正确的一般形状，但我一定遗漏了一些东西，我检查了算法等等，但都没有用。任何帮助都是非常感谢的。

Answer 1

只是在输入数字时出现了一个小错误。(我检查了this source，它看起来和你使用的数字是一样的)。

在此this.two函数中，您需要更改

var zx = 0.85 * xn + 0.4 * yn;

至

var zx = 0.85 * xn + 0.04 * yn;

你可以看到this fix in action on jsFiddle。

Answer 2

有数以百万计的方法可以做到这一点，但我认为你可能会喜欢this one。

更新/步骤由JS调度器/计时器处理。它是非阻塞的，不会让你的CPU因为一个繁重的for循环而发疯。

分形数据也以不同的方式处理。只要改变参数，你就可以把任何用仿射变换生成的分形放在一个地方。你也不必对概率求和，因为它会为你做这件事。

例如：(StackOverflow不允许我在没有代码示例的情况下发布JSFiddle链接)

var probability_transforms =  [
    {
        "probability": 0.01, 
        "item": function(point){ return affine_transform(point, 0, 0, 0, 0.16, 0, 0) }
    },
    {
        "probability": 0.85, 
        "item": function(point){ return affine_transform(point, 0.85, 0.04, -0.04, 0.85, 0, 1.6) }
    },
    {
        "probability": 0.07,
        "item": function(point){ return affine_transform(point, 0.2, -0.26, 0.23, 0.22, 0, 1.6) }
    },
    {
        "probability": 0.07, 
        "item": function(point){ return affine_transform(point, -0.15, 0.28, 0.26, 0.24, 0, 0.44) }
    }
];

玩得开心:)