手绘VS码绘——动态篇（视觉错觉）

前言

在介绍这次的实验前，先让我们看看一组图片：

视觉错觉基本介绍

接下来我就运用介绍东西最基本的套路给大家简单介绍一下视觉错觉：

错觉是指人们对外界事物的不正确的感觉或知觉。最常见的是视觉方面的错觉。产生错觉的原因，除来自客观刺激本身特点的影响外，还有观察者生理上和心理上的原因。其机制现在尚未完全弄清。

人眼观看物体时，首先成像于视 膜上，其次由视神经输入大脑，通过不同的脑区对信息的整合，我们最终才能感觉到物体的像。最初的阶段，必需要靠感光细胞感光，并且将光信 转换为神经电信 ，之后才能将信 传递给大脑。而感光细胞的感光需要依靠一些包括感光色素在内的物质，这些物质的形成是需要一定时间的，这就导致了感光细胞会由于长时间的活动逐渐变得“疲劳”（神经适应性），进而形成视觉遗像错觉。

1．几何图形错视几何图形错视是几何形和线形的组合产生了特殊的环境，致使视觉发生错误。
2．色彩错视色彩错视主要因色彩的对比和色彩的空间混合而产生。所谓色彩对比因不同性质的色彩并置而影响视觉的准确性。
3．利用知觉常性的错视知觉常性是指我们对一些熟悉、常见的事物，有一种持久、稳定的知觉，往往不受环境变化的影响。

以上就是一些对于视觉错觉的基本介绍，接下来就是向大家展示我此次的作品。

有请大家再去观察一下文章最上面的一组图，你会发现一张静态的视觉错觉图会给人一种动态的感觉。而正是这种感觉激发了我的灵感，把一张静态的视觉错觉图做成动态的是一种什么感觉呢/p>

效果展示

1. 手绘

接下来这张是没有交互的表盘运动图

对于蚊香表盘的转动，运用了时间函数使得程序在执行的过程中它的角度在一直随着时间的大小逐步增大
实现代码：

每一次update刷新时都会直接覆盖掉之前的蚊香表盘重新绘制，使用easing函数使图像的过渡更加的平滑。
这些关键代码就实现了上面同态的视觉错觉图。实验发现动态的视觉错觉图带来的迷惘、眩晕感比静态的还要强烈。
那么问题来了，交互性的动态视觉错觉图效果是否会更加的强烈呢br> 直接放图：

解释：图中因为录制软件的问题，看不到我的鼠标，我的交互原理就是当我的鼠标在任意一个CD圆盘上时，当前CD圆盘的上下左右四个蚊香圆盘开始转动。
经过实验发现，当在实现交互的时候，眼睛视线会随着鼠标的位置移动，当视线集中在鼠标上时鼠标周围的蚊香圆盘开始转动，最后产生的迷惘、眩晕感较动态的还要严重。
实现代码：

总结—动态绘图时码绘与手绘的比较

技法方面

动态绘图时手绘和码绘都是需要技法的，但是两者的技法不同。
手绘在绘制动态时可以运用线条来表示运动感，比如有名的七龙珠漫画中就经常运用这个方法表达运动的感觉，也可以运用物体的形态变换，比如衣服的褶皱，毛发的飞舞等等方法表达此物体的运动感。还可以运用人物的不同形态来表达物体的运动状态等等。总之手绘的运动感主要体现在一系列的图像刺激人的大脑去联想想象途中所描绘的动作来产生动感。
码绘在绘制动态时则是通过一系列的空间变换搭配色彩的变换来达到需要实现效果，不需要刺激大脑过多的联想，主要体现在视觉层次上的动感。

工具方面

手绘用铅笔、彩铅等一系列绘制工具来完成一系列的动作，用纸来呈现一幅动态画的效果。
码绘用代码、用p5.js等等这一系列语言实现，更加直观，给人最直接的感受。

理念方面

手绘的理念是不光需要通过各种技巧来使得图像具有动感，同时它必须要表现一件事情，讲述一个故事。
码绘的理念是通过最直观的运动感，给观看的人们带来快乐或者将想要表达的东西更清晰明了的告诉别人。

创作体验

手绘在创作过程中还是比较吃绘画功底，对于我这种菜鸡来说手绘是一件很恐怖，很难达成效果的一件事情。
码绘考验的是码绘者的逻辑思维和艺术思维审美的结合，通过这个创造出一个直观表达的好看的作品。

呈现效果

手绘的效果主要是刺激人的大脑去思维，想象它所想表达的动感。
码绘的效果主要是通过一系列的空间变换搭配色彩的变换来达到需要实现效果，是视觉的直观体验。

载体

手绘的载体是纸，在纸张上表达动感。
码绘的载体是能够显示动态图像的机器，只要能够显示动态图像，就会有想要的效果。

局限性

手绘也只能通过纸张还有一系列的技法刺激人们的思维，不是很能直观的带来最舒畅的享受。
码绘比较难表达出一个内容行很强的东西，像动漫这一类的作品还是需要手绘的技术来实现，用代码实现可能会要了一个编程人的命……

应用

手绘还是比较能够广泛的运用在各种绘制出来的作品上，包括一些电子海 的制作等等。
码绘我觉得最大的作用可能是用在实现一个绘图软件上，绘图软件的各种功能，都需要用代码支持实现。

参考资料

1.《用代码画画》：

0.1 用代码画画——搞艺术的学编程有啥用/p>

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

3.http://iprocessing.cn/2017/10/22/第八期：processing制作动态山水背景/
4.https://baike.baidu.com/item/视觉错觉/760451r=aladdin
5.https://zhidao.baidu.com/question/1577494657264199700.html
6.https://baike.baidu.com/tashuo/browse/contentd=5bb6134fffb815d8d14f1d83&lemmaId=&fromLemmaModule=pcBottom