背景简介

上一次简单的通过静态的手绘与码绘对两者进行了一些简单的对比，这一次更加好玩了，我们来做动画！

主题

用手绘和码绘两种方式创作“运动”主题的作品，并撰写报告，对比二者在表现“动态”方面的异同。

成果展示

首先还是把成果展现给大家看看，然后再进行解析。

前期分析

开始制作这个作业的时候就咨询了一下艺术系的小伙伴，问他有没有好玩的小动画。之后他就给我扔了这个：

我也是瞬间被萌到了，然后就决定动手做这个小动画。动画萌归萌，但是定睛一看，这个小动画的细节是真的多啊。
现在我可以稍微总结一下这个小动画的其中包含的静态部分以及动态的小细节：（之后的分析部分会进行详细介绍，这里读者只要留一个印象就行）

背景、文字、开关面板以及静态的两个表情
要让表情动起来并且能够自动变换
加上交互
眨巴眼
嘴和眼的略微偏移
脸的形变
速度变化
颜色变化

以上的制作步骤是我在做完之后总结出来的，有些小细节真是非常容易忽略。很多步骤也是边做边加进去的。

制作过程

背景、文字、开关面板以及静态的两个表情
这一步相对简单，没有太多的技术含量，唯一值得提的一点就是笑脸的嘴巴是由两个颜色不同的椭圆叠加而成的。
这一步做出来的效果如下：
要让表情动起来并且能够自动变换
这个时候我们就要加上提供动态效果的函数，一共两个，一个从off到on，一个从on到off。
这个时候需要在在draw函数中调用相应的函数才能使动画变化。
加上交互
这一步，我们加上对鼠标点击的检测，并且设定动画转换的触发区域，并且设置圆脸一动一次即停止动画的条件，这样就给我们的动画加上了交互效果。
眨巴眼
原来的眼睛是一个椭圆，现在周期性地将椭圆的高缩小放大，就可以得到眨眼的效果。
嘴和眼的略微偏移
5、6、7三个步骤是非常细微的改变，但是对于最后的实现运动的效果有着非常大的作用
给眼睛和嘴巴增加新的动画，让眼睛和嘴巴在动画开始时向运动方向偏移10个像素。然后设置一个触发条件，当圆脸到达面板的最顶端的时候，让眼睛和嘴巴恢复。
脸的形变
6、7两个步骤是我在将原始动画逐帧查看之后才发现的小细节，在原始动画中，圆脸在运动时会有轻微的横向拉伸以及纵向压缩的变化。
速度变化
不光是脸型有变化，整个动画的速度也是有讲究的，在靠近中间的地方速度越快，结合脸型的变化会让人觉得圆脸有一点点的粘滞感和一点软软的感觉。这种动画效果比单纯的平移给人带来的感受是非常不一样的。大概萌的精髓就在这里了吧。
颜色变化
面板和文字的颜色也是要随运动变化的，这里只得注意的是，要将颜色的RGB三个通道一起进行不同比例的线性变换才能够达到最好的变换效果。
这里提供一个慢速的动画供读者查看细节。
一些作为程序员的小傲娇
前面添加了眨眼的小动画，但是我现在想要每次将开关拨动道on的时候就会立刻眨眼（程序员的控制欲吧）
并且由于最后要提交的作业是一个动画，我还要增加一个在动画和交互之间转换的选项，最后的效果就是下面这样的。
（动画版的成果在最开始展示了。）

体会与思考

下面我通过几方面来分析一下动态手绘以及码绘的区别（此处指的是广泛意义上的手绘，不仅有纸笔作画，也包括现在广泛存在的使用数位板等电子产品进行的绘画与创作）

