码绘VS手绘（一）编程与手绘的对比

前言

本文主要讲解在静态图方面如何分别通过手绘和码绘两种方式来表现，以及它们之间的差异与联系，谨以此博客记录学习过程。博主新手一枚，这是博主第一次写博文，若有不足之处，还请温柔拍打~~（笔芯~~）

手绘

在绘画之前，我们需要进行准备工作，准备素描纸、彩铅、铅笔；准备工作做好之后，我们需要想好构图，比如图中我先确定每一个图案大致位置，伞放在素描纸的右边，两个轮子在中下位置，且两个轮子大小不同，但是在画画过程中我没有具体确定两个轮子的具体比例，就凭感觉画；字体放在大轮子的左上方，四周散落大小位置都随机的气泡；然后开始设定整幅图的色彩，添上自己喜欢的色彩，在画气泡的时候，为了突出光影效果，给气泡留了高光（但仍然丑得很…）。

码绘

相比手绘来说，码绘比较客观。

准备工作，准备大小为1000×500的画布。

function setup() {
createCanvas(1000, 500);
}

开始画画，用draw函数开始进行画画，draw函数一般会调用多次，每调用一次，画一帧，也就是一幅图，图是实时更新的，默认每秒60次。

function draw() {   // put drawing code here    back();   Circle(400,400,180,180);   Circle(650,400,150,150);     umbrella();word(); }
functi

在draw函数中，使用调用子函数来画我们图片的每一个部分，我们先画出背景主要是气泡，再画两个轮子，要注意顺序，因为可能有遮挡关系。

function back(){  fill('rgba(111,222,173,0.5)');      ellipse(400, 50, 20,20);fill('rgba(151,100,173,0.5)');       ellipse(300, 60, 40,40);fill('rgba(221,100,133,0.5)');      ellipse(500, 100, 80,80);fill('rgba(100,221,133,0.5)');      ellipse(100, 400, 90,90);fill('rgba(70,221,73,0.5)');      ellipse(160, 350, 30,30);fill('rgba(221,221,73,0.5)');       ellipse(950, 450, 30,30);fill('rgba(221,221,30,0.5)');      ellipse(800, 470, 10,10);}

在画背景时，可以看到，为了能够让气泡处于不同位置，我们需要定义位置进行精确定义，ellipse(800, 470, 10,10);相当于使用圆规定点定尺寸画出一个圆，为了能够让气泡色彩更丰富，使用fill(‘rgba(221,221,73,0.5)’);相当于我们的彩铅，然后就可以画出气泡了。

对于画轮子、伞与字来说，是同样的方法。

function word()
{
fill('rgba(230,173,162,1.0)'); textSize(20);  textStyle(ITALIC); text('Happy everyday',200 , 300);}

不过在画轮子时，我们只需要轮子大小位置改变，而不需要改变形状，就可以定义函数有关圆心半径的参数，改变大小时，只需要改变参数即可，就比较方便。

 function Circle(x,y,w,h)  {   //外廓   fill('rgba(230,163,162,1.0)');    ellipse(x, y, w, h);   fill('rgba(221,221,173,0.5)');     w1=w-20;    h1=h-20;    ellipse(x, y, w1, h1);fill('rgba(220,173,162,1.0)');    ellipse(x, y, 1/7*w,1/7* h);   fill('rgba(150,173,255,1.0)');   ellipse(x, y, 1/9*w,1/9* h);//   line(x-1/2*w1,y,x+1/2*w1,y);    line(x,y-1/2*h1,x,y+1/2*h1);        line(x-0.707*1/2*w1,y+0.707*1/2*h1,x+0.707*1/2*w1,y-0.707*1/2*h1);    line(x-0.707*1/2*w1,y-0.707*1/2*h1,x+0.707*1/2*w1,y+0.707*1/2*h1);}

画伞时，要注意伞柄与伞帽的绘画顺序。

function umbrella()
{
translate(-50, 0, 0)   //伞柄
fill(102);   rect(900, 180, 10, 300,5,5,20,20);   fill('rgba(162,173,222,1.0)');   arc(900, 200, 300, 280, PI, TWO_PI);    fill(255);      arc(775, 200, 50, 30, PI, TWO_PI);    arc(825, 200, 50, 30, PI, TWO_PI);    arc(875, 200, 50, 30, PI, TWO_PI);   arc(925, 200, 50, 30, PI, TWO_PI);    arc(975, 200, 50, 30, PI, TWO_PI);    arc(1025, 200, 50, 30, PI, TWO_PI);//point    fill('rgba(142,143,240,0.35)');    ellipse(900, 50, 20,20);}

完整代码：

function setup() {
createCanvas(1000, 500);
}
function draw() {   // put drawing code here    back();   Circle(400,400,180,180);   Circle(650,400,150,150);     umbrella();word(); }
function word(){
fill('rgba(230,173,162,1.0)');
textSize(20);
textStyle(ITALIC); text('Happy everyday',200 , 300);}    function Circle(x,y,w,h)  {
//外廓    fill('rgba(230,163,162,1.0)');   ellipse(x, y, w, h);    fill('rgba(221,221,173,0.5)');     w1=w-20;   h1=h-20;    ellipse(x, y, w1, h1);fill('rgba(220,173,162,1.0)');ellipse(x, y, 1/7*w,1/7* h);ffill('rgba(150,173,255,1.0)');    ellipse(x, y, 1/9*w,1/9* h);line(x-1/2*w1,y,x+1/2*w1,y);    line(x,y-1/2*h1,x,y+1/2*h1);        line(x-0.707*1/2*w1,y+0.707*1/2*h1,x+0.707*1/2*w1,y-0.707*1/2*h1);   line(x-0.707*1/2*w1,y-0.707*1/2*h1,x+0.707*1/2*w1,y+0.707*1/2*h1);}
function umbrella(){       translate(-50, 0, 0)    fill(102);    rect(900, 180, 10, 300,5,5,20,20);    fill('rgba(162,173,222,1.0)');    arc(900, 200, 300, 280, PI, TWO_PI);    fill(255);      arc(775, 200, 50, 30, PI, TWO_PI);    arc(825, 200, 50, 30, PI, TWO_PI);    arc(875, 200, 50, 30, PI, TWO_PI);    arc(925, 200, 50, 30, PI, TWO_PI);    arc(975, 200, 50, 30, PI, TWO_PI);    arc(1025, 200, 50, 30, PI, TWO_PI);//point    fill('rgba(142,143,240,0.35)');    ellipse(900, 50, 20,20);}
function back(){ fill('rgba(111,222,173,0.5)');       ellipse(400, 50, 20,20);fill('rgba(151,100,173,0.5)');       ellipse(300, 60, 40,40);fill('rgba(221,100,133,0.5)');       ellipse(500, 100, 80,80);fill('rgba(100,221,133,0.5)');       ellipse(100, 400, 90,90);fill('rgba(70,221,73,0.5)');       ellipse(160, 350, 30,30);fill('rgba(221,221,73,0.5)');      ellipse(950, 450, 30,30);fill('rgba(221,221,30,0.5)');      ellipse(800, 470, 10,10);}

那到底码绘与手绘两者区别与联系是什么，可以从以下几个方面来考虑：

两者比较

(1）思路

手绘绘图要先准备好画具，然后想好构图，每个图在整张纸的大概位置，然后是具体绘画的物体比例，远近关系，以及绘画的先后顺序，然后开始画线条，最后上色；代码绘图也需要较为连贯的顺序，先创建画布，不过绘画某些物体时，一定要按照先后顺序，否则出来的效果会不同，所以也要确定绘画的物体的先后顺序，且画之前要先上色，绘画时分模块，在子函数画好后，用绘图函数调用，最后显示。

（2）技术

代码绘图，要掌握一些绘图函数，以及其中参数的运用，要能写代码，懂得代码的模块与流程，画一些复杂的图，可能还要自己编写函数；手绘绘图，需要绘画的工具，本次绘画用了圆规、纸、彩铅、橡皮擦、铅笔，这次绘画比较简单的图，也不需要特别好的技巧，能画线条上色就行。

（3）创作偏好

个人比较喜欢手绘绘图，手绘绘图灵活便捷；代码绘图时，如果对某些函数不熟悉，可能会限制创作，不过代码绘图运用方面广，可以运用到某些软件等等。

（4）创作体验

手绘绘图灵活方便，主观影响性较大，一些个人技法的运用不受限制，小灵感来了，也能及时记录下来，受众广泛，不过要想画出好看的图，还是需要一些时间来训练技巧；用p5.js代码绘图简单，入门快，比较客观，可以直接调用现成的函数，画一些简单的图，还是比较容易掌握，函数的熟练运用比较难，特别是一些自己算法的编写，还有代码调整比较麻烦，有时候会出现与自己预料不一样的结果。

以上，就是此次作画过程中，我个人的体验了~

参考资料：

《用代码画画》：(https://blog.csdn.net/magicbrushlv/article/details/77922119)
开始第一幅码绘—以编程作画的基本方法：[https://blog.csdn.net/magicbrushlv/article/details/77840565]
以编程的思想来理解绘画—— （一）用”一笔画“表现“过程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189