基于Processing和Leap Motion的绘画系统

对传统的绘画系统的思考

一说到绘画，大家脑海中出现的画面应该差不多都是画家和他手中的笔还有面前的画板吧。确实，在传统的绘画系统中，各种各样的笔和纸是画家们最重要的创作工具。不管是铅笔、毛笔，还是蜡笔、水彩笔，他们承担的功能都是在某一载体上绘出画家想要的画面，这样的载体各种各样，只要是能够被改变颜色的东西，都有可能成为画面的载体。如此一来，我们不妨给传统的绘画系统下个定义——借助工具在可以被改变颜色的载体上绘制想要的画面。
通常情况下，这样的传统绘画系统都需要画家操控绘画工具直接在载体的表面绘制画面。
如下图就是绘画的典型例子——

但随着艺术家们的不断探索，传统的绘画系统逐渐融入了很多新的创作形式——例如泼墨画。

与传统绘画不同，在这种创作形式下，绘画工具并不直接与绘画载体直接接触，画家挥动绘画工具，将颜料泼洒在画布上，从而形成一幅绚烂多彩的图画，这是绘画技巧上的创新。
还有木刻画这种与传统绘画大相径庭的绘画形式，不用颜料，不用画笔，也不用画布，只用几把刻刀和一块木板就可以创作出一幅画面，当然后面印刷的过程并不能划入完成绘画的过程。

我们不难从这两种独特的绘画形式看出，完成一幅图画的创作，并不只有通过传统的绘画系统一种途径，创作的工具可以是多样化的，创作者与绘画系统的交互也可以是多样化的。

互联网时代的绘画系统

在人类拥有了计算机这一项改写人类历史的科技后，很多传统的工作都已经改由计算机实现了。绘画系统当然也不例外。
在早期的时候，计算机实现的绘画系统比较简单，绘画工具是鼠标，用户通过点击拖拉鼠标在屏幕上勾画出线条，并可以选择颜色进行填充。还有通过纯代码实现的绘画，例如通过编写OpenGL代码以绘制各种画面。随着计算机技术的不断发展，计算机的绘图能力也是不断提升，现在人们可以通过各种软件轻易实现传统的绘画系统难以实现的效果，例如PS、AI这种二维绘画系统，还有像MAYA，3DMAX这种可以创建三维场景的复杂绘画系统。
虽然在绘制效果和易用性，还有性能等各个方面，计算机绘画系统已经全面优于传统的绘画系统。但仔细思考，现有的计算机绘画系统大多采取鼠标的交互方式，鼠标就是用户手中的绘画工具。除了鼠标外，还有例如数位板这种专业的绘画工具，但数绘板相当于把传统绘画系统中的画笔和画布数码化了而已，单从交互层面来看，并没有体现出与传统绘画系统有太大的差异。
那除了鼠标和数位板外，计算机时代的绘画系统是否可以有不一样的交互方式呢？本文接下来的内容将对这个问题进行进一步的探讨。

对新型绘画系统的探讨

本次对新型绘画系统的探讨仅从交互层次进行探讨，因为站在技术层次而言，计算机的绘图能力已经十分强大，基本上可以说只要你能想象出来的画面，都能在计算机上绘制出来，无论是借助PS这类绘图软件，还是纯编程实现，都可以达到令人满意的绘图效果，所以在技术层次对绘画系统进行创新的难度比较大，所以本次探讨从交互的角度入手，意在创建出一个具有全新交互体验的绘画系统。

而在经过深思熟虑后，我们决定用Leap Motion作为我们新型绘画系统的交互工具。

原因在于我们回望人机交互技术发展的历史时发现，未来的人机交互很大概率是交互无形化的，什么意思呢？很简单，我举几个例子你就明白了。VR眼镜大家都知道吧，那VR眼镜是怎么完成人机交互的呢？转转头，凭空滑动几下手指就可以完成与VR眼镜的交互了。我们会发现与传统人机交互不同的是，交互工具不见了，你不再需要鼠标，或者触摸屏就可以完成与系统的交互。实际情况是，交互工具依旧在那里，只是用户不在需要可以地去操控它，而是通过一些简单的肢体语言就可以完成与系统的交互。

这就是交互无形化的概念——用户感觉不到交互工具的存在，只是单纯地认为通过简单的肢体语言就可以完成交互的过程。
而我们正是想把交互无形化这种概念引入我们新型绘画系统的创作中，我们期望用户不再需要操控任何交互工具，而是通过自己的双手就可以完成绘画的过程，就好像用户凭空就能创作出一幅画一般。

但受限于技术，Leap Motion虽然可以解放用户的双手，但还不能完全实现我们对交互无形化的要求，用户可以察觉到Leap Motion的存在，而且用户的手得在它的上方一定范围才能被识别，这离真正的交互无形化还有很大的距离，但我相信，随着技术的发展，这样的绘画系统一定可以得以实现。现在就先让我们大胆地探讨一下这样的绘画系统是否可行吧！

开始编程吧！

本次探讨我们使用Processing作为编程环境，Processing提供的Leap Motion for Processing Library可以为我们提供方便易用的接口，借助这些接口，我们可以轻易获取到Leap Motion的各种数据信息——手的坐标和手的张开或者紧握等状态，进一步处理这些数据，结合Processing的绘图函数，我们就可以创建一个全新的绘画系统。

根据设计，我们将创建一种具有七种画笔效果的绘画系统，但这七种画笔和传统的画笔又有所差别。当我们使用传统的画笔时，一般每画一笔只能画出一个笔画或一个图案，但借助程序，我们可以重新创建一些全新的有趣的画笔。例如每画一笔，都可以画出许多种图案，还可以画出动态的画面等等，这也是本绘画系统和传统的绘画系统的差异所在。

先来看看我们的绘画系统的主页面——

从上图大家可以看出，我们一共有1-7共七种画笔，在使用的时候，点击键盘上对应的数字键就可以切换不同的画笔。而“c”代表的是清除功能——能把屏幕上所有的内容都清除。右边的三个滑动控制器分别代表RGB颜色选择器，这个选择器是通过手势控制的，当我们的手移动到相应的控制器的位置时，便可以激活该控制器，手再进行移动，即可控制RGB颜色的取值。最右边的小方块可以显示当前设定的画笔颜色，默认为白色。
我们先来看第一种画笔——（GIF）

第一种画笔模拟的是水彩画的效果，仔细看可以发现，每当我们画一笔时，实际上，我们画出来的是近似于左右对称的图案。
这一点很有趣，因为虽然通过编程，我们可以轻易获得一模一样的对称效果，但在实际的绘画中，一模一样的对称几乎是不可能的。你会发现，在实际绘画中，一模一样的对称很难实现，而略带偏差的对称则很容易实现，但在编程中，这一点刚好相反，你可以轻易获得一模一样的对称效果，却很难获得略带偏差的对称效果。这也是我们特意而为的，这样的绘画系统显得更加符合现实，也可以让整个画面多几分灵动，让使用者不会感觉到整个系统的呆板和生硬。

下面是交互过程的展示——（GIF）

缓缓移动手掌，几乎不需要任何绘画技巧，我们就可以创造出一幅有意境的类似于水彩泼墨画般的画面！而且每次使用这种画笔时，都可以创造出不同的迥然不同的画面，你永远都不知道最后的画面会是怎样的，因为你只能控制每一笔的起点，而笔画的走向，笔画的颜色，甚至颜料流下来的痕迹都是由电脑决定的。所有你需要做的只是随意的移动一下手，等最后画完的时候，每个人都可以得到一幅艺术感满满的画面，而且绝对不会有画面一样的两副画面出现。

我想这也是未来的绘画系统和传统的绘画系统的明显差异所在，也许你不具备任何的绘画技巧和美学基础，而在未来的绘画系统中，任何人都可以是艺术家，每个人都可以通过交互创造出属于自己的大师作品！

下面是第二种画笔效果——（GIF）

第二种画笔效果是我们创建的一种全新的画笔效果，你几乎很难在现实中看到类似的画笔效果，虽然有人会觉得这种效果有点木刻画的感觉，但我更喜欢将其形容为在用茅草作画，就好像一个画家拿了一大堆茅草，将其染色后，随意洒在画纸上，形成一幅毫无秩序，却充满质感的画面一样。你也可以选择运用这种画笔效果创建一幅有秩序的画面，重点在于，这是一种有质感的画笔效果，与传统的颜料作画得到效果不同。我十分喜欢这种效果，我想这也是新型的绘画系统的一大亮点吧，可以创建出具有不同质感的画笔效果，不再局限于颜料的单一质感。

下面是交互过程——（GIF）