创作方法
据我对艺术系同学的观察与采访，他们制作动画大多使用AE等软件，这些软件都是以帧为关键要素，这些软件会对各个关键帧中间进行自然平滑的过渡。AE的使用者要做的就是添加关键帧，一般而言动作的关键帧越多，动画的动作效果就会越好。
而码绘就是要基于代码来生成相应的动图，在之前的分析中提到过，码绘要创作两个部分，一个部分是静态的图形，另一个部分是动作函数，当图形绘制真实，动作函数也非常自然，作出来的动画也就会非常好。
理念
基于上述陈述，我们可以对两种创作方法的理念进行一下总结，在传统手绘的世界中，创作者是通过大量的具有细微差别的静态画面的连续播放从而获得动态效果，所以他们的创作理念就是堆积关键帧。
而码绘需要将动作划分成许多的子动作，并分别对这些子动作进行编程，子动作划分得越恰当，最后的代码量与呈现效果就会越好。就像前文描述的要产生粘质感就是要通过形变和速度变化叠加产生。
应为笔者是工科出身，所以我还想多说几句有关码绘的一个理念——涌现。这个词我是在凯文凯利的《失控》中学到的。意思是在一个数量庞大的群体中，每一个个体仅仅有一个非常简单的行动，在群体的维度上也学就会出现非常复杂的行为。这种现象我们就可以称之为“涌现”。
就像是大雁飞行时的排兵布阵，鱼群在海中非常复杂的漩涡式的游动。动物行为学家们一直很好奇，它们怎么能排列出如此复杂的阵型而不会散乱，要知道在如此大的规模的排列，没有接受过训练的人类群体都很难做到。
直到很久之后，直到很久之后，在高速摄影机和计算机的帮助下，秘密才揭晓，所有的个体只要关注它前方和左右两边的个体如何运动，然后调整自己的动作即可，这样的计算量，动物的大脑还是能够应付的。

在码绘的时候也是这样，有一些非常复杂的图案看上去令人眼花缭乱，但是懂行的人知道，其实背后就那么几行代码，控制着每一个个体在不同的时间做出同样的行动。
呈现效果
这两种创作方式的呈现效果应该是不分高下，只有水平不同的创作者，而没有水平悬殊的创作技术，更加妥当的说法是不同的创作方式适应不同的创作领域。只要创作者愿意用心投入作品，花费时间和精力，好的呈现效果和好的作品都是情理之中的。就像宫崎骏先生，一生坚持手绘创作，他的作品的知名度与美誉度都丝毫不亚于迪士尼公司的作品。
局限性
在了解创作方式和创作理念之后我们也可以来分析一下手绘与码绘的局限性，或者说两者擅长的领域是什么。目前看来，码绘的局限性还很大，因为如果想要画出一个精细的人物，用手绘比码绘来得快多了，因为在这个作品中点线面的关系太多了。用程序来写，估计要到天荒地老了。
但是如果说是简单的几何图像，那么码绘更加精准，并且占用的储存空间也更小，几行代码可比一个完整的图像要小得多。
应用
在了解局限性之后，各自的应用场景也就非常的清楚明确了。
在人机交互界面上的图案十分简单，一般而言就是通过码绘创造出来的。因为笔者曾经学习过一段时间的iOS开发，确实很少见到有开发者直接用图片来填充自己的交互界面。偶尔见过几个，但是软件的响应速度就真的非常的堪忧。
在动画电影行业，每一个帧图像都是非常丰富，细节非常多的，如果使用码绘的话，一个电影公司不光要请一群导演、艺术家，估计还要聘用一大堆程序员来实现这个电影制作，就像我们所了解的，现在也没有听说过动画公司聘请一群程序员作为动画电影的创作主力。
但是，在我和艺术系同学访谈的时候了解到现在的一个新变化，和以往认知不同的是，现在并不是关键帧越多越好，有的时候创作者可以使用更少的关键帧来获取更加好的效果，但是前提是这个创作者可以很好的使用曲线编辑器里的曲线编辑，这就有点像是编程中创作一个非常优秀的动作函数以获得非常好的动画效果。
在这个同学的指引下，我查找了更多的资料，并且对动画业的未来有一点点的了解。
未来发展
在我搜集到了更加多的信息之后，我发现我之前所说的纯粹的手绘和码绘已经不多了。更多的是将两者融合在一起使用，在动画电影创作者们往往也会去学习一些编程的技巧，在自己创作的时候会看看这个地方是不是可以用一些力学函数来取代一些关键帧，从而节省一些时间，并且往往能达到更加好的好效果。
而码绘者呢，不是说静态的图像很难码绘出来吗，那我们可以导入图片或者导入模型啊。据我所知，之前在iPhone4刚出来时，风靡一时的‘会说话的Tom猫’就是在模型的基础上加上了很多的函数而制成了。
这么一推广，有没有发现，手绘和码绘的间隔好像变得很窄了。一个大型的游戏，到底算是码绘还是手绘呢，运动的时候都是遵循着力学函数，但是里面的图片和模型可不是用代码写出来的。
看样子，这种取长补短的相互交融还将继续下去。

