互动媒体技术——Processing创意绘画系统

总体设计思路

工具：Processing

Processing是一个为开发面向图形的应用（visually oriented application）而生的简单易用的编程语言和编程环境。Processing的创造者将它看作是一个代码素描本。它尤其擅长算法动画和即时交互反馈，所以近年来在交互动画，复杂数据可视化，视觉设计，原型开发和制作方向越发流行，大家都喜欢这个可爱贴心，简洁好用的编程工具。

Processing基于Java，其语法规则和Java是一致的，但它更为简单，并且已经演化出了它自己的一套"工作习惯"。

思路：

简单来讲就是，要能满足最基本的“画画”的需求，还有借助电脑这个媒介，产生不一 样的体验和效果。

绘画拓展理念

“绘画，是指用笔、板刷、刀、墨、颜料等工具材料，在纸、纺织物、木板、墙壁等平面（二度空间）上塑造形象的艺术形式”

“是一种在二维的平面上以手工方式临摹自然的艺术，在中世纪的欧洲，人们常把绘画称作“猴子的艺术”。在20世纪以前，绘画模仿得越真实技术越高超，但是进入20世纪后，随着摄影技术的出现和发展，绘画开始转向表现画家主观自我的方向。绘画是一个捕捉、记录及表现不同创意目的的形式，它及其参与者的数量同样地为数众多。绘画的性质可以是自然及具像派的（如静物画（still life）或风景画）、影像绘画（photographic painting）、抽象画、有叙事性质的、象征主义、情感的或政治性质的。”

                                                                                                                                                   ——摘自 百度百科 “画画”词条

在传统绘画中“笔” “板刷” “刀” “墨” “颜料” 等“画笔”，“纸” "纺织物" “木板” “墙壁” 等“画布”，是作画必不可少的因素。

作画者是人，但是也不局限于人，大象用鼻子“握”一支笔，也能在画布上绘制图案，我们也能将这种行为定义为“大象画画”，再或者，天上的云朵，变幻莫测，在某一瞬间，有一片云朵是大象的形状，我可以说这片云朵是大自然画的一幅画。如果我再延申一下，我看一对老夫妻携手走在夕阳下，我也可以说这是一幅很漂亮的画。（图1）

我认为，画画，是一件很自由的事情，它不需要严格的定义，不在于形式，也不在于结果，它只是一种表述方式，或为了记录一个瞬间，或为了表达一种情感，或为了具象一种思维，可以是用笔画下来的，可以是用色块摆出来的，甚至可以是刀割的，火烧的，或是人为的，或是无意的，或是自然的，都是“画”。

不过要做一个“画图系统”，也不能将思维发散到这种程度，只能说，不要局限于平时最平常的绘画方式——用笔在纸上画。限制在电脑上，就只能从有限的角度来拓展。

技法与工具上：

传统绘画方式中，因为画笔非常丰富多样，有钢笔、铅笔、炭笔、毛笔、蜡笔等等，每种画笔都有其独特的特性，再加上作画者可以随意发挥，使得传统绘画的技法非常多样化。仅就传统的水墨来说，一支毛笔一点墨，就有干、湿、焦、浓、重、淡、清这么多技法（图2）。

而在电脑上操作（穷学生条件有限，只有一台笔记本呜呜呜），只有键盘按下，鼠标按下，鼠标拖动，鼠标抬起这些非常有限的操作，要实现丰富的技法，就要更巧妙的利用这些工具。

常规的绘画系统往往不会考虑到很多专业绘画的技巧，因为它有无数种可能性，不可能一一实现，但很多画图板也没有太多技法上的新意，顶多是画一些规则的图形，有一些不同的笔触，但很难接近现实中真正的绘画。所以我打算在我的绘画系统中，更贴近真实的绘画，并添加更多的可能性。比如说我也想画出水墨的效果，简单从笔触上来讲，毛笔沾墨水的笔触，是柔软的，粗细不均匀且有晕开的效果，并且墨水容易溅洒，那么就可以用跟随鼠标连续画出不同半径的黑色实心圆的方式，达到类似的效果。

其次可以通过键盘来调整选项，比如说线条粗细和线条效果，鼠标按下可以等同于落笔，鼠标拖动等同于画线，鼠标松开等同于起笔。在很多时候，笔一直停在纸上会有连续不断的颜料湮在纸上，所以鼠标按住不懂可以认为是加重笔触。线条的粗细可以鼠标拖动的速度确定。

对于色彩，在电脑上画画就比传统绘画增加了很多优势，但是很多绘画系统还是只能选取单一的颜色，我可以一笔下去出现很多色彩，也可以制造出渐变颜色，颜色的选择也更加多样，因为在电脑上几乎能显示出任何颜色。电子绘画系统能在呈现效果上创造更多的可能性，比如说，我可以每次下笔都画出一个规范五芒星，或者每次下笔都能生成一个徐徐绽放的花朵。这都是传统绘画达不到的效果。

