“码绘”与手绘比较——动态篇（码绘使用p5.js）

同样是先看一下码绘图跟手绘图

码绘图

手绘图

是的，这幅手绘图是被当做一张动图与码绘动图做对比的。由于博主手残，实在没办法画出一个闪烁的星空来，所以通过小女孩摘星星这么一个动作表现动态（请自行想象）。

同样是先大体讲一下码绘图的实现
先看一个动图

这就是我上面那副码绘星空图的交互效果的demo，其实是p5.js官网的一个example。实际操作起来是比上面这个gif要流畅很多的，链接在下面，大家可以自己去玩一玩。
https://editor.p5js.org/p5/sketches/BJGll4gkXum
这个example的源码链接里也有，就，很简洁，用50多行代码实现了一个这样的弹力绳效果，我就不一一解释了（主要是我也没太看懂）。我就主要说一下我在什么地方做了修改，生成了上面那副动态星空图。

首先要把原example里面的圆形改成星星。
画星星的函数如下：

function star(x,y,radius)
{
  push();
  translate(x,y);
  for(i=0;i<5;i++)
  {
    rotate(PI*72/180);
    bezier(radius/2,0,2,-1.5*radius,-2,-1.5*radius,-radius/2,0);
  }
  pop();
}

就是一个三角形旋转了五次，星空图上也可以看出明显的五个三角形的痕迹。
然后把源码中的display函数改掉就可以啦。

this.display = function(nx, ny) {
noStroke();
star