最后贴一下手绘作品：

（不知道为什么这个图片怎么上传都是横着的，大家将就着看吧）

参考资料

1.《用代码画画》:
0.1 用代码画画——搞艺术的学编程有啥用?
https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 开始第一幅“码绘”——以编程作画的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
2. 以编程的思想来理解绘画—— (一)用”一笔画“表现“过程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189

【动态】码绘VS手绘的对比——有点萌的开关相关推荐

码绘与手绘的对比——动态
码绘与手绘的对比--动态版权声明:本文为博主原创文章,未经博主允许不得转载. 图形学最动人的地方就是可以用代码实现图形的动态效果,之前比较了静态效果下的码绘与手绘,传送门:https://blog. ...
码绘与手绘——表达动态
一.手绘表现动态: 这个题目一开始看来 ,手绘是处于非常劣势的地位的,因为电脑上可以实现动态的过程,就是用动画的原理,每秒绘制60帧,不断进行重绘图形,来达到运动的效果的. 而本身来讲,手绘的图片本质 ...
码绘VS手绘（二）动态绘图
码绘VS手绘(二)动态绘图一.前言二.实验内容 (一)主题 (二)实验结果 1.码绘最终效果程序结构具体函数解析 2.手绘三.总结--编程与手绘的比较 1.工具和载体 2.技法 3.理念 ...
对比码绘与手绘——Motion graph
上一篇博客做的是静态画,那这篇当然要讲讲动态画.同样地,这次我们也是从思路.技术.创作体验.创作偏好等方面来比较码绘与手绘,讨论异同. 首先,展示一下作品: 码绘利用P5.JS绘制作品手绘利用数 ...
用p5.js实现的码绘与手绘的比较（动态）
用p5.js实现的码绘与手绘的比较(动态) 上篇:用p5.js实现的码绘与手绘的比较(静态)https://blog.csdn.net/wangyouxu24/article/details/8433 ...
码绘与手绘的比较【动态篇】
圆的面积公式我们都知道圆的面积公式是π*r^2,但这个公式怎么得来的呢?我们用一种直观的方式来看看这个公式的来历: 接下来我们尝试用码绘和手绘来实现一下第二张图片的动态了. 手绘额..可以看出手绘 ...
码绘VS手绘（一）编程与手绘的对比
前言本文主要讲解在静态图方面如何分别通过手绘和码绘两种方式来表现,以及它们之间的差异与联系,谨以此博客记录学习过程.博主新手一枚,这是博主第一次写博文,若有不足之处,还请温柔拍打~~(笔芯~~) 手 ...
码绘VS手绘|processing“运动”主题创作——如何让一只沙雕鸟起飞
目录一.代码逻辑二.理论对比三.参考资料最终作品效果可以看上传在B站的视频:https://www.bilibili.com/video/av36523799 第一次码绘VS手绘指路:http ...
码绘VS手绘（二）如何让让静态图“动”起来
前言在上一篇码绘VS手绘(一) 编程与手绘的对比中,我们了解了有关码绘与手绘在静态图方面的比较,本文主要讲解如何分别通过手绘和码绘两种方式来使得静态图"动"起来,码绘使用的是pr ...

【动态】码绘VS手绘的对比——有点萌的开关