Processing大作业——绘画系统

最终迎来了互动媒体最终的大作业，前两次我们分别讨论了，手绘和码绘的区别还有如何进行动态作画。

有兴趣的可以戳下方链接看一看我之前的两次作业。

第一次码绘VS手绘指路：https://blog.csdn.net/qq_37787956/article/details/84200103

码绘VS手绘|processing“运动”主题创作——如何让一只沙雕鸟起飞：https://blog.csdn.net/qq_37787956/article/details/84349353

 

一、创作思路

这次我们要做的是一个绘画系统，下面是具体的要求

戳链接可以看一下我上传的录屏   https://www.bilibili.com/video/av39790096/

看到这个题目，首先我想到的是windows自带的画图程序

作为电脑绘画的先驱者，我在小学微机课上接触到的第一个程序就是它，一直用到了现在，最大的优点就是简洁，方便。于是我决定要做一个类似的系统，在它的基础上在加入一些有意思的东西。

 

采用的编程工具：Processing+ControlP5库

 

涉及到实现的主要功能：

ControlP5是processing中自带的一个制作界面UI的库，里面包含了一些基础的界面交互图形，比如Button、Slider、Radio等等，而且提供了事件函数的接口，还允许重写类，增加自己想添加的事件响应。总之，使用了之后，就不需要自己暗戳戳写丑丑的界面，让你的界面看起来更加时尚。

二、实现效果

下面是我做出界面的最终效果，一共分为四个不同的面板，分别完成四种不同的功能，第一部分的色轮完成对所有线段的填色，第二部分是不同的画刷类型和橡皮，总共尝试了6种不同形状的笔刷，有的效果比较不错，有的就emmm模仿的不太像，第三部分是图形绘图部分，可以绘制圆、矩形和三角形三种填充图形，最后一部分是对图像的处理，一共实现了三种不同的风格化处理。

下面我就分别介绍一下。

实现的界面功能，主要使用了使用controlP5的button、colorwheel和radio。

1. 自由绘制

图表 1 喷枪效果笔刷

 

图表 2 水彩笔笔刷

 

图表 3 钢笔笔刷

 

图表 4 随机图形效果笔刷

 

图表 5 水彩效果笔刷

 

 

图表 6 泼墨效果笔刷

 

笔刷实现的原理还是很简单的，重要的是编写者组合时候的逻辑是怎么想的，这一点决定了最后笔刷的效果。主要说一下我对于创作笔刷的的三个思路：

1. 以line(mouseX,mouseY,pmouseX,pmouseY);为画线的工具，对于连贯性的线条以其为基础
2. 加入随机种子，对于不规则的笔刷效果，就让随机种子获取鼠标按下时的坐标，在特定范围绘制。
3. 基础图形的运用，在processing的创作中圆是被用到频率最高的图形，在绘制过程中可以加上点、圆的绘制，通过调节透明度就可以实现简单的水彩晕染的效果。

最后我用手绘板+实现的笔刷完成了一幅画作（样子过于丑陋）

 

2.图形绘制

其实我在第一部分制作的时候，犯了一个代码上的愚蠢错误，笔刷部分我全部使用Boolean变量控制开关，但是打开一个笔刷之后就关不上了，为了解决这个问题，我有添加的对应的一列radio，用于关闭笔刷，然后这就带来一个用户使用感上十分不方便的效果，你打开一种笔刷之后，想要换用下一种笔刷，还要再点一遍停止使用笔刷，一不小心忘记就会两种笔刷一起画。

在第二部分中我就改进了这个代码，开启一种形状的时候只有它为true，其他全部置为false，全部写到一个函数中就可以了。

第二部分的想法就是做一些几何风格的效果，没有什么难的算法

下面是我自己画的一些图

 

 

3.图像风格化处理

对于图像的风格化处理，这是我比较喜欢的一部份内容，所以，把它作为这个绘画程序的拓展功能来实现。

首先说一下实现的原理，我们都知道，一张图片是以像素的形式在屏幕上显示的，而一个像素  看放到最大，就是屏幕上的一个个点，processing则可以轻松获取这些点的颜色。

获取一张图片：

通过p1.get(i,j)获得对应位置的像素颜色。

然后就是发挥创造力的时间，获取了位置像素的颜色，可以重绘成圆，矩形，任意图形，或者是加上粒子效果，就可以得到动态的炫酷效果。

贴上我做的效果，重绘圆形、流线雨滴动态效果和任意图形效果。

三、总结思考

1.对于扩展绘画系统的理解。

扩展绘画系统，也就是不局限于绘画这一个功能，在此之上，能做出更加有趣的东西。

绘画是一个创作的过程，那么对于扩展绘画，就会包含自我创作之外的东西。

这就形成了我的想法，创作和再创作，绘画是创作的话，在其他人的作品上进行进一步的创作就被称为再创造。

这样的话也就是实现了扩展绘画的想法，能帮助使用者进行再创作。

2.实现想法

传统的绘画系统，比如说我们比较常用到的sai，功能定义明确，为绘画服务，提供了众多的笔刷和绘画工具，可以完成漂亮的手绘作品。还有我们平时会用到的简单绘图软件，主要的功能还是在绘图方面。

对于本次的实验方案呢，在保留了传统作画工具具有的基础功能之外，加入了对于图像再创作这一过程，通过获取图像的像素颜色，进行风格化处理，也就是说，我们是借鉴了已经存在作品的颜色，进行进一步的创作。

相比传统的绘图工具，该系统融合了更多的元素在其中，平衡了绘图工具带来的创作过程和对于现有图像的再创作过程。

参考资料：

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

3.processing基本绘制图形：https://blog.csdn.net/hewes/article/details/76358957

4.Processing ControlP5 example 1: user interface https://www.kasperkamperman.com/blog/processing-code/controlp5-library-example1/

5.controlP5开发文档 http://www.sojamo.de/libraries/controlP5/

6.如何用简单的processing技巧，玩坏一张图片？ https://mp.weixin.qq.com/s?__biz=MzA4NTc5MDU5OQ==&mid=2665102939&idx=1&sn=4697d12fd418711938844bba8f0c308b&chksm=84fc04b3b38b8da558f8a86c2aec216fca091332987adff3f30576ab7c181824ddb69d0b96d0&mpshare=1&scene=23&srcid=1223h3BYhCTGnqB15ziByZVx#rd