p5.js临摹动态图及拓展

p5.js临摹动态图

原动态图形：

根据看图软件看原动态图一共有48帧；
数了一下大概有14对圆；
白色圆的半径从内到外变大，黑色圆的半径不变；

开始临摹：
使用P5.js，按照规律进行临摹。
临摹结果：
因为我实在不会运行出来的导出动态图，所以我就截图了…

代码

function setup() {
  createCanvas(400, 400);
  frameRate(48)//图形设为48帧
}
function draw() {
  background(0);


 for(i=14;i>0;i--)//一共14对圆
  {
    y=22*sin(PI*frameCount/48-14*(i-1));//相邻白色圆运动函数相位差为14帧
    if(y>=0)
    {
      a=y;
    }
    else
    {
      a=0;
    }
    fill(255);
     elli