对比码绘与手绘—

上一篇博客做的是静态画，那这篇当然要讲讲动态画。同样地，这次我们也是从思路、技术、创作体验、创作偏好等方面来比较码绘与手绘，讨论异同。
首先，展示一下作品：

码绘

利用P5.JS绘制作品

手绘

利用数位板及ps工具实现的动态图

代码实现过程

Po一下完整代码：

let dots = [];
function setup() {createCanvas(500, 500);
noStroke();
colorMode(HSB, 360, 100, 100);
frameRate(6);//帧数率
}function draw() {background('white');let t = frameCount / 60; //刷新时间//圆点随机数目for(var i = 0; i < random(3); i++) {dots.push(new dot()); }for
(let flake of dots) {flake.update(t); // 更新圆点位置
flake.display(); // 画圆点}//字
text = createP("Hello World");
text.position(120, 330);
text.style("font-weight", "monospace");
text.style("color", "#D0104C");
text.style("font-size", "30pt");
text.style("letter-spacing", "5px");
}
// 圆点随机生成函数
function dot() {// 初始化坐标this.posX = 0;this.posY = random(-50, 0);this.initialangle = random(0, 2 * PI);this.size = random(10, 60);// 圆点半径this.radius = sqrt(random(pow(width / 2, 2)));this.update = function(time) {let w = 0.9; // 角速度let angle = w * time + this.initialangle;this.posX = width / 2 + this.radius * sin(angle);// 不同大小圆点以不同速度落下this.posY += pow(this.size, 0.5);// 删除超出屏幕大小的圆点if (this.posY > height) {let index = dots.indexOf(this);     dots.splice(index, 1);}}; this.display = function() {      var h = random(0, 360);       fill(h,160,160);    ellipse(this.posX, this.posY, this.size); };
}

代码主要参考了p5.js官网中的两个范例，大家可以看一下，范例做的都很nice
https://p5js.org/zh-Hans/examples/simulate-snowflakes.html
https://p5js.org/zh-Hans/examples/color-radial-gradient.html
代码大体由三部分构成：生成随机圆并下落；创建一个colormode,在一定范围内取色彩给圆，色彩变化；文字Hello World。
第一个部分用到了第一个范例中的生成大小，位置随机的圆，每个都以随机略微不同的速度落下。将随机生成的圆都存在dots()数组中。
第二个部分用到了第二个范例中的HSB色系，colorMode(HSB, 360, 100, 100); 定义帧数率,控制变化的快慢:frameRate(6); 随机色彩：var h = random(0, 360); fill(h,160,160);
第三个部分就是字体了，确定字体位置，颜色，字形，大小，字间距等，参考了 https://github.com/processing/p5.js/wiki/Beyond-the-canvas 又百度了一下字形及字间距参数做出修改。

手绘与码绘异同比较

技法方面

同：对图形的认知，色彩感知搭配，对美的认知
异：码绘实现动态图需要循环语句，让它动起来；手绘则需要一帧一帧画出。

创作体验

同：都花费一定时间获得成果
异：码绘只需要编写一些代码，就能实现圆点的随机生成，颜色的规律变化，每秒帧数的调整等，而手绘每一帧都要自己绘制，每个圆点都要挨个画出，很繁琐，码绘的GIF有40多帧，而手绘我只画了9帧，手绘工作量大，而且我画的还不好看，最后一帧还有问题，很难受。

显现效果

同：动态变换
异：码绘帧数多，显现更流畅，每个圆点色彩都会改变；手绘帧数少，看起来不流畅，每个圆点色彩固定。

局限性

码绘对于有有一定规律，且由基本几何组合而成图形有优势，无规律且线条流畅的复杂绘画则难以实现；手绘可以随心所欲展现你想画的人物，景色等，但是对于规模大的规律图形，手绘工作量大且枯燥繁琐，动态图逐帧绘制耗时巨大。

参考资料

https://p5js.org/zh-Hans/examples/simulate-snowflakes.html
https://p5js.org/zh-Hans/examples/color-radial-gradient.html
https://github.com/processing/p5.js/wiki/Beyond-the-canvas