P5.js完成动态旋转图的临摹和创作

图片的临摹选择

临摹前的动态观察

首先我们可以看见图上一共有16个小球，这16个小球围绕着中心圆形均匀分布，但是各自以sin函数在法向量上振动。并且在原来位置振动的同时产生了旋转的动态感。
所以我们对这幅图模仿的思路如下：
首先将16个小球先平移到画面中心：

translate(width / 2, height / 2)

然后再通过draw函数来更新位置。

r = 130 + 90 * cos(3 * th + TWO_PI * t + 0.065 * j);
ellipse(r, 0, 10 + 0.5 * j, 10 + 0.5 * j);

这里的130表示了小球最开始围绕的中心圆形的半径，th随着时间的变换而增加：

 th = TWO_PI * i / N;

N为16，是小球的个数。

fill(i / N, 1, j / n);

和th对应，改变的是小球均匀分布的颜色。

gif还有很重要的一点就是他的曳尾效果。

r = 130 + 90 * cos(3 * th + TWO_PI * t + 0.065 * j);
ellipse(r, 0, 10 + 0.5 * j, 10 + 0.5 * j);

0.065 * j可以实现，两个for循环，一个套着16个小球，一个表示每个小球有6个更新来表示曳尾效果。
如果
增加系数，可以看见小球分割开来：

如果第二个for循环的小球个数增加或减少：

模仿效果

全部代码

function setup() {
   
  createCanvas(540, 540);
  noStroke();
  colorMode(HSB, 1);
}

var N = 16,
  n = 6;
var th, r, t;
var speed = 7e-4;

function draw()
{
   
  t = (Date.now() * speed