Processing——码绘与手绘对比动态篇

码绘展示

先来看一下码绘的最终效果
PS：图中运动毫无规则的星星是由鼠标控制的，录制gif文件时没有把鼠标运动录制下来。

手绘展示

由于是动态结果，一帧帧手绘很麻烦，所以手绘作品只画了一帧。

从这张非常敷衍的手绘作品不难看出，在动态艺术作品上，码绘似乎更占据优势。它更精准快捷，便于实现。通常对于手绘来说，要想展示出动态的效果会采用多种其它方式，比如头发衣物等的形态改变，或者是添加线条显示运动状态。


对于码绘而言，可以实现的动态效果多种多样，可以是函数运动、粒子系统等等。
在p5.js官网有很多资料，可以去逐一学习。
https://p5js.org/zh-Hans/examples/

实验原理与代码

这次的码绘主要用的是随机函数和正余弦函数。
首先第一部分是不断转动的圆环，来看一下代码：

function drawshine()
{
  noStroke();
  for (var i = 1; i < 300; i++) {
    var angle = random(0, 2 * PI);
    var xpos = 300 * cos(angle);
    var ypos = 300 * sin(angle);
    var rand1=random(10,20);
    var rand2=random(15,25);
    fill(255,127,36,200);
    ellipse( xpos, ypos,5,5 );
    fill(205,55,0,150);
    ellipse( xpos+rand1, ypos+rand2,8,8 );
  }
}

这个很简单，就是300个小圆在一个大圆的圆周上运动，让所有圆的位置对应同一个angle的sin、cos值就可以了。
为了视觉效果优化，可以再定义两个随机数，分别加给posX和posY，这样一来这些小圆就不是在一个完全规整的圆上运动了。
那么怎么实现旋转效果呢？也很简单，用一个简单的rotate函数就可以实现。这里可以去看一下官网的实例，在draw函数里加入如下代码即可。

    push();
    //使图案位置在中间
    translate(width*0.5, height*0.4);
    rotate(frameCount / 10.0);
    drawshine();
    pop();

看一下效果：

接下来是星星部分的绘制，星星由24条线组成，每条线长度为随机函数，为了使线条均匀分布并且外围是圆，这里用到了正余弦函数。
这个也没什么技术含量，直接上代码吧

function drawpic(centerX, centerY, minRad, maxRad) {
  var points = 24;
  var rad, theta;
  var x0, y0;
 
  stroke(255,255,195);
  strokeWeight(0.9);
  theta = 0;
  x0 = centerX + rad * cos(theta);
  y0 = centerY + rad * sin(theta);
  for (var i = 0; i < points; i++)
  {
      theta +=  2 * PI/ points;
      rad = minRad + random() * (maxRad - minRad);
      x0 = centerX + rad * cos(theta);
      y0 = centerY + rad * sin(theta);
      line(centerX, centerY,x0, y0);
  }
}

看一下最终效果（录屏软件降低了帧率）：

实际效果其实是闪得很快的，如果想调整帧率，可以使用frameRate()来调节。

最后是鼠标交互部分。这一部分参考了官网案例，原理也很简单，就是将星星的坐标参数设置为由鼠标控制（mouseX,mouseY），为了视觉效果更佳，给坐标加了一个缓冲，让星星“慢慢地”来到鼠标所在位置，这个就不贴代码了，可以直接去看官网案例。

总结归纳

对于动态作品，总体而言还是码绘更方便快捷，手绘受局限性较大。

资料参考

鼠标交互
https://p5js.org/zh-Hans/examples/input-easing.html
旋转
https://p5js.org/zh-Hans/examples/form-star.html
载入背景图片
https://p5js.org/zh-Hans/examples/image-background-image.html