p5.js动态图形的模仿及拓展

动态原图及其分析

动态原图

原图分析

这张图形中一共有36个四分之三圆的扇形，并且可以分为4个一组，一共有9组，所以，只要先做出一组，就可以通过循环实现相应的效果。
在一组中，旋转角速度都相同，旋转模式则分为两种，分别是顺时针和逆时针，所以又可以分为两类来做。
现在来分析旋转规律，扇形每次旋转时，旋转速度是符合正弦函数的，每次旋转的角度都是π/2。

代码逐步实现及数学推导

代码逐步实现

1.实现第一组扇形的绘制

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0);
  arc(50,50,90,90,HALF_PI,0);
  arc(150,50,90,90,PI,HALF_PI);
  arc(50,150,90,90,0,PI+HALF_PI);
  arc(150,150,90,90,PI+HALF_PI,PI);
}

代码效果如下：

2.实现第一组扇形的旋转

var x,rad = 0;
function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0);
  x = frameCount/(PI);
  rad += 1/4*abs(sin(x));
  arc(50,50,90,90,HALF_PI-rad,-rad);
  arc(150,50,90,90,PI+rad,HALF_PI+rad);
  arc(50,150,90,90,rad,PI+HALF_PI+rad);
  arc(150,150,90,90,PI+HALF_PI-rad,PI-rad);
}

代码效果如下：

其中，设置x为单位时间，rad为旋转的弧度，-rad则表示这个扇形是逆时针旋转，+rad则表示这个扇形是顺时针旋转。

3.最后结果
代码就不放了，就放一张最后做出来的图：

数学推导

由于旋转速度符合sin函数，则扇形旋转π/2所需要的时间则为T/2（T为A*sin(Bx)的周期，为2π/B），刚开始不能确定A,B的取值，都是随意取值，虽然最后也能做出来，但是总觉得这样不算真的理解是怎么画出来这个图形的，后面参考别人的意见，使用积分公式，求出T/2内，旋转过的弧度rad=2A/B=π/2，所以A=（Bπ）/4，A和B可以取任意值，但是这两个值决定了扇形旋转的快慢，最后我取了A=1/4，B=1。

拓展作品

拓展1

这张图片就是修改了rad中的赋值，做出来的图像，由于上传图片的限制，效果不是很完全。