Open In App

p5.js noise() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:
    output-graph

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:
    x_coord_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:
    xy_coord_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



Last Updated : 23 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads