手绘与码绘————静态对比

手绘与码绘——静态对比

画画的工具不仅仅是纸和笔，还有屏幕和代码~
下面分别通过纸笔和代码来绘制同一幅图，我们将在最后比较两者的区别。
绘画的主角就是这位：

手绘

（只是大概描了一下轮廓）

码绘

这是用P5.js绘制的上色版，已经和原版非常像了。
下面贴上P5.js的代码

function setup() {
  createCanvas(410, 420);
  background(220);
}

function draw() {
  
	//define the weight of the brush
  strokeWeight(2);
  
  //all colors needed
  var r1 = color(219, 38, 29);//red
  var r2 = color(152, 2, 1);//brown
  var r3=color(253,152,0)//orange
  var y = color(253, 241, 17);//yellow
  var grey = color(169, 169, 169);//grey
  var b = color(0, 148, 220);//blue
  var w = color(255, 255, 255);//white
  var black = color(0, 0, 0);//black
  
  //face outline
  fill(b);
  ellipse(200, 200, 350, 340);
  fill(w);
  ellipse(200, 233, 285, 274);
  
  //ring bell
  fill(r1);
  rect(100, 355, 200, 20);
  ellipse(100, 365, 20, 20);
  ellipse(300, 365, 20, 20);
  fill(y);
  ellipse(200, 378, 50, 50);
  rect(175, 372, 50, 5);
  fill(grey);
  ellipse(200, 386, 18, 18);
  fill(black);
  rect(199, 395, 1, 8);
  
  
  //eyes
  fill(w);
  ellipse(165, 100, 64, 80);
  ellipse(230, 100, 64, 80);
  
  resetMatrix();
  translate(155, 90);
  bezier(10, 10, 20, 0, 20, 0, 30, 10);
  resetMatrix();
  translate(195, 90);
  bezier(10, 10, 20, 0, 20, 0, 30, 10);
  resetMatrix();

  //nose
  fill(r1);
  ellipse(198, 145, 35, 35);
  fill(w);
  ellipse(193, 138, 9, 9);

  //mouth
  fill(black);
  line(198, 162, 198, 222);
  line(96,221,304,221);
  line(96,222,304,222);
  
  //mouth outline bezier
  fill(r2);
  resetMatrix();
  translate(5, 133);
  beginShape();
  vertex(90, 90);
  bezierVertex(90, 230, 300, 230, 300, 90);
  endShape();
  resetMatrix();
  
  //tongue bezier
  //bottom
  fill(r3);
  resetMatrix();
  translate(55, 195);
  beginShape();
  vertex(75, 90);
  bezierVertex(90, 150, 200, 150, 215, 90);
  endShape();
  resetMatrix();
  //right face  
  fill(r3);
  resetMatrix();
  translate(55, 195);
  beginShape();
  vertex(75, 90);
  bezierVertex(75, 60, 130, 60, 145, 90);
  endShape();
  resetMatrix();
  //left face       
  fill(r3);
  resetMatrix();
  translate(55, 195);
  beginShape();
  vertex(215, 90);
  bezierVertex(215, 60, 160, 60, 145, 90);
  endShape();
  resetMatrix();
  

	//beard 
  //right face bezier beard
  fill(w);
  resetMatrix();
  translate(275, 131);
  beginShape();
  vertex(0, 60);
  bezierVertex(30, 30, 60, 60, 30, 90);
  endShape();
  resetMatrix();
  //left face bezier beard
  fill(w);
  resetMatrix();
  translate(65, 131);
  beginShape();
  vertex(60, 60);
  bezierVertex(30, 30, 0, 60, 30, 90);
  endShape();
  resetMatrix();
	//straight beards
  fill(black);
  beginShape(LINES);
  //right face straight beards
  vertex(160, 180);
  vertex(75, 180);
  vertex(160, 170);
  vertex(75, 150);
  vertex(160, 190);
  vertex(75, 210);
  //left face straight beards
  vertex(240, 180);
  vertex(325, 180);
  vertex(240, 170);
  vertex(325, 150);
  vertex(240, 190);
  vertex(325, 210);
  endShape();


}

在这次尝试中我没有封装函数，所以代码显得有点长。不过这在某种意义上也算是模拟了手绘的流程。
总的来讲，多啦A梦就是由圆，矩形，以及直线和贝塞尔曲线绘制的。

手绘与码绘的区别

下面我将从四个方面讲讲两者的区别

思路异同:

手绘和编程绘制的大体思路是一致的，都是先准备一块画布，然后用画笔在画布上进行绘制。
在具体绘制的思路上有一点区别，我用程序画画的时候思维是分层的，多啦A梦的绘图顺序是脸-铃铛-眼睛-嘴巴-胡须，拿脸打比方，就是先画一个大的蓝色的圆再画一个小的白色的圆；但在手绘时就不一样了，虽然我手绘的顺序和程序相同，但是我也可以选择胡须-眼睛-铃铛-嘴-脸这样的奇葩顺序，效果是一样的（只要能画出来）。总的来说，编程画画需要按照这门语言的思路来画，自己手绘就没有什么条条框框（前提是技术过硬）。

技术：

如果说技术上有什么相同的话，就是都需要绘图的“工具”，编程要各种函数和算法，手绘需要学会各种画法和掌握画笔和颜料的使用方法。
编程画画实质是对电脑屏幕像素的精确操作，画一条线或者画一个圆都是用一些具体的算法实现的，比如说这次画的多啦A梦的嘴巴就是用贝塞尔曲线绘制并填色的。这些算法组成的语言——比如p5.js——可以让一个没有学过画画的普通人在电脑上画出非常复杂且非常精确的图案，而他唯一要做的就是查文档敲代码，或者加一点复杂的算法。
编程绘画是精确可控的，手绘要画好就需要经验的积累和灵感的迸发，他更依赖个人的长时间的绘画训练。像素描，对初学者而言画一条笔直的线都是一件不容易的事，但用代码实现则轻轻松松。
总的来说，程序绘画入门更加“亲民”，手绘入门困难，不进则退。

创作体验：

程序画画很精确，填色很均匀，更多的时间都是用来计算相对位置，实际花费的精力不多，但是“反馈”不是很好，成就感不多；手绘对我这种初学者来讲很难，线条不能一次画好，需要反复修改，但是一旦完成了一副作品，会有很大的满足感。

创作偏好：

如果我从小就学习画画，我肯定更喜欢手绘，因为手绘有一种逍遥自在的感觉，作品完成后很有满足感；不过我现在属于技术专业，没有什么时间去学习手绘，所以代码绘制更加适合我。这一次的创作之所以没有成就感可能是因为我使用的函数不是很多，有很多想法无法通过代码来实现。我看过很多用技术实现的艺术品，比如说分形图案就有谢尔宾斯基地毯，Koch雪花等，是纯粹用算法实现的。正如绘画有水墨、素描等画法，程序绘画也有数不尽的绘制算法，个人掌握的方法越多，也就越能将头脑中的想法在现实中显现。