码绘VS手绘（二）如何让让静态图“动”起来

前言

在上一篇码绘VS手绘（一）编程与手绘的对比中，我们了解了有关码绘与手绘在静态图方面的比较，本文主要讲解如何分别通过手绘和码绘两种方式来使得静态图“动”起来，码绘使用的是processing，谨以此博客记录学习过程，若转载，请注明出处。博主新手一枚，这是博主第一次写博文，若有不足之处，还请温柔拍打~~（笔芯~~）

首先，让我们来了解一下，什么是动画？

动画是通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，再连续形成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。利用这一原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。(来自百度百科)

我们可以这么理解，动画也是由静态画组成，一幅画是一帧的话，那么动画就是多帧组成的一系列静态图，每过特定时间，显示不同的帧，由于“视觉残留”的影响，形成了人眼所看到的动画。

那么，我们来看一下手绘与码绘的创作过程。

手绘

彩绘静态图。
手绘使用水溶性彩铅，进行绘制，但是这幅真不好看，不过主要看水彩铅笔画质地，果然水溶性彩铅画还是需要在水涂前颜色尽量分布有渐变，水涂的时候才好看才有层次感，才显色。

体现“动感”的静态图。

原画家@JungShan

真的挺喜欢这种水墨画，浓淡分明，还有笔法的运用，整体流畅度，笔触果断不失细腻，图中女子衣裙的飘扬，体现了静态图在纸上跃然欲出的动态感。相较于码绘，手绘风格可因画手不同而多变，且手绘方式更多样，同样的人物图，若用彩铅画，又会是一种不一样的诠释，而对同一名画家，不同人物，细节处理与风格又会有差异，体现的动感也会不一样。

对于码绘来说，体现动态又是怎样的呢？

码绘

使用自定义笔刷动态码绘。

上图中，画图轨迹能跟随鼠标移动而移动，从视觉上看，好像还有一点上水粉的效果，那是不是从一方面来说，我们的码绘在一定程度上，可以实现绘画笔刷自定义，并可以在一定程度上实现仿真效果。

下面讲解如何实现这样的效果。

为了能够在画布上，留下我们笔刷痕迹，我们需要将背景 background(255);放在setup函数，只调用一次，不随每一帧调用掩盖之前的痕迹；为了在鼠标周围形成水粉一样的质地，在鼠标位置周围形成一个随机区域，float x = mouseX + random(-50, 50); float y = mouseY + random(-50, 50); 在这个正方形随机区域中随机画圆ellipse(x, y, 2, 2);，圆的大小
很小，以至于可以在较大面积形成粉状质地。

正方形笔刷的颜色随着鼠标移动而变化，在绿蓝之间变化。

 float ratio = mouseX/(float)width;fill(0, ratio * 255, 255 * (1 - ratio), 30);

实现代码如下：

 void setup(){size(700, 700);background(255);noStroke();
}void draw(){for(int i = 0; i < 1000; i++){float ratio = mouseX/(float)width;float x = mouseX + random(-50, 50);float y = mouseY + random(-50, 50);fill(0, ratio * 255, 255 * (1 - ratio), 30);//fill(ratio * 255,255 * (1 - ratio) ,0, 30);  ellipse(x, y, 2, 2);}
}

再看下面这幅图，下面这幅图中，是用码绘实现了简单的一笔画。

如果使用手绘画出以上图形，要纯手动画出一幅顺滑、对称的的图形，可能不太容易，但是使用码绘，就较好实现。

在上述一笔画过程中，我们需要确定好起点的位置，运动的轨迹如何，终点在哪里，一旦程序执行，就会开始绘画，中间过程不会断，一直到终点，体现了绘画的顺序过程；而使用手绘，可以随意确定起始点与终点，绘画的轨迹顺序在每次绘画时也可以不同，不存在顺序问题。

实现代码如下：

float x, y, angle;
void setup(){
size(300, 300);
background(234, 113, 107);
noStroke();
}
void draw(){
angle += 0.01;
x = sin(angle) *100;
y = cos(angle) * 100;
translate(width / 2, height / 2);
pushMatrix();
scale(1 + 0.1 * sin(angle * 10));
ellipse(x, y, 5, 5);
popMatrix();
}

看完了上面交互，有序的图，我们来看一下，用代码制作一些无序随机的图又会是什么效果呢。

先来看一幅静态图。

我觉得还可以，本来想画一幅抽象图，加入更多的形状元素，但是颜色、大小随机得都还不错，那就这样吧。那这幅图如何实现呢，为了产生大小、位置、填充颜色、颜色、边界颜色、边界大小随机，使用了random函数。但在颜色的随机上，码绘的颜色随机相当于调色盘。手绘的颜色控制是可视的，可提前确定好自己喜欢的颜色方案，确定好整幅图的颜色色调，调整时也会较为随性一点；码绘有的时候会出现糟糕的配色，但这有两面性，有失望，也有惊喜。码绘的调色功能还是比较强大的，有许多颜色模式可选，上图透明度叠加的效果，手绘可能不太容易实现。

float x = random(
radius+0.03*width, width-radius-0.03*width);float y = random(radius+0.1*width, width-radius-0.1*width);// edge size & colorcolor edgeColor = color(0);float edgeSize = 0;

但静态的图形总归单调了点，而且还没有特别明显得运动趋势，如果可以让它“动”起来就更好了。

为了能够实现静态图的运动，我们需要在每一帧更新每一个圆的位置即可，就是我们所说的一系列帧显示，我们每一个圆的在每一帧的位置都会不同，但是连续起来，每一个圆都在运动。

void draw()
{colorMode(HSB,360,100,100,100);background(r,g,b);for(int i=0;i<circles.length;i++){float radiusw=circles[i][0];float radiush=circles[i][10];float edgeSize=circles[i][3];//float x=circles[i][1];//float y= circles[i][2];float rx=getCircX(i);float ry=getCircY(i);color edgeColor=colors[i][0];color fillColor=colors[i][1];pushStyle();strokeWeight(edgeSize);stroke(edgeColor);fill(fillColor);ellipse(rx,ry,radiusw,radiush);popStyle();}
}

最后我们还可以加一点小小的交互。

两者比较

（1）技法

手绘需要一定的技巧，像彩铅画画，需要线条训练，线条也有多种方式，有排线、网格线、螺旋线，使用水溶性彩铅，还需要有对渐变的控制，色调把控，水分的控制，下笔的力度等等。而码绘需要准备processing，然后疯狂调用各种函数，或者自己编写函数，函数调用关系，需要掌握程序的流程，函数作用，变量的类型，基本结构等，还需要一定美学知识、动态知识、数学知识。

（2）工具

手绘需要准备素描笔、彩铅、素描纸、圆规、尺子、画板；码绘需要工具procesing，相应的库，还有素材。

（3）创作思路

手绘绘图要先准备好画具，然后想好构图，整体在整张纸的大概位置，然后是具体绘画的物体比例，远近关系，层次关系，然后开始画线条打草稿，再确定自己喜欢的配色进行铺色，最后进行细节处理；代码绘图需要较为连贯的顺序，先创建画布，不过绘画某些物体时，一定要按照先后顺序，否则出来的效果会不同，所以也要确定绘画的物体的先后顺序，且画之前要先上色，绘画时分模块，在子函数画好后，用绘图函数调用，最后显示，动态表示则需要在draw函数中进行每一帧的不同显示。

（4）创作体验

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

（5）局限性

码绘需要遵循一定的规则，比如说对调用函数，必须遵循这个函数调用的参数的类型、个数，手绘时就没有对画笔一定要按照某种方式运用的要求；码绘过程一般不能形成一种个人绘画风格，所运用库其实也就那么一些，还需要人定期开发，相比来说，手绘随性，用同样的工具，完全可以开创个人独特的风格，不受限制，实现了我手随我心；码绘受众不广，并不是每一个人都会写代码；不过在运用到交互时，码绘更有优势，码绘实现仿真，如软件、交互控制，艺术设计人士可以用码绘实现更多绘画应用的开发，了解从底层如何实现的。

（6）应用

码绘得到成果，可以用到绘画软件、音乐与绘画交互融合、图像交互等等，由于是代码生成，一切基于代码制作出的应用，大概都可以加以运用，可扩展性很强。手绘应用也十分多，品牌商标、时尚插画、街头涂鸦、服装设计、漫画等等。

（7）绘笔材质

码绘可以利用代码实现我们自定义的笔刷，还可以实现仿真效果，我觉得还挺好玩的，这就意味着我们绘画过程中又多了一种可能性，绘画过程又更丰富了，创作性提高了；手绘的绘笔种类也比较多，不过自定义的绘笔材质却挺少，不过手绘笔法又是一个十分精妙的部分，有的时候笔法的使用，可以对画作处理得十分细腻。

（8）色调调控

码绘中颜色可选模式十分多，有RGBA,HSBA等等，每一颜色模式的调控都会生成不一样的绘图，叠加的效果也很好用，不过在颜色调控，特别是在颜色随机时，具有较强不确定性；手绘选择颜料，有国画颜料、水粉颜料、彩铅、墨水等等，手绘绘画出一组颜色随机的图时，其实颜色都是作画者事先选好的，虽然画作内容的颜色看起来随机，这使得对随机颜色来说，颜色调控可视。

参考资料：

用代码绘画------学艺术搞编程的有什么用？https://blog.csdn.net/magicbrushlv/article/details/77922119
开始第一幅码绘------以编程作画基本方法https://blog.csdn.net/magicbrushlv/article/details/77840565
以编程的思想来理解绘画—— （一）用”一笔画“表现“过程美”https://blog.csdn.net/magicbrushlv/article/details/82634189
写给设计师的编程指南------让图形跑起来http://mc.dfrobot.com.cn/forum.php?mod=viewthread&tid=22951
代码本色 nature of the code(书籍)
随机与交互：http://mc.dfrobot.com.cn/forum.php?mod=viewthread&tid=22951