我不能在Javascript中生成平滑的單純形噪聲

Question

我已經試過了所有內容，並閱讀了有關Perlin噪聲或Simplex噪聲的互聯網上可以看到的每一個鏈接，甚至解析了一些我看到工作正常的Javascript示例。

但我仍然得到非常隨機看圖像...本質上只是電視靜態。

我的代碼如下。我正在使用一個隨機數生成器，這樣我就可以創建一個值，但我也嘗試過使用Math.random。

據我所知，在不同的八度音產生的不同圖像不能正確插值，或者我從噪音函數轉換爲RGB值的方式是錯誤的（我試圖解決這兩個問題這些問題......）。

if (!this.Prng) { 
    var Prng = function() { 
     var iMersenne = 2147483647; 
     var rnd = function(seed) { 
      if (arguments.length) { 
       that.seed = arguments[0]; 
      } 
      that.seed = that.seed*16807%iMersenne; 
      return that.seed; 
     }; 
     var that = { 
      seed: 123, 
      rnd: rnd, 
      random: function(seed) { 
       if (arguments.length) { 
        that.seed = arguments[0]; 
       } 
       return rnd()/iMersenne; 
      } 
     }; 
     return that; 
    }(); 
} 

var CSimplexNoise = function(r) 
{ 
    this.grad3 = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1], 
        [1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]]; 
    var p = []; 
    for(i = 0; i < 256; i++) 
     p[i] = Math.floor(r.random()*256); 
    this.perm = new Array(); 
    for(i = 0; i < 512; i++) 
    { 
     this.perm[i] = p[i & 255]; 
    } 

} 


CSimplexNoise.prototype.dot = function(g,x,y) 
{ 
    return g[0]*x + g[1]*y; 
} 

CSimplexNoise.prototype.GenerateSimplexNoise = function(x,y,octaves,persistence) 
{ 
    var total = 0; 

    for(i=0; i < octaves-1; i++) 
    { 
     var freq = Math.pow(2,i); 
     var amp = Math.pow(persistence,i); 

     total += this.InterpolatedNoise(x*freq,y*freq) * amp; 
    } 

    return total; 
} 

CSimplexNoise.prototype.InterpolatedNoise = function(x,y) 
{ 
    var xInt = Math.floor(x); 
    var xFrac = x - xInt; 
    var yInt = Math.floor(y); 
    var yFrac = y - yInt; 

    var v1 = this.SmoothNoise(xInt,yInt); 
    var v2 = this.SmoothNoise(xInt + 1,yInt) 
    var v3 = this.SmoothNoise(xInt,yInt+1) 
    var v4 = this.SmoothNoise(xInt + 1, yInt + 1); 

    var i1 = this.LinearInterpolate(v1,v2,xFrac); 
    var i2 = this.LinearInterpolate(v3,v4,xFrac); 

    return this.CosineInterpolate(i1,i2,yFrac); 
} 

CSimplexNoise.prototype.LinearInterpolate = function(a,b,x) 
{ 
    return a*(1-x) + b*x; 
} 

CSimplexNoise.prototype.CosineInterpolate = function(a,b,x) 
{ 
    var f = (1 - Math.cos(x*Math.PI)) * 0.5; 
    return a*(1-f) + b*f; 
} 

CSimplexNoise.prototype.SmoothNoise = function(x,y) 
{ 
    var corners = (this.Noise(x-1,y-1) + this.Noise(x+1,y-1) + this.Noise(x-1,y+1) + this.Noise(x+1,y+1))/16; 
    var sides = (this.Noise(x-1,y) + this.Noise(x+1,y) + this.Noise(x,y-1) + this.Noise(x+1,y+1))/8; 
    var center = this.Noise(x,y)/4; 
    return corners + sides + center; 
} 

CSimplexNoise.prototype.Noise = function(xin, yin) 
{ 
    var n0, n1, n2; 

    var F2 = 0.5*(Math.sqrt(3)-1); 
    var s = (xin+yin)*F2; 
    var i = Math.floor(xin+s); 
    var j = Math.floor(yin+s); 

    var G2 = (3-Math.sqrt(3))/6; 
    var t = (i+j)*G2; 
    var X0 = i-t; 
    var Y0 = j-t; 
    var x0 = xin-X0; 
    var y0 = yin-Y0; 

    var i1,j1; 
    if(x0 > y0) 
    { 
     i1 = 1; 
     j1 = 0; 
    } 
    else 
    { 
     i1 = 0; 
     j1 = 1; 
    } 

    var x1 = x0 - i1 + G2; 
    var y1 = y0 - j1 + G2; 
    var x2 = x0 - 1 + 2 * G2; 
    var y2 = y0 - 1 + 2 * G2; 

    var ii = i & 255; 
    var jj = j & 255; 
    var gi0 = this.perm[ii + this.perm[jj]] % 12; 
    var gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12; 
    var gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12; 

    var t0 = 0.5 - x0 * x0 - y0 * y0; 
    if(t0 < 0) 
     n0 = 0; 
    else 
    { 
     t0 *= t0; 
     n0 = t0 * t0 * this.dot(this.grad3[gi0],x0,y0) 
    } 

    var t1 = 0.5 - x1 * x1 - y1 * y1; 
    if(t1 < 0) 
     n1 = 0; 
    else 
    { 
     t1 *= t1; 
     n1 = t1 * t1 * this.dot(this.grad3[gi1],x1,y1); 
    } 

    var t2 = 0.5 - x2 * x2 - y2 * y2; 
    if(t2 <0) 
     n2 = 0; 
    else 
    { 
     t2 *= t2; 
     n2 = t2 * t2 * this.dot(this.grad3[gi2],x2,y2); 
    } 

    return 70 * (n0 + n1 + n2); 
} 



$(document).ready(function(){ 

    var context = $('#screen')[0].getContext("2d"); 
    var w = 100; 
    var h = 100; 
    var data = context.createImageData(w,h); 

    var simplexNoise = new CSimplexNoise(Prng); 

    for(y = 0; y < h; y++) 
    { 
     for(x = 0; x < w; x++) 
     { 
     // var newVal = ((simplexNoise.GenerateSimplexNoise(x,y,5,0.25) - -1)/(1 - -1)) * (255 - 0); 
      var newVal2 = simplexNoise.GenerateSimplexNoise(x,y,5,0.5) 
      var newVal = Math.floor(newVal2*256); 
      newVal = Math.abs(newVal * 2)-0.5; 
      data.data[((h * y) + x) * 4] = newVal; 
      data.data[((h * y) + x) * 4+1] = newVal; 
      data.data[((h * y) + x) * 4+2] = newVal; 
      data.data[((h * y) + x) * 4+3] = 255; 

     } 
    } 

    context.putImageData(data,0,0); 

}) 

Answer 1

嘗試採樣simplexNoise.GenerateSimplexNoise（X * 0.05，Y * 0.05，5，0.5） 的問題可能是您的樣品相距很遠太。 （這將導致明顯的隨機行爲，因爲在您採樣之前，單工噪聲可能會經過半個波長以上）

修訂：更新上面的數字... 您可能實際上需要減少樣本，在單一噪聲的給定波長中是20。大多數單工噪聲的平均波長是1，所以0.05應該做的伎倆。另外，您可能首先需要測試一個八度音階。