本文详解使用p5.js绘制动态同心圆的实现方法。通过正弦函数控制白色圆半径变化，利用相位差参数调整视觉效果。文章提供基础临摹代码及相位差拓展方案，帮助开发者理解动画周期与视觉扩散效果的关系。
动态同心圆动画实现与相位差拓展
本文介绍如何利用p5.js库临摹并拓展一个动态图形，供开发者参考学习。
原始图形展示。
该图形特征为：由内向外，白色圆的半径依次增大，而黑色圆的半径保持不变。白色圆在尚未与前一个白色圆接触时便开始增大半径。整个图像仅包含一个完整周期的变化过程。
临摹图形部分。
利用P5.js，依据上述规律进行图形复现。
具体实现参数如下：绘制12对圆；相邻圆之间的半径差值为25；白色圆半径的变化遵循周期为60帧的正弦函数的正值部分，变化幅度为22；相邻白色圆运动函数的相位差设定为13帧。
相关代码如下。
function setup() {
createCanvas(400, 400);
frameRate(30)//图形设为30帧
}
function draw() {
background(0);
for(i=12;i>0;i--)//一共12对圆
{
y=22*sin(PI*frameCount/30-13*(i-1));//相邻白色圆运动函数相位差为13帧
if(y>=0)
{
a=y;
}
else
{
a=0;
}
fill(255);
ellipse(200,200,a+50*i);//白色圆
fill(0);
ellipse(200,200,25+50*(i-1));//黑色圆
}
}
图形拓展部分。
图形呈现向外扩散的视觉效果，主要归因于相邻白色圆之间设置了13帧的相位差。通过修改相位差参数，可以实现不同的视觉表现效果。
function setup() {
createCanvas(400, 400);
frameRate(30)
}
function draw() {
background(0);
for(i=12;i>0;i--)
{
y=22*sin(PI*frameCount/30-12*(i-1));//相位差设为12
if(y>=0)
{
a=y;
}
else
{
a=0;
}
fill(255);
ellipse(200,200,a+50*i);
fill(0);
ellipse(200,200,25+50*(i-1));
}
}
以上内容为本文全部介绍，希望能对读者的学习提供有益帮助，同时也感谢大家的支持。