Javascript: Barnsley Fern Fractal

Question

Can someone look over this code and point out why the resulting barnsley fern fractal doesn't look right?

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

It has the right general shape but I must be missing something, I've checked the algorithms and such but to no avail. Any help is greatly appreciated.

Answer 1

There was just a small error while typing the numbers. (I checked against this source, it looks like it uses the same numbers you are using).

In this this.two functions, you need to change

var zx = 0.85 * xn + 0.4 * yn;

to

var zx = 0.85 * xn + 0.04 * yn;

You can see this fix in action on jsFiddle.