p5.js对动态图形的临摹与创作

p5.js是个很方便的图形编程器，甚至可以线上编写，作为一名初学者，我在这里对一幅动图进行临摹

这是原图：

下面进行分析：

首先这36个圆其实是270度扇形，一共只有4种旋转方式，这都很简单

旋转我打算用rotate来实现，事实上这个判断是错的，因为之后我才知道，rotate的作用太局限了，可费劲死我了

我们创建这4种扇形，因为我是用rotate实现旋转，所以创建的扇形都在原点（0，0）处，之后再将它们移动到相应位置：

arc(0,0,100,100,0,PI+HALF_PI);

arc(0,0,100,100,PI+HALF_PI,PI);

arc(0,0,100,100,HALF_PI,0);

arc(0,0,100,100,PI,HALF_PI);

每一种扇形又一种旋转方式，我们再研究一下旋转方式：

可以发现，每一个扇形不是匀速转动，而是先快后慢，这很简单就能想到与三角函数有关，这里我打算采用sin函数的积分

与此同时，扇形旋转在每旋转90度都会停下，这要求我们改造一下所求的三角函数

if (sin(c)>=0){

    a=sin(c);

  }

  if (sin(c)<0){

    a=0;

  }

这样就行了

此时出大问题了，上面说到过，rotete太局限了，它只能绕原点旋转，然后，最烦的一点，无法取消它的影响，也就是说，第二个扇形在正常旋转同时，它仍然会绕原点转动

此时我用了push与pop，解决了这个问题

但是

与此同时，每一次rotate的旋转的参数d的实际效果竟然是所有我设的rotate(d)的累加，也就是说每有一个扇形，就会使所有扇形旋转角度多一倍

我实在搞不太懂rotate，它太龙鸣了，最后我只能按36个扇形，设了36个参数，代码也受此影响飙到了将近900行，其实本来2，30行就能解决，之后的代码也不好进行修改了

好了，调整一些刷新速度和旋转速度，进行数学计算，这样每一个扇形的代码如下（要36个...）：

c=frameCount/(4*PI);

  if (sin(c)>=0){

    a=sin(c);

  }

  if (sin(c)<0){

    a=0;

  }

  d+=1/16*a;

  rotate(d);

  fill(220,220,210); 

  arc(0,0,100,100,0,PI+HALF_PI);

剩下的就很好解决了，以下是输出结果：

下面进行稍微修改代码，将背景进行霓虹化（这rotate搞得我也没办法搞别的新花样了）：

let b=38;

let n=38;

let m=38;

if(b<255){

    b=b+1;

  }

  else{b=38;}

 if(n<255){

    n=n+1.5;

  }

  else{n=38;}

 if(m<255){

    m=m+1.7;

  }

  else{m=38;}

 

  background(m,n,b);

结果如下：

原创自画像就放在下一个专栏啦