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) % 1;
  background(0);
  push();
  translate(width / 2, height / 2);
  for (var i = 0; i < N; i++) 
  {
      for (var j = 0; j < n; j++) 
      {
          fill(i / N, 1, j / n);
          push();
          th = TWO_PI * i / N;
          rotate(th);
          r = 130 + 90 * cos(3 * th + TWO_PI * t + .065 * j);
          ellipse(r, 0, 10 + 0.5 * j, 10 + 0.5 * j);
          pop();
      }
  }
  pop();
}

扩展创作

流星效果

这里加了点流星效果，虽然不明显：

// An highlighted block
var num = 0;
var angle = -Math.PI,
  r = 100;
var N = 16,
  n = 6;
var th, r, t;
var speed = 7e-4;
function walk() //随机生成r和angle
{
  var options = [{r: random(1, 5),l: 0}, 
                 {r: 0,l: PI / random(1, 10)}, 
                 {r: -random(1, 5),l: 0},
                 {r: 0,l: -PI / random(1, 10)},
                 {r: random(1, 5),l: PI / random(1, 10)},
                 {r: -random(1, 5),l: -PI / random(1, 10)
  }, {
      r: random(1, 5),
      l: -PI / random(1, 10)
  }, {
      r: -random(1, 5),
      l: PI / random(1, 10)
  }]

  var selected = random(options);
  angle += selected.l;
  r += selected.r;
}

银河效果

// An highlighted block
function setup() {
  createCanvas(540, 540);
  background(0);
  color = color('#ec94e5');
  colorMode('HSB', 100);
}

var num = 0;
var angle = -Math.PI,
  r = 100;
var N = 16,
  n = 6;
var th, r, t;
var speed = 7e-4;
function walk() 
{
  var options = [{r: random(1, 5),l: 0}, 
                 {r: 0,l: PI / random(1, 10)}, 
                 {r: -random(1, 5),l: 0},
                 {r: 0,l: -PI / random(1, 10)},
                 {r: random(1, 5),l: PI / random(1, 10)},
                 {r: -random(1, 5),l: -PI / random(1, 10)
  }, {
      r: random(1, 5),
      l: -PI / random(1, 10)
  }, {
      r: -random(1, 5),
      l: PI / random(1, 10)
  }]

  var selected = random(options);
  angle += selected.l;
  r += selected.r;
}
function draw() {
  t = (Date.now() * speed) % 1;
 
  stroke(255);
    t = (Date.now() * speed) % 1;
    translate(width / 2, height / 2);

  for (var i = 0; i <20; i++) 
  {
     walk();
      for (var j = 0; j < 20; j++) {
        
          stroke(255 / 12 * i, num % 255, r)
          x = r * cos(angle + i * TWO_PI / 12);
          y = r * sin(angle + i * TWO_PI / 12);            
          th = TWO_PI * i / N;
          rotate(th);
          r = 130 + 90 * cos( TWO_PI * t );
          ellipse(r, y, 0.1, 0.1);
         
      }
  }
 
}