p5.js | función de ruido()

La función noise() se utiliza para devolver un número generado por el ruido de Perlin en las coordenadas dadas. Este valor es semialeatorio, lo que significa que el valor sería fijo para una coordenada durante la vida útil del programa.

El valor del ruido de Perlin es diferente del valor devuelto por la función random() ya que este ruido tiene una sucesión más natural y armónica en comparación con el estándar.

Sintaxis:

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

Parámetro: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación:

• x: Este es un número que representa la coordenada x en el espacio de ruido.
• y: Este es un número que representa la coordenada y en el espacio de ruido. Es un parámetro opcional.
• z: Este es un número que representa la coordenada z en el espacio de ruido. Es un parámetro opcional.

Valor de retorno: Devuelve el valor de ruido Perlin entre 0 y 1.

Los siguientes ejemplos ilustran la función noise() en p5.js:

Ejemplo 1: Trazado de los valores de ruido de la coordenada y del punto en movimiento.

• Programa:

  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++; }

• Producción:
  

Ejemplo 2: Este ejemplo demuestra la propiedad semialeatoria de una función.

• Programa:

  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; }

• Producción:
  

Ejemplo 3: Este ejemplo utiliza dos parámetros para definir un punto en el espacio de ruido.

• Programa:

  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;     } }

• Producción:
  

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Referencia: https://p5js.org/reference/#/p5/noise