如何使用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
输出: