主题

展示如何将一幅手绘作品，用代码绘制出来。
通过手绘与码绘过程及结果的比对，探究手绘及码绘各自的优缺点。

手绘展示

在没有确定自己要画什么的时候，抓起笔，脑袋里还是一滩浆糊，在明确自己想要绘制的大致图像后，我们便能思路清晰的开始绘制。
这里我使用了多种工具，先是使用铅笔画草稿，然后用水性笔勾线，然后用不同颜色的水笔及马克笔进行上色。
因为没有直尺和圆规，手中水笔和马克笔的颜色也不够，所以并没有准确的绘制出构想的图像。
在这里插入图片描述

码绘展示

有了手绘提供的思路，我们可以顺利的开始码绘。
码绘的时候，我们便没有了缺少工具的烦恼。几行代码便可以画出一个笔直的直线、一个标准的圆形，一个心仪的颜色……
在这里插入图片描述

码绘代码

编码使用的p5.js进行码绘，以下为绘制的代码。

// 函数setup() : 准备阶段
function setup() {
// 创建画布，宽度640像素，高度480像素
// 画布的坐标系统为，左上角坐标为（0，0），
// x方向水平向右，y方向垂直向下，单位像素
createCanvas(640,480);
}

// 函数draw()：作画阶段
function draw() {
fill(255,190,140);// 填充肤色
// 1 画脸
ellipse(320,240,200,200);// 圆圈
fill(255);//填充白色
// 2 左眼
ellipse(280,240,50,50);// 另一个圆圈
// 3 右眼
ellipse(360,240,50,50);
fill(250,40,80);//填充粉色
// 4 嘴巴
ellipse(320,310,40,80);
fill(0);// 填充黑色
//左眉毛
ellipse(290,200,20,10);
//右眉毛
ellipse(350,200,20,10);
//填充蓝色
fill(0,120,255);
// 5 左眼珠
ellipse(300,240,20,20);
// 6 右眼珠
ellipse(340,240,20,20);
// 7 头发：从左到右画一排竖线
//line(260,180,260,100);
//line(280,180,280,100);
line(300,180,300,100);
line(320,180,320,100);
line(340,180,340,100);
//line(360,180,360,100);
//line(380,180,380,100);
fill(255,0,0);//填充
//左脸蛋
ellipse(240,280,60,30);
//右脸蛋
ellipse(400,280,60,30);
}

总结

通过手绘及码绘过程的体验以及成果的对比，我们可以发现手绘和码绘有许多相似之处，也能较为明显的感受到那两种绘制方式在不同方面体现出的优缺点。
我们从各个角度来一次分析。

思路

不论是编程还是手绘，在画图之前都要构思好绘图思路，明确自己要画什么，怎么画，画图顺序是什么，才能开始编写代码或者下笔。

技术

编程绘图对于绘图者技术要求不高（绘制精美图案除外），只需要掌握绘图所需的函数，并且编写语句利用函数画图即可，不需要过多的练习；而手绘需要绘图者本身技术能够将构思好的图案准确用笔纸画出，需要长期的练习。
例如，画一个圆，利用编程只需要编写一行ellipse函数就能准确将圆画出；而手绘则需要慢慢描摹慢慢练习，才能将一个圆画的标准。

创作体验

编程画圆、填充色彩非常方便并且准确，而手绘画圆则很难画的规则，上色也颇为麻烦，并且容易上色不均匀。

创作偏好

绘制规范型图形偏向用编程绘制，绘制边界不规则的图形则通过手绘更为高效和准确。

【用代码画画】手绘vs码绘