Javascript tiếng ồn

Question

Tôi đang cố gắng để tạo ra một hàm Perlin/simplex/giá trị tiếng ồn trong JavaScript mà sẽ cho kết quả tương tự như sau simplex/Perlin:

(Lưu ý: hình ảnh này đã thực sự có treshold áp dụng Tôi muốn nó không có treshold.)

Tôi đã tìm kiếm trên internet trong 2 ngày nay. Có rất nhiều liên kết giải thích tiếng ồn và rất nhiều mã, nhưng không có trong JavaScript, và bất cứ khi nào tôi cố gắng chuyển đổi nó, tôi nhận được kết quả lạ. Dưới đây là một số attemps tôi:

• http://jsfiddle.net/GZCye/
• http://jsfiddle.net/Lk56f/ (based on this)
• http://pastebin.com/nMA40SrL (không chạy trong Fiddle đối với một số lý do, based on this

Tôi nghĩ rằng một phần của vấn đề có thể xuất phát từ việc sử dụng toán tử bitwise trong JavaScript, ở đó khó thực thi loại số.

Những gì tôi đang tìm kiếm là một ví dụ về làm việc, tiếng ồn JavaScript (bất kỳ loại nào).

Tôi cũng sẵn sàng cấp tiền thưởng cho bất kỳ thông tin nào liên quan đến các thông số có thể dẫn đến mẫu tương tự như hình ảnh tôi đăng (trước ngưỡng) hoặc bất kỳ mẹo tối ưu hóa nào vì tôi cần điều này để chạy nhanh nhất có thể (trong JavaScript dù sao).

Answer 1

tôi sẽ sử dụng mã được tìm thấy trên this Gist.

Answer 2

Tôi đã làm điều gì đó như thế này trong khi quay lại, tuy nhiên tôi đã sử dụng dịch chuyển điểm giữa. Nếu bạn có thể tìm ra whats going on nó có thể là hữu ích,

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

của nó cũng ở đây

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

Và đây là một fiddle với chỉ một phần tiếng ồn thực hiện với một số ánh sáng mát mẻ,

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

Chúc may mắn :).

Answer 3

Đây là những gì mã tôi đã kết thúc với cho 2D/3D Perlin tiếng ồn. Lưu ý rằng nó sử dụng cú pháp mô đun AMD của RequireJS, nhưng bạn có thể loại bỏ nó đi nếu bạn không sử dụng bộ nạp 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

Tôi biết điều này khá cũ, nhưng có thể nó vẫn hữu ích cho người khác. Tôi đã tạo ứng dụng javascript hiển thị tiếng Perlin và Simplex thành canvas HTML5, kiểm tra tại đây: http://lencinhaus.github.com/canvas-noise

Ứng dụng cho phép tinh chỉnh mọi tham số liên quan đến tính toán và hiển thị nhiễu và lưu kết quả thu được. Nó cũng thêm các tham số vào URL, để nó có thể được chia sẻ. Ví dụ: this configuration tạo kết cấu rất giống với kết cấu bạn đã hiển thị.

Hy vọng điều đó sẽ hữu ích!