JavaScript的單面/柏林噪聲

Question

我想在JavaScript中，這將使類似下面的結果來創建一個柏林/單面/值噪音的功能：

（注：這個形象已經有應用了treshold 。我想要它沒有門檻。）

我一直在尋找2天的互聯網。有很多解釋噪聲和很多代碼的鏈接，但JavaScript中沒有任何鏈接，每當我嘗試將其轉換時，我都會得到奇怪的結果。下面是我的一些attemps的：

• http://jsfiddle.net/GZCye/
• http://jsfiddle.net/Lk56f/（based on this）
• http://pastebin.com/nMA40SrL（在搗鼓出於某種原因沒有運行，based on this

我認爲問題的一部分可能源於JavaScript中按位運算符的使用，其中難以強制執行一個數字的類型。

我正在尋找的是一個工作的例子，JavaScript噪聲（無論什麼類型）。

我也願意授予與參數有關的任何信息的獎勵，這些參數可能會導致類似於我公佈的圖像（閾值之前）或任何優化提示的模式，因爲我需要這樣做盡可能快（儘管如此，JavaScript）。

Answer 1

我將使用上this Gist.

Answer 2

我之前做了這樣的事情，但是我用了中點位移。如果你能搞清楚怎麼回事就可能是有幫助的，

http://www.somethinghitme.com/projects/canvasterrain/

它也是在這裏

https://github.com/loktar00/Javascript-Canvas-Terrain-Generator

這裏是只是一些很酷的照明實施的噪聲部分提琴，

http://jsfiddle.net/loktar/4qAxZ/

祝你好運:)。

Answer 3

找到的代碼下面的代碼，我結束了有什麼用的2D/3D柏林噪聲。請注意，它使用了RequireJS的AMD模塊語法，但如果您不使用AMD加載程序，則可以將其刪除。

define(
    [], 
    function() 
    { 
     function fade(t) 
     { 
      return t * t * t * (t * (t * 6 - 15) + 10); 
     } 

     function lerp(t, a, b) 
     { 
      return a + t * (b - a); 
     } 

     function grad(hash, x, y, z) 
     { 
      // Convert lo 4 bits of hash code into 12 gradient directions. 
      var h = hash & 15, 
       u = h < 8 ? x : y, 
       v = h < 4 ? y : h == 12 || h == 14 ? x : z; 
      return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v); 
     } 

     function scale(n) 
     { 
      return (1 + n)/2; 
     } 

     var p = new Array(512); 

     var permutation = [ 
      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 
      37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 
      57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 
      77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 
      54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 
      86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 
      85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 
      154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 
      178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 
      145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 
      127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180 
     ]; 

     for (var i = 0; i < 256; i++) { 
      p[256 + i] = p[i] = permutation[i]; 
     } 

     return { 
      /** Returns a number between 0 and 1. */ 
      noise3d: function(x, y, z) 
      { 
       // Find unit cube that contains point. 
       var X = Math.floor(x) & 255, 
        Y = Math.floor(y) & 255, 
        Z = Math.floor(z) & 255; 
       // Find relative x,y,z of point in cube. 
       x -= Math.floor(x); 
       y -= Math.floor(y); 
       z -= Math.floor(z); 
       // Compute fade curves for each of x,y,z. 
       var u = fade(x), 
        v = fade(y), 
        w = fade(z); 
       // Hash coordinates of the corners. 
       var A = p[X ] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, 
        B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z; 

       // Add blended results from 8 corners of cube. 
       return scale(
        lerp(
         w, 
         lerp(
          v, 
          lerp(
           u, 
           grad(p[AA], x, y, z), 
           grad(p[BA], x - 1, y, z) 
          ), 
          lerp(
           u, 
           grad(p[AB], x, y - 1, z), 
           grad(p[BB], x - 1, y - 1, z) 
          ) 
         ), 
         lerp(
          v, 
          lerp(
           u, 
           grad(p[AA + 1], x, y, z - 1), 
           grad(p[BA + 1], x - 1, y, z - 1) 
          ), 
          lerp(
           u, 
           grad(p[AB + 1], x, y - 1, z - 1), 
           grad(p[BB + 1], x - 1, y - 1, z - 1) 
          ) 
         ) 
        ) 
       ); 
      }, 

      /** Returns a number between 0 and 1. */ 
      noise2d: function(x, y) 
      { 
       // Find unit square that contains point. 
       var X = Math.floor(x) & 255, 
        Y = Math.floor(y) & 255; 
       // Find relative x,y of point in square. 
       x -= Math.floor(x); 
       y -= Math.floor(y); 
       // Compute fade curves for each of x,y. 
       var u = fade(x), 
        v = fade(y); 
       // Hash coordinates of the corners. 
       var A = p[X ] + Y, AA = p[A], AB = p[A + 1], 
        B = p[X + 1] + Y, BA = p[B], BB = p[B + 1]; 

       // Add blended results from the corners. 
       return scale(
        lerp(
         v, 
         lerp(
          u, 
          grad(p[AA], x, y, 0), 
          grad(p[BA], x - 1, y, 0) 
         ), 
         lerp(
          u, 
          grad(p[AB], x, y - 1, 0), 
          grad(p[BB], x - 1, y - 1, 0) 
         ) 
        ) 
       ); 
      } 
     }; 
    } 
); 

Answer 4

我知道這是相當古老的，但也許它仍然可以爲別人有用。我已經構建了一個JavaScript應用程序，將Perlin和Simplex噪聲渲染到HTML5畫布上，請點擊此處查看：http://lencinhaus.github.com/canvas-noise

該應用程序允許調整噪聲計算和渲染中涉及的每個參數，並保存生成的紋理。它還將這些參數添加到URL中，以便它可以共享。 例如，this configuration產生的紋理與您所展示的紋理非常相似。

希望有幫助！