如何使用p5.js创建噪音动画效果

在这篇文章中，我们将看到如何使用p5.js创建噪音动画效果。

p5.js是一个JavaScript库，可以帮助创建用户可以交互的图形，易于使用，并且有助于可视化不同类型的图形和动画。这篇文章将向您展示如何使用p5.js创建噪音效果动画。

方法：

第一行声明一个名为”xoff”的全局变量，用于生成噪音值。
当创建画布时，调用”setup()”函数。它使用”createCanvas()”函数创建一个宽度为400像素，高度为400像素的画布。
p5.js通过反复调用”draw()”函数来绘制每一帧的动画。
在”draw()”函数内部，使用”background()”函数将背景颜色设置为51。
创建一个名为”noiseVal”的数组，用于存储随机噪音值。for循环为画布中的每个”x”位置生成噪音值。”noise()”函数生成受”xoff”值影响的随机值，该值在循环的每次迭代中递增。
“stroke()”函数将线条颜色设置为”white”，”noFill()”函数使线条不填充，”beginShape()”函数和”endShape()”函数用于使用由”vertex()”函数指定的顶点绘制形状。
在每次for循环的迭代中，”vertex()”函数向正在绘制的形状添加一个新的顶点。”x”位置由循环变量”x”指定，”y”位置由”noiseVal”数组中的相应值指定。

最终的结果是一个不断动画化的噪音效果，根据噪音值创建随机线条。

使用的函数：

setup()： 当画布创建时，会调用此函数。它使用”createCanvas()”函数来设置画布。
draw()： 此函数由p5.js重复调用，用于绘制动画的每一帧。它生成随机的噪声值，并根据这些值来画线。
background(51)： 此函数将画布的背景颜色设置为51，即灰色的一种色调。
noise(xoff)： 此函数生成随机值，受”xoff”值的影响。它返回一个介于0和1之间的值。
stroke(255)： 此函数将线条的颜色设置为白色。
noFill()： 此函数使线条没有填充。
beginShape() 和 endShape() ：这些函数用于使用由”vertex()”函数指定的顶点绘制形状。
vertex(x, noiseVal[x])： 此函数向正在绘制的形状添加一个新的顶点。”x”位置由循环变量”x”指定，”y”位置由”noiseVal”数组中相应的值指定。

示例： 在这个示例中，我们将使用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>

输出：

如何使用p5.js创建噪音动画效果