除此之外，传统绘画系统呈现的都是静态的画面，很多优秀的作品，是静态的画面表达出动态的效果，但是我希望可以直接呈现动态的效果。根据鼠标的运动，我可以让颜料有一个轨迹方向和速度，或者说，用户在屏幕上点一下，就能在对应位置出现一只金鱼在画面上游动，这是传统绘画达不到的效果。

理念上：

传统意义上的的“画”，就是简单的绘制图形，要想完成一幅好的作品并不容易。我想做的画图板很像是一个小游戏，很有趣，能提供大量现成的绘画素材，能通过简单的鼠标键盘操作，画出漂亮的、观赏性强的作品。

创作体验：

首先我用系统自带的画图板画一幅画

画一幅这样的简笔画还挺费劲的，虽然这个画图板里面有现成的很规则的圆形矩形给我选，但其实我不太需要，因为现实生活当中的绘画也很少有很规则的图形。这个画图板，能满足我一些很简单的图形表达需求，但是它没有一些有趣的功能，更多的时候它只是一个工具。

接下来展示一下我的画图板：

注：数字键1-9控制线条粗细  N：清屏  S：保存当前作品

              这就是一个简单的画笔，没什么特点，鼠标左右键能分别选择一个颜色，用键盘的数字键调整笔划粗细，与普通的电脑作  画的画图板差不多

                                                 在鼠标点击或者拖拽到的位置生成大小不一、颜色随机的圆

                                                                                           模仿毛笔的笔触

                                                                 这个有点像万花筒，能生成很完美的中心对称图形

                                           在鼠标点击的位置随机生成大小不一的花朵，能在画面上点缀一些小花

                                            这是一个动态的颜料扩散效果，跟随鼠标运动的方向得到一个速度

                                      按住鼠标，花朵会徐徐绽放，等花朵绽放到合适的状态，松开鼠标即可

                                                         一幅动态的画面，鼠标点击即可生成一个新的运动的圆

 以上就是画图系统的全部功能，与普通的画图系统相比，它更生动一点，舍弃了一些很常规的功能，加入了新奇的元素。在绘画过程中，操作简单，效果好，动几下鼠标就能出现很鲜活的画面。而且有动态的效果，视觉上体验很好。

呈现效果：

局限性：

此绘画系统能提供的素材有限，有八个Penstyle，虽然有多种创作的可能性，但是比较容易玩腻了；

不过这终归不是一个游戏，是一个画图板，对于画图功能，创意是有了，但实用价值不高，如果将一些普通绘画系统的常规功能添加进去就更完美了；

用鼠标操作的局限性依旧很大，如果能用触屏就更人性化了；

虽然有动态的呈现方式，但最终生成的画面依旧是静态的，如果在整个创作过程中动态的元素能一直保持住，并能保存为GIF就更加完美了，但我没能做到这一步骤；

除了专业绘图，其他的我觉得，第一要给用户足够大的发挥空间，第二要提供便捷的操作方式，对于“创意画图系统”，我认为它的作用不该是“提供创意”，而是“激发灵感”，所以如果我的画图板能给用户修改已有元素或者创造已有元素的功能，就更好了。

应用：

emmmmmm我觉得怎么用都行这个是为了让大家开心嘛 画画嘛 画画是为了开心嘛~

总结：

做了这么一个“创意绘图系统”，我最大的感受是，传统的绘画真的博大精深啊。

我在很多方面试图模仿传统的绘画技巧或者效果，但是我觉得“编程”这个东西再厉害，也很难在“艺术创作”的角度搞出花样来。在我的画图板里，也是直接提供一种创作素材，这样的话，从某个方面来说。是限制了创作，因为现实生活里。我可以自己调整我的工具，我可以把我的笔削尖一点，我可以往我的颜料里加一些特殊材料等等。但是在这样一个画图系统里，这些行为就被“限制”了。所以我这个画图系统其实还是没能摆脱传统画图系统的固有模式。

不过我做的这个画图系统还挺好玩的，给同学们尝试一下，她们给的反馈还挺不错的，会觉得它“这个很酷”“哇这个花好好看！”，我觉得也算是达到了我想要的效果，不过我还是希望能有一个完全符合我所有设想的画图系统，或许有一天我能亲手把它创作出来吧！

参考资料：

https://www.cnblogs.com/mysunnytime/p/3423375.html

这是一篇Processing的入门简介，因为之前的作业我用的都是P5.JS，所以一开始接触Processing的时候比较吃力，网上关于Processing的资料很少，这个算是比较好的一篇：

https://www.cnblogs.com/mysunnytime/p/3423375.html

这是上面那个博主的另一篇文章，介绍的是使用Processing进行物理世界的抽象，也很有价值

https://www.openprocessing.org/

这个网站当中有很多Processing的实例，我的作品很多都参照了这当中的例子

《代码本色：用编程模拟自然系统》 作者：Daniel Shiffman

这本书是一部关于真实世界模拟编程的优秀之作，知乎、Processing官网力荐。本书由纽约大学Nature of Code课程教授Daniel Shiffman写就，是一本借助开源语言Processing全面介绍如何用代码模拟自然世界的学习指南。