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) }
    }
];

玩得开心：）

Javascript：Barnsley Fern Fractal

2 个答案: