How to create Animation of Sine Wave Pattern using p5.js ?

Last Updated : 01 Mar, 2023

In this article, we are going to see how to create a Sine Wave Pattern animation 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 Sine Wave Pattern using p5.js.

Approach: This code uses the p5.js library to generate a visual representation of a sine wave. The wave is generated by calculating the height (y-value) of each point on the wave using the sine function with a changing angle (theta). The resulting “y-values” are stored in an array, and then the wave is rendered by drawing a series of ellipses at each point on the wave.

The code begins by setting up the canvas and initializing the variables. The setup function sets the canvas “size”, calculates the “width” of the wave (w), and initializes the “values” array with enough space to store the “y-values” for each point on the wave.
The “draw()” function is called repeatedly, and it clears the canvas, calculates the “y-values” for each point on the wave using the “calcWave()” function, and then renders the wave using the “renderWave()” function.
The “calcWave()” function updates the “theta” variable, and then calculates the “y-value” for each point on the wave using the “sine()” function with the current angle (theta). The “x-value” for each point on the wave is incremented by “dx” to move across the wave.
The “renderWave()” function loops through the “values” array and draws an ellipse at each point on the wave. The “x-coordinate” for each ellipse is calculated as the index of the “y-value” in the array multiplied by the “xspacing”, and the “y-coordinate” is set to the height of the canvas divided by 2 (to center the wave vertically) plus the “y-value” for that point on the wave.

Variables Used:

xspacing: The distance between each point on the x-axis
w: The width of the canvas, plus an extra 16 pixels
theta: The angle used to calculate the y-values for each point on the wave
amplitude: The maximum height of the wave
period: The distance between each repetition of the wave
dx: The amount to increment x by for each point on the wave
yvalues: An array to store the y-values for each point on the wave

Functions used:

setup(): Sets up the canvas and initializes variables.
draw(): Repeatedly updates and renders the wave on the canvas.
calcWave(): Calculates the y-values for the wave.
renderWave(): Renders the wave on the canvas using ellipses.

Example: In this example, we are going to create a Sine Wave Pattern 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 Sine Wave</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 xspacing = 8;     
        let w;               
        let theta = 0.0;      
        let amplitude = 75.0;  
        let period = 500.0;    
        let dx;              
        let yvalues;   
  
        function setup() { 
            createCanvas(710, 400); 
            w = width + 16; 
            dx = (TWO_PI / period) * xspacing; 
            yvalues = new Array(floor(w / xspacing)); 
        } 
  
        function draw() { 
            background(0); 
            calcWave(); 
            renderWave(); 
        } 
  
        function calcWave() { 
            theta += 0.02; 
  
            let x = theta; 
            for (let i = 0; i < yvalues.length; i++) { 
                yvalues[i] = sin(x) * amplitude; 
                x += dx; 
            } 
        } 
  
        function renderWave() { 
            noStroke(); 
            fill(255, 50, 50); 
            for (let x = 0; x < yvalues.length; x++) { 
                ellipse(x * xspacing, height  
                        / 2 + yvalues[x], 16, 16); 
            } 
        } 
    </script> 
</body> 
</html>