p5.js 动态图像临摹及拓展

原图展示

原图分析

本图片实质为白色圆形和黑色圆形互套而成。
运动时，所有白色圆形半径按正弦函数增大和缩小
在半径最小处停止一段时间，随后再继续周期运动
内圈先动，外圈后动
上一个圆运动中途下一个圆开始运动

代码实现

画单个圆的代码

  //白圆
  fill(255);
  ellipse(400,400,100+50*abs(sin(a[0])),100+50*abs(sin(a[0])));
  //黑圆
   fill(0);
  ellipse(400,400,50,50);

50*abs(sin(a[0])为半径的变化量
主要问题有两个：
1.让半径可以在变化和静止之间变化
2.让每个白圆的运动有一定相位差

（一）

i[0]=0;//相位差
//运动时间
if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  //静止时间
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}

对于第一个圆来说，相位差为0
运动时间为1PI,静止时间为4PI，周期往复

（二）
用数组i来控制相位差

i=[0,0,0,0,0,0,0,0,0,0,0];
  for(j=0;j<=10;j++){
  i[j]=j*PI*1/4;
  }

//第一个白圆
//i[0]=0;

if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}
  
 //第二个白圆
//i[1]=1/4PI;相位差为四分之一PI

  if(((frameCount/10*PI)-i[1])<PI){
   a[1]=(frameCount/10*PI-PI/4);
  }
  else if(((frameCount/10*PI)-i[1])<5*PI)
  { a[1]=0;}
  else
  {i[1]=i[1]+5*PI}
  

最后精简画圆代码，用循环语句：

noStroke();
  
  for(x=21;x>=0;x--){
    if(x%2==1){
      fill(220);
    ellipse(400,400,50+50*x+50*abs(sin(a[(x-1)/2])),50+50*x+50*abs(sin(a[(x-1)/2])));
    }
    else{
      fill(0);
      ellipse(400,400,50+50*x,50+50*x);
    }
  }

临摹总代码：