Javascript：巴恩斯利蕨類分形

有人可以看看這段代碼，並指出爲什麼由此產生的巴恩斯利蕨類植物分形看起來不正確嗎？Javascript：巴恩斯利蕨類分形

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

它有正確的一般形狀，但我必須缺少的東西，我檢查了算法等，但無濟於事。任何幫助，不勝感激。

來源

2013-03-20 robjtede

雅可做出的jsfiddle？或者什麼是ctx？：| – Ronnie 2013-03-20 23:43:07

@羅尼a'

我不明白爲什麼人們投票結束這不是建設性的，這是一個明確的問題，不保證討論或主觀答案。 – 2013-03-20 23:50:46

輸入數字時只有一個小錯誤。（我對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。

來源

2013-03-20 23:59:26

非常感謝。看起來像所有這些數字中的一個可以使所有的差異。 – robjtede 2013-03-21 07:12:52

「其中一個數字」 - 這是混沌理論的全部觀點，其中分形是其中的一部分，一些函數的輸出對給定的確切輸入敏感。欲瞭解更多James Gleick的混沌書籍;非常平易近人。 – 2013-03-25 14:52:07

有數百萬種方法可以做到這一點，但我認爲你可能會喜歡this one。

更新/步驟由JS調度程序/定時器處理。它是非阻塞的，並且不會因爲重複循環而讓你的CPU變得瘋狂。

分形數據也以不同的方式處理。只需在一個地方更改參數，就可以放入任何使用仿射變換的分形。你也不需要爲它概括概率。

例如：（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-11 00:30:33 marctrem

Javascript：巴恩斯利蕨類分形

回答

相關問題