如何使用p5.js创建正弦波动画

如何使用p5.js创建正弦波动画

在这篇文章中,我们将看到如何使用p5.js创建正弦波动画。

p5.js是一个JavaScript库,帮助我们创建用户可交互的图形,并且易于使用,可以可视化不同类型的图形和动画。本文将展示如何使用p5.js创建正弦波动画。

方案: 该代码使用p5.js库生成正弦波的可视化表示。通过使用sin函数和变化的角度(theta)计算波上每个点的高度(y值)来生成波。得到的“y值”存储在一个数组中,然后通过在波上的每个点处绘制一系列椭圆来渲染波。

  • 代码首先设置画布并初始化变量。setup函数设置画布的“大小”,计算波的“宽度”(w),并使用足够的空间初始化“values”数组以存储波上每个点的“y值”。
  • “draw()”函数会反复调用,它清除画布,使用“calcWave()”函数计算波上每个点的“y值”,然后使用“renderWave()”函数渲染波。
  • “calcWave()”函数更新“theta”变量,然后使用当前角度(theta)和“sine()”函数计算波上每个点的“y值”。波上每个点的“x值”通过“dx”递增以在波上移动。
  • “renderWave()”函数循环遍历“values”数组,在波上的每个点处绘制一个椭圆。每个椭圆的“x坐标”计算为数组中“y值”的索引乘以“xspacing”,“y坐标”设置为画布高度的一半(垂直居中波)加上该点处波的“y值”。

使用的变量:

  • xspacing: 在x轴上每个点之间的距离
  • w: 画布的宽度,加上额外的16个像素
  • theta: 用于计算波上每个点的y值的角度
  • amplitude: 波的最大高度
  • period: 波的每次重复之间的距离
  • dx: 每个波上的点递增x的量
  • yvalues: 用于存储波上每个点的y值的数组

使用的函数:

  • setup(): 设置画布并初始化变量。
  • draw(): 重复更新并在画布上渲染波浪。
  • calcWave(): 计算波浪的y值。
  • renderWave(): 使用椭圆在画布上渲染波浪。

示例: 在这个示例中,我们将使用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>
HTML

输出:

如何使用p5.js创建正弦波动画

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册