1

有人可以查看这段代码并指出为什么生成的巴恩斯利蕨分形看起来不正确吗？

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

它具有正确的一般形状，但我必须遗漏一些东西，我已经检查了算法等但无济于事。任何帮助是极大的赞赏。

4

2 回答 2

4

输入数字时出现了一个小错误。（我检查了这个来源，看起来它使用的数字与您使用的数字相同）。

在此this.two功能中，您需要更改

var zx = 0.85 * xn + 0.4 * yn;

至

var zx = 0.85 * xn + 0.04 * yn;

你可以在 jsFiddle 上看到这个修复。

于 2013-03-20T23:59:26.380 回答
0

有数百万种方法可以做到，但我想你可能会喜欢这个。

更新/步骤由 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) }
    }
];

玩得开心 ：）

于 2014-07-11T00:30:33.000 回答