最近在老师的带领深入学习研究了手绘与码绘啊。
话不多说，直接上图。
enmmm.....我知道这图不怎么样，有点沙地奥，但我们的主要目的是感受手绘与码绘的不同创作体验啊！
码绘我这次用的是p5.js
主要代码如下：
sketch.js
function setup() {
createCanvas(720, 480);
strokeWeight(2);
ellipseMode(RADIUS);
}
function draw() {
background(225,250,250);
// Neck
stroke(102); // Set stroke to gray
line(245, 277, 245, 163); // Left
line(315, 277, 315, 163); // Right
// Body
noStroke(); // Disable stroke
fill(255,127,36);
rect(220, 230, 120, 120); // Main body
fill(139,90,43); // Set fill to gray
rect(220,270,120,3); //
rect(220,310,120,3);
//grass
fill(0,255,0);
triangle(40,480,70,480,55,440);
triangle(70,480,100,480,85,440);
triangle(100,480,130,480,115,440);
triangle(130,480,160,480,145,440);
triangle(160,480,190,480,175,440);
triangle(220,480,190,480,205,440);
triangle(220,480,250,480,235,440);
triangle(280,480,250,480,265,440);
triangle(280,480,310,480,295,440);
triangle(310,480,340,480,325,440);
triangle(340,480,370,480,355,440);
triangle(370,480,400,480,385,440);
triangle(400,480,430,480,415,440);
triangle(460,480,430,480,445,440);
triangle(460,480,490,480,475,440);
triangle(490,480,520,480,505,440);
triangle(520,480,550,480,535,440);
triangle(550,480,580,480,565,440);
triangle(580,480,610,480,595,440);
triangle(610,480,640,480,625,440);
// Head
noStroke(); // Disable stroke
fill(121,205,205); // Set fill to black
ellipse(280, 90, 80, 80); // Head
fill(255); // Set fill to white
beginShape();
vertex(50, 420);
vertex(100, 390);
vertex(110, 360);
vertex(80, 320);
vertex(210, 360);
vertex(160, 380);
vertex(200, 390);
vertex(140, 400);
vertex(130, 420);
fill(139,71,38);
endShape();
fill(0);
ellipse(155, 360, 8, 8);
// Right creature
beginShape();
vertex(470, 420);
vertex(460, 390);
vertex(390, 380);
vertex(440, 370);
vertex(380, 350);
vertex(520, 310);
vertex(490, 350);
vertex(510, 390);
vertex(560, 420);
fill(205,104,57);
endShape();
fill(0);
ellipse(445, 350, 10, 10);
}index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
手绘是用电脑自带的画图软件一笔一笔画出来的，真的很不容易啊！！
下面就是长篇大论的分析报告了：
编程与手绘的对比
首先在思路方面，编程与手绘都要先有个整体的创作思路与逻辑。尤其编程，注重一步一步的实现过程。绘画比较感性，风格也多样，可以随性创作。
编程的技术与手绘的技术，在我看来，虽然技术类型不同，但都不简单。编程绘画需要的是电脑编程的技术以及对绘图编程软件的使用。编程技术有多种语言与软件，首先得掌握编程语言，在此基础上进行绘画与创作。手绘不仅需要创作者的灵感，也需要一定的绘画技术。扎实的基本功与优秀的绘画技巧和技术才能更好的通过手绘表达作者所思所想。手绘通常是作者设计思想初衷的体现，通过心、眼、手的结合，瞬时抓住环境带来的灵感，及时捕捉作者内心瞬间的思想火花，可以生动、形象地记录下作者的创作灵感与激情，并使之融入到作品之中。因此手绘的特点是能比较直接地传达作者的设计理念，作品生动、亲切，有强烈的感情融入到作品之中。手绘的作品有很多偶然性，这也正是手绘的魅力所在。
创作时，编程绘画的优势体现在设计精确，效率非常高。因为电脑设计非常精确，可以很轻易的精确到作品的任何一个部分，不论你是大师还是普通人，都可以做到。比如在没有电脑介入之前，如果想要在一个人物像上作出黄金分割比例，没有一定的基础和能力之前，是很难做到的，但是如今在电脑设计介入后，就成了一个很简单的问题，简单操作，简单的公式，就可以做到。编程绘画效率高，而且便于更改。因为电脑可以复制模板，可以把一个作品通过修改，变成各种各样的衍生品，也可以把出现错误或不合适的地方，进行修改，重新保存即可以，哪里不合适就改哪里，不需要重新来做。而且操作非常便捷，比如，变颜色，改变线条，只需要改写代码就能完成。还可以改变作品的透视关系等。
手绘是编程绘图的审美表现基础,手绘表现图更应该引起重视,手绘表现图能比较直接地传达作者的设计理念,作品生动、亲切,有一种回归自然的情感因素。另外,手绘设计的作品有很多偶然性,这也正是手绘的魅力所在。而且更能充分的体现设计者的艺术情趣、个性,创作者那闪动的思维与灵感可以随意的通过笔端记录下来,它的便捷性是编程绘图无法取代的,但手绘图不适宜表现形体复杂的场面宏大的设计,尤其是逼真性不如电脑绘图强,且不宜改动。
编程绘图是通过电脑显示屏、鼠标、键盘代替画笔、画板、绘图仪器等,通过绘图软件、建模、贴图、视图渲染、三维动画设计等一系列的精确运算完成的,编程绘图与手绘图相比具有透视准确、材料质感逼真、可随意调换视角,可多次反复修改的优点,与人交流更直观,尤其是画大场面的较复杂的重复性设计更见优势,但是，画面呆板缺少人情味,艺术个性不强,随意表达性差。但随之而来的缺憾是进行某些方面的创作时，难免比较呆板、冰冷，缺少生气，不利于进行更好的交流。比如，随意在纸上画一朵花，手绘速写很容易,而用电脑编程画出来就很难。
手绘和电脑设计之间的许多问题都是互补的，手绘需要有深厚的美术基础、艺术底蕴，而电脑设计则需要扎实的电脑基础作为支撑，所以手绘与电脑设计各自都有自己的优劣势，虽然各自都能完成许多独立的工作，但是有时候会出现许多不该出现的困难，这就是要求我们最好要学会两种方法相结合起来，不仅需要较强的绘画功底,还需要不断练习来提高自己的编程水平。只有强强联合，取长补短才能创作出大量精品。
OK, there's over! I'm done~