 GeeksforGeeks App
Open App Browser
Continue

## Related Articles

The noise() function is used to return a number generated by Perlin noise at the given coordinates. This value is semi-random, which means that the value would be fixed for a coordinate for the lifespan of the program.

The Perlin noise value is different from the value returned by the random() function as this noise has a more natural and harmonic succession compared to the standard one.

Syntax:

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

Parameter: This function accept three parameters as mentioned above and described below:

• x: This is a number which represents the x-coordinate in the noise space.
• y: This is a number which represents the y-coordinate in the noise space. It is an optional parameter.
• z: This is a number which represents the z-coordinate in the noise space. It is an optional parameter.

Return Value: It returns the Perlin noise value between 0 and 1.

Below examples illustrates the noise() function in p5.js:

Example 1: Plotting the noise values of the y-coordinate of the moving point.

• Program:

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

• Output: Example 2: This example demonstrates the semi-random property of a function.

• Program:

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

• Output: Example 3: This example uses two parameters for defining a point in the noise space.

• Program:

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

• Output: Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

My Personal Notes arrow_drop_up
Related Tutorials