用p5.js实现的码绘与手绘的比较（动态）

上篇：用p5.js实现的码绘与手绘的比较（静态）https://blog.csdn.net/wangyouxu24/article/details/84330665

一、编程实现的动态效果

效果图

在这个借由p5.js实现的效果里，背景由在一定范围内随机变化的圆组成（这里参考了OpenProcessing上的代码），中间的眼睛可以随着鼠标在固定区域内转动。
主要代码

//绘制背景
for(var i=0;i<n;i++)
{    var theta = 2.39996*i;    var r = myscale*sqrt(i);    noStroke();    var s = i/float(n);    fill(-40+2.0*s,1-2.0*s, 0.3 + s );    var d = myscale*(4-r/120+ 5*noise(r+t));    ellipse(0.5*width + r*sin(theta),0.5*height + r*cos(theta), d, d);
}

绘制背景时用到了周期性变化和柏林噪声来控制圆的颜色位置大小变化（具体代码可参考https://www.openprocessing.org/sketch/388111）。

//眼睛上会动的线
for(var i=0;i<3;i++){stroke(-20,0.2,0.6+0.1*i);
strokeWeight(3.5-i);
noFill();
bezier(0, height/2, width/3+20, height/2+i*20+120*noise(i+t+2), width/3*2-20, height/2+100+i*20+120*noise(i+t+3), width,height/2);
bezier(0, height/2, width/3+20, height/2-100-i*20-120*noise(i+t), width/3*2, height/2-i*20-120*noise(i+1+t), width,height/2);
}

依旧用noise()来控制随机变化

//眼珠随鼠标转动
function ball(){  noStroke();    var distance=sqrt((mouseX-0.5*width)*(mouseX-0.5*width)+(mouseY-0.5*height)*(mouseY-0.5*height));  var ax,ay;  if (distance<85){ax=mouseX;ay=mouseY;}else{ax=85*(mouseX-0.5*width)/distance+0.5*width;ay=85*(mouseY-0.5*height)/distance+0.5*height;}bx=(ax-0.5*width)/85*40+0.5*width;by=(ay-0.5*height)/85*40+0.5*height;fill(-20,0.35,0.35);ellipse(bx,by, 120, 120);fill(-30,0.05,0.8);  ellipse(ax,ay, 30, 30);}

实现的过程没有什么复杂的算法，很容易理解。

二、手绘实现的效果

三、手绘与码绘的比较

呈现效果
用代码生成的动态效果，可以根据使用者的操作来进行实时交互；而手绘的图几乎不能进行交互，形成动态也比代码麻烦的多。
工具
码绘所用的工具多是编辑器，通过键盘输入的方式进行绘制；手绘的工具更复杂和多样化，狭义的包括纸、笔、颜料等，广义的则还包括数位板等电子设备。
绘制过程
在进行手绘的时候很少有人会确切的计算坐标，感觉上合适就可以了，动态过程较难呈现。码绘则要求非常明确的坐标指定，且从编程角度来说，实现图片随时间变化的效果是很容易的。
局限性
码绘不能实现很复杂的图案的动态化，过于复杂毫无数学规律的动图的实现只能靠手工绘制；手绘的过程较麻烦，难保证动态前后一些规律组件的一致性，且交互性差。
应用
综上所述，码绘成果适合应用在有数学规律可循，图案要求较规整，可交互的地方；手绘适合应用在随意性大，图案要求较复杂的地方。

四、参考资料

1.《用代码画画》：
0.1 用代码画画——搞艺术的学编程有啥用？
https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 开始第一幅“码绘”——以编程作画的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
2. 以编程的思想来理解绘画—— （一）用”一笔画“表现“过程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189
3. OpenProcessing:
https://www.openprocessing.org/https://www.openprocessing.org/