第二种画笔的交互和第一种画笔的交互相差不大，不同的地方在于这种画笔可以动态改变自身的颜色——通过右上角的滑动控制器改变RGB的取值。
但不得不承认，这种滑动控制器并不好用，在用Leap Motion对其进行控制时，因为滑动条的区域太小，我们很难将手的位置固定在某一区域内，不小心就会移动到别的控制器的区域去了，而且滑动该控制器时，也很难做到准确的调整，手左右移动的幅度过大时，就会把滑块移动到别的值域中，这也是我们需要继续改进的地方。不管如何，我们先把第二种效果放下，继续探索其他好玩的画笔效果吧！

继续来看第三种画笔效果——（GIF）

我把第三种画笔效果称做第二种画笔效果的拓展，使用这种画笔不仅可以画出茅草般线条，还可以画出类似泡泡，或者说是光晕的效果，使得整个画面更具生气。
在第三种画笔中，我们想表现新型绘画系统的另一个特点——每画一笔，不再只局限于只能画出一种图案，你可以一笔画出几根线条，还可以顺带画出几个圆圈。这是与传统绘画系统大相径庭的地方，也是新型绘画系统很有趣的一个特点，你可以定义几种图案，然后一笔就把它们全都画出来，想想就觉得爽～

交互过程——（GIF）

再来看看第四种画笔——（GIF）
第四种画笔没啥好说的，只是把第二种画笔的实线改成了虚线，当然，如果你喜欢的话，大可以改成虚线，这也是新型绘画系统的灵活性所在，你几乎可以定义绘画所需的一切图元，然后用将其运用在各个方面。
交互过程——（GIF）

接下来的第五到第七种画笔将是与前面几种画笔截然不同的存在，我们在这三种画笔中侧重于表现动态的画笔效果，即笔画不再是一笔画就的，而是有一个运动的过程！

首先来看看神奇的第五种画笔——（GIF）
哇塞！这是什么鬼！我相信这是很多人看到这种效果后的第一想法。哈哈，让我来告诉你们这是什么吧。其实这是一根调皮的线条，它不像传统的线条一样，只停留在纸上固定的地方，当我们把它绘制出来后，它会自行移动和伸缩，知道它找到自己自己想要呆的地方为止…
好吧，开个玩笑而已，哈哈。其实这跟线条并没有什么智能的特性在其中，只是我们给线条中的每一个点都设置了一个吸引力和斥力，当它出现在画布中时，由于其他点的吸引和排斥，就会产生以上的效果。
也许这种画笔效果并没有实际的用处，也不能绘制出一幅美轮美奂的画面，但我们用它来表现新型的绘画系统的重要特点，就是笔画和色彩不再是固定的，一成不变的，它们完全可以随着时间的变化而变化，从而构成一幅流动的画面。
交互过程——

再来看看第六种画笔——流动的色彩：（GIF）
交互过程——

以及第七种画笔——生长的线条：（GIF）
交互过程——（GIF）

一口气看完这三种画笔效果，想必大家都明白我想表达的观点——在新型的绘画系统中，画面不一定是固定的，一成不变的。不管是线条，还是色彩，在其生成后，都可以有选择性的运动变化，也许在你画出一幅画面后，因为线条和色彩的变化，这幅画面会渐渐展现出另外一种效果。我想这会是新型绘画系统区别于传统绘画系统很重要的一点特征。

总结

这次对于新型绘画系统的探讨到这便告一段落了，我们在人机交互和画笔效果这两方面入手，试图创建出一个与传统绘画系统截然不同的新型绘画系统，呈现效果也是另我们比较满意的，但在这个过程中，我们也发现了该新型绘画系统的局限性所在。
例如人机交互的局限性。在传统的绘画系统中，我们可以随心所欲地操纵我们的绘画工具，但就本系统所采取的Leap Motion而言，我们并不能做到随便移动一下手，就可以绘制出画面，而是要在传感器感应的范围内移动手才会有效果，而且识别的精度也有待提高，我们几乎不可能绘制出工笔画那样仔细的画面。但我相信，随着各种技术的不断提高，以后的交互工具必定能满足我们对于感应范围和精度的要求。
就创作体验而言，我们觉得新型的绘画系统更具可用性和可玩性，它不要求用户需要绘画技巧，任何人都可以使用该系统进行创作，而且内置的各种漂亮的画笔效果也能让用户可以创造出各种绚烂多彩的画面，省去了传统绘画系统各种繁琐的创作过程，可用性强，创作体验极佳。
本次探讨就到此为止吧，我们将继续致力于新型绘画系统的探讨，敬请期待！