趣味绘画：码绘与手绘
绘画
绘画其实对于我这种完全没有任何绘画天分和连颜色都分辨不是很清楚的人来说，简直是不能再无聊了，但是既然有关于这个的课程，那自然也是不能逃避了。绘画在我看来就是一种主观性情感的客观表达。对于写实派，可能他们表达的比较让你能够接受，让你能够理解，而对于抽象派，他们的表达就显得不是那么容易理解，但是他们却都是有着自己的情感在一幅幅作品之中。
而就我而言，没有很大兴趣的话，我还是尽量表现得简单一些的绘画内容就行。
整体过程
简单手绘
用的还是静态篇所画的图，极其简单的那张：
但是因为要考虑到后面要做动态的，而这个过于简单，没有太多空间能够做动态，所以就简单的加了身体和四肢，大概就是这个样子吧：
呵，丑到没话说。
码绘还原
因为我所画的图形都是很简单的图形（圆形，椭圆形，直线），所以用代码画起来就很简单了
成品就是这个样子：
所以代码的话也是很简单：
//画身体
ellipse(300+x,400+y,180,250);
//左手
fill(0);
var a =line(218+x,350+y,180+x,425+y);
fill(255);
var b=ellipse(175+x,435+y,25,25);
//右手
fill(0);
var a=line(382+x,350+y,344+x,425+y);
fill(255);
var b=ellipse(339+x,435+y,25,25);
//左腿
fill(0);
var a=line(260+x,512+y,260+x,581+y);
fill(255);
var b=ellipse(260+x,591+y,30,30);
//右腿
fill(0);
var a=line(340+x,512+y,340+x,581+y);
fill(255);
var b=ellipse(340+x,591+y,30,30);
fill(255);// 填充白色
// 1 画脸
strokeWeight(2);
ellipse(300+x,220+y,200,200);// 圆圈
// 2 左眼
fill(0);
ellipse(260+x,200+y,50,50);// 另一个圆圈
// 3 右眼
ellipse(340+x,200+y,50,50);
fill(255);// 填充黑色
// 5 左眼珠
ellipse(260+x,200+y,10,20);
// 6 右眼珠
ellipse(340+x,200+y,10,20);
fill(0);
ellipse(260+x,200+y,8,8);
ellipse(340+x,200+y,8,8);
//鼻子
ellipse(300+x,230+y,10,10);
line(300+x,230+y,300+x,260+y);
noFill();
arc(300+x,260+y,30,15,TWO_PI, PI);
//耳朵
fill(0);
ellipse(220+x,120+y,60,60);
ellipse(380+x,120+y,60,60);
手绘动态性体现
就动态性而言，手绘想要实现动态性的画，其实并没有那么容易，需要画好多张在一起进行体现，或者是画出动态的趋势。由于我的图形较简单，所以并没有采用画很多张的方法，直接画两笔当作是简单的动态趋势即可。
可以很明显的看出是相当简单和敷衍了。
码绘动态性体现
由上面的手绘动态大概做出的动态是熊猫在行走，但是在网页里面，因为它必须要出现在屏幕里面，所以它的活动空间并没有那么多，这就需要边缘检测来控制熊猫不走出屏幕外面，即判断x的坐标是不是在0-innerWidth里面和y坐标是不是在0-innerHeight里面，那么对熊猫的手和脚怎么进行控制呢？我的做法是画出每个肢体画出五个点的位置，然后依次循环动作，那么就会形成行走的效果，实现这一效果的代码如下：
//参数里面的i是判断手臂应该或者脚应该画在哪个位置
//x,y是人物移动的参数
//左手
function lefthand(x,y,i){
if (i==0||i==9)
{
fill(0);
line(218+x,350+y,180+x,425+y);
fill(255);
ellipse(175+x,435+y,25,25);
}
if (i==1||i==8)
{
fill(0);
line(218+x,350+y,199+x,440+y);
fill(255);
ellipse(194+x,450+y,25,25);
}
if(i==2||i==7)
{
fill(0);
line(218+x,350+y,218+x,450+y);
fill(255);
ellipse(218+x,459+y,25,25);
}
if (i==3||i==6)
{
fill(0);
line(218+x,350+y,237+x,440+y);
fill(255);
ellipse(237+x,450+y,25,25);
}
if (i==4||i==5)
{
fill(0);
line(218+x,350+y,256+x,425+y);
fill(255);
ellipse(261+x,435+y,25,25);
}
}
//右手
function righthand(x,y,i){
if (i==0||i==9)
{
fill(0);
line(382+x,350+y,420+x,425+y);
fill(255);
ellipse(425+x,435+y,25,25);
}
if (i==1||i==8)
{
fill(0);
line(382+x,350+y,401+x,440+y);
fill(255);
ellipse(406+x,450+y,25,25);
}
if (i==2||i==7)
{
fill(0);
line(382+x,350+y,382+x,450+y);
fill(255);
ellipse(382+x,459+y,25,25);
}
if (i==3||i==6)
{
fill(0);
line(382+x,350+y,363+x,440+y);
fill(255);
ellipse(363+x,450+y,25,25);
}
if (i==4||i==5)
{
fill(0);
line(382+x,350+y,344+x,425+y);
fill(255);
ellipse(339+x,435+y,25,25);
}
}
//左腿
function leftleg(x,y,i){
if (i==0||i==9)
{
fill(0);
line(260+x,512+y,274+x,580+y);
fill(255);
ellipse(275+x,590+y,30,30);
}
if (i==1||i==8)
{
fill(0);
line(260+x,512+y,267+x,590+y);
fill(255);
ellipse(267.5+x,595+y,30,30);
}
if (i==2||i==7)
{
fill(0);
line(260+x,512+y,260+x,581+y);
fill(255);
ellipse(260+x,591+y,30,30);
}
if (i==3||i==6)
{
fill(0);
line(260+x,512+y,254+x,590+y);
fill(255);
vellipse(252.5+x,595+y,30,30);
}
if (i==4||i==5)
{
fill(0);
line(260+x,512+y,246+x,580+y);
fill(255);
ellipse(246+x,590+y,30,30);
}
}
//右腿
function rightleg(x,y,i){
if (i==0||i==9)
{
fill(0);
line(340+x,512+y,326+x,580+y);
fill(255);
ellipse(325+x,590+y,30,30);
}
if (i==1||i==8)
{
fill(0);
line(340+x,512+y,333+x,590+y);
fill(255);
ellipse(332.5+x,595+y,30,30);
}
if (i==2||i==7)
{
fill(0);
line(340+x,512+y,340+x,581+y);
fill(255);
ellipse(340+x,591+y,30,30);
}
if (i==3||i==6)
{
fill(0);
line(340+x,512+y,347+x,590+y);
fill(255);
ellipse(347.5+x,595+y,30,30);
}
if (i==4||i==5)
{
fill(0);
line(340+x,512+y,354+x,580+y);
fill(255);
ellipse(355+x,590+y,30,30);
}
}
大概就是这个样子：
然后因为要走，所以熊猫本身的位置肯定是要变的，那么这个时候就需要有有一个变量控制它的移动的快慢，我用到了Vx,Vy来控制它的移动。
var Vx=0;
var Vy=0;
x+=Vx;
y+=Vy;
那么不能让熊猫走得超出范围，就是要在走到边缘的时候换个方向走，那就是:
//因为我是以熊猫的脸中心为原点进行加减的，所以需要减去一定的宽度才能让熊猫整个身体都在屏幕里面
if (x>innerWidth-420||x<-180)
Vx=-Vx;
if(y>innerHeight-620||y<-80)
Vy=-Vy;
因为熊猫的活动显得太单调，所以我加点交互的东西，让它的行走变得可以控制，最后结果因为动图太大放不下，可以看点击文末链接查看。
手绘与码绘之比
其实这样慢慢做完下来，渐渐也会发现手绘与码绘之间的一些共同点和不同点，首先不同点有：
1.手绘的过程更加直观，动手就能看见；码绘则需要完整的代码描述才能看见，实时性差，调整起来就比较麻烦；
2.手绘更重要的是在于画面的处理（虽然我并没有体现），而码绘注重的代码的精度问题，因为越精确，离自己想画的图才会越来越相近。
3.手绘的工具有时可能会很多，各种笔，而码绘用到的工具也会很多，但是都是各种函数(比如p5.js里面的各种绘图函数)，计算，都不是实物，最多再要个普通纸笔。
4.呈现的效果来看，手绘对于专业技术要求更高，需要有很好的水平才能有较好的呈现效果，但是码绘的话就提供了一个比较低的门槛，毕竟都是通过代码进行绘画，就不需要有很专业的技法。
5.手绘的话就需要很多的实物资源，水平不好的人可能得浪费好多资源，但是码绘就比较节约资源了，毕竟只是在代码框里面进行修改。
6.相对而言，码绘有动态性的优势，不需要画很多次。
等等
相同点：
1.最后都会呈现出自己的成果，无论满意否，都是自己所得
2.都是先进行整体构思，然后再从局部细节开始细化而成
3.最后的作用都是欣赏所用啊
最终效果演示与代码
效果演示链接 （显示很慢）
完整代码
效果演示图
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
