p5.js |噪声()函数

noise()函数用于返回由 Perlin 噪声在给定坐标处生成的数字。该值是半随机的，这意味着该值将在程序的生命周期内固定为坐标。

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：此示例演示了函数的半随机属性。

• 程序：

  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://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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