How to Create Noise Animation Effect using p5.js ?

Last Updated : 17 Feb, 2023

In this article, we are going to see how to create a Noise Animation Effect using p5.js.

p5.js is a JavaScript library that helps in creating graphics that users can interact with and is easy to use and helps in visualizing different kinds of graphics and animations. This article will show you how to create a Noise Effect animation using p5.js.

Approach:

The first line declares a global variable “xoff” that will be used to generate noise values.
The “setup()” function is called once when the canvas is created. It creates a canvas with a width of 400 pixels and a height of 400 pixels using the “createCanvas()” function.
The “draw()” function is called repeatedly by p5.js to draw each frame of the animation.
Inside the “draw()” function, the background color is set to 51 using the “background()” function.
An array “noiseVal” is created to store the random noise values. The for loop generates the noise values for each “x” position in the canvas. The “noise()” function generates random values that are influenced by the “xoff” value, which is incremented in each iteration of the loop.
The “stroke()” function sets the color of the lines to “white”, the “noFill()” function makes the lines not filled, and the “beginShape()” and “endShape()” functions are used to draw a shape using the vertices specified by the “vertex()” function.
In each iteration of the for loop, the “vertex()” function adds a new vertex to the shape being drawn. The “x” position is specified by the loop variable “x” and the “y” position is specified by the corresponding value in the “noiseVal” array.

The end result is a continuously animating noise effect that creates random lines based on the noise values.

Used Functions:

setup(): This function is called once when the canvas is created. It sets up the canvas using the “createCanvas()” function.
draw(): This function is called repeatedly by p5.js to draw each frame of the animation. It generates random noise values and draws the lines based on those values.
background(51): This function sets the background color of the canvas to 51, which is a shade of gray.
noise(xoff): This function generates random values that are influenced by the “xoff” value. It returns a value between 0 and 1.
stroke(255): This function sets the color of the lines to white.
noFill(): This function makes the lines not filled.
beginShape() and endShape(): These functions are used to draw a shape using the vertices specified by the “vertex()” function.
vertex(x, noiseVal[x]): This function adds a new vertex to the shape being drawn. The “x” position is specified by the “loop” variable “x” and the “y” position is specified by the corresponding value in the “noiseVal” array.

Example: In this example, we are going to create a Noise Effect animation, using p5.js.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <title>Animation of Noise Effect</title> 
    <script src= 
"https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"> 
    </script>     
</head> 
<body> 
    <h2 style="color:green;">GeeksforGeeks</h2> 
  
    <script> 
        let xoff = 0; 
  
        function setup() { 
            createCanvas(250, 250); 
        } 
  
        function draw() { 
            background(20); 
  
            // create an array of random noise values 
            let noiseVal = []; 
            for (let i = 0; i < width; i++) { 
                noiseVal[i] = noise(xoff) * height; 
                xoff += 0.02; 
            } 
  
            // draw lines based on the noise values 
            stroke(255); 
            noFill(); 
            beginShape(); 
            for (let x = 0; x < width; x++) { 
                vertex(x, noiseVal[x]); 
            } 
            endShape(); 
        } 
    </script> 
</body> 
</html>