p5.js noise()用法及代碼示例

noise()函數用於在給定坐標下返回由Perlin噪聲生成的數字。該值為semi-random，這意味著該值將固定為程序壽命的坐標。

Perlin噪聲值不同於random()函數返回的值，因為與標準噪聲相比，此噪聲具有更自然和諧波的繼承。

用法:

noise(x, [y], [z])

參數：此函數接受上述和以下所述的三個參數：

• x:這是代表噪聲空間中x坐標的數字。
• y:這是代表噪聲空間中y坐標的數字。它是一個可選參數。
• z:這是代表噪聲空間中z坐標的數字。它是一個可選參數。

返回值：它返回介於0和1之間的Perlin噪聲值。

以下示例說明了p5.js中的noise()函數：

範例1：繪製移動點y坐標的噪聲值。

• 程序：

  let x_coordinate = 100.0; 
  let plot_x = 10.0; 
     
  function setup() { 
      createCanvas(400, 200); 
  } 
     
  function draw() { 
     
      // Get noise with x coordinate 
      x_noise = noise(x_coordinate) * 100; 
     
      // Plot the point with random noise 
      strokeWeight(10); 
      point(plot_x, x_noise); 
     
      // Increment the x coordinate 
      x_coordinate++; 
     
      // Increase the x coordinate 
      // for plotting 
      plot_x++; 
  }
• 輸出：
  

範例2：本示例演示了函數的semi-random屬性。

• 程序：

  let x_coordinate = 0.0; 
  let plot_y = 0.0; 
     
  function setup() { 
      createCanvas(400, 200); 
  } 
     
  function draw() { 
        
      if (x_coordinate < 5) { 
     
          // Get noise with x coordinate 
          x_noise = noise(x_coordinate); 
       
          // Output the noise along with 
          // its corresponding coordinate 
          coord_text = "Noise for x coordinate "
              + x_coordinate + " is " + x_noise; 
            
          text(coord_text, 10, plot_y); 
     
          // Increment the x coordinate 
          x_coordinate++; 
     
          // Increase the y coordinate 
          // for plotting 
          plot_y = plot_y + 15; 
      } 
      else
          x_coordinate = 0; 
  }
• 輸出：
  

範例3：本示例使用兩個參數來定義噪聲空間中的一個點。

• 程序：

  let x_coordinate = 0.0; 
  let y_coordinate = 0.0; 
  let plot_y = 0.0; 
     
  function setup() { 
      createCanvas(400, 200); 
  } 
     
  function draw() { 
        
      if (x_coordinate < 10) { 
     
          // Get noise with x and y coordinates 
          xy_noise = noise(x_coordinate, y_coordinate); 
     
          // Output the noise along with 
          // its corresponding coordinate 
          coord_text = "Noise for coordinates:"
              + x_coordinate + ", " + y_coordinate 
              + " is " + xy_noise; 
          text(coord_text, 10, plot_y); 
     
          // Increment the x and y 
          // coordinates 
          x_coordinate++; 
          y_coordinate++; 
     
          // Increase the y coordinate 
          // for plotting 
          plot_y = plot_y + 15; 
      } 
  }
• 輸出：
  

在線編輯：
環境設置：

參考： https://p5js.org/reference/#/p5/noise