前言

此扩展绘画系统主要目的是实现更具艺术效果的绘画系统。与传统绘画系统相比增添了更加便利的艺术笔刷，并提供了更多交互方式，极大丰富化传统绘画模式。
这次项目首次使用Processing的Java框架编写，和P5.js有一定区别。
Java学的太过久远，记忆都有点模糊了，因此有很多不熟悉的地方，编写起来有些磕磕绊绊。两者之间的转换有参考资料。

绘画系统总体设计方案

程序主界面

之所以这么丑是因为时间紧迫，我直接用的Processing官网给的GUI中的Button例子改写而来，肯定是有其它更好的GUI设计的，暂时先不调整。

交互体现

灵感来源于很多网站都有的动态交互背景，鼠标划过后鼠标周围点联结绘制三角形图案。
效果如图：

主要实现原理：
创建一个数组，用于存储n个指定范围内随机二维向量。
定义一个类，里面定义显示和更新的方法。
然后引用类的对象依次读取这些向量，将其转化为点的坐标并通过显示方法绘制成随机颜色的小圆点。
如果第一点和第二个点的距离小于某指定值，则将引用第三个对象，即鼠标控制的对象来完成三角形的绘制。
三角形的绘制采用

            beginShape();vertex(dots3.location.x, dots3.location.y);vertex(dots2.location.x, dots2.location.y);vertex(dots1.location.x, dots1.location.y);endShape();

对于点的更新则是通过将点的坐标加上某一速度来完成。
速度也是一个二维矢量，大小随机,正负值都有，因而每点运动方向都不同。
当点与屏幕中心的距离超过某一指定值时，将速度*(-1)，使其反向运动。
实现效果是在Processing编程艺术案例基础上改写而成。

粒子笔刷

效果如图：

关于粒子系统的代码非常多，这里实现的是很简单的一种绘制方式，没什么可讲的，主要是调整参数。可以去Processing官网上看看基础案例。
部分参数设置如下：

    pushMatrix();noStroke();float r = random(0,187);float g = random(134,205);float b = random(139,255);fill(r,g,b, lifespan);ellipse(position.x+random(5,8), position.y+random(5,8), 4, 4);popMatrix();

Points笔刷

效果如图：

根据网页资料上一个笔刷改写而来，原笔刷效果如图：

部分参数设置如下：

dx=mouseX-lastX;dy=mouseY-lastY;dis =sqrt(dx*dx+dy*dy);ox=40*sc/dis*random(1,1.3);oy=40*sc/dis*random(1,1.3);noStroke();color col= color(random(75,185),random(25,150),random(125,255),random(25,150));if (lastX == 0){noStroke();fill(col);ellipse(mouseX, mouseY, ox, oy);check = 1;}else{if ((dis>2*l)&&(dis<4*l)){noStroke();fill(col);ellipse(mouseX, mouseY, ox, oy);check = 1;}else if ((dis>l/2)&&(dis<2*l)){noStroke();fill(col);ellipse(mouseX-lastX/random(5,10), mouseY, ox, oy);ellipse(mouseX-lastX/random(5,10), mouseY-lastY/random(5,10), ox, oy);check = 1;}}if(check ==1){     lastX = mouseX;lastY= mouseY;}

Ink笔刷

效果：

这个笔刷很巧妙之处在于颜色和宽度的设置。
R由mouseX映射而来，G由mouseY映射而来，B的值由鼠标位置与屏幕中心的距离决定。
线宽则由鼠标移动速度决定。

主要实现机制：
R、B通过map()分别将mouseX、mouseY由0–width映射到0–255。
alpha和lineWidth通过map()将speed分别映射到一定范围内。
将lineWidth设置成指定范围内随机数。

其它笔刷

绘图示例

扩展绘画概念理解

由于绘画的概念没有特别明确且约定俗成的定义，仁者见仁智者见智，如果将绘画定义为某种思想的抽象艺术表达，那么较于传统绘画，一个绘画系统可以拓展各种方式的创作。比如：
音乐、声音控制绘画
体感温度控制绘画
多人运动轨迹的绘画
机器绘画
…
最终呈现的作品无论是何种形式，如果有一定艺术效果的呈现又有作者本人的思想表达，那么这就是一个绘画作品。因此绘画的外扩性非常强。

与常规绘画系统的比较

技法
此绘画系统对于“拖拽”、“悬停”、“长按”等技法的表现更明显更丰富。
工具
均支持鼠标、触摸板等工具。
理念
传统绘画系统更严谨、更精细。
此系统理念更偏向“趣味”的理念。
创作体验
对于部分艺术效果的表达，尤其是涉及到动态和交互领域，此绘画系统体验更佳。也更具趣味性。但对于精准的线条表达不及传统绘画系统。
呈现效果
传统绘画系统表达更精细、更偏于静态。
此系统表达更具一定艺术效果、更偏于动态。
载体
基本几何元素更加丰富。
局限性
不能完成普通纯色线条绘制。颜色选择更少。
应用
此系统更适宜应用在动态交互艺术效果的表达、gif的制作领域。

参考资料

https://blog.csdn.net/hewes/article/details/80082902

http://iprocessing.cn/2017/07/12/第一期，超炫大boss圆形、网格、结点/

https://www.openprocessing.org/sketch/17213

https://www.openprocessing.org/sketch/17260

https://www.openprocessing.org/sketch/415792

https://processing.org/examples/multipleparticlesystems.html

Processing —— 简易绘画系统相关推荐

互动媒体技术——Processing创意绘画系统
互动媒体技术--Processing创意绘画系统总体设计思路工具:Processing Processing是一个为开发面向图形的应用(visually oriented appli ...
互动媒体技术期末作业——简易绘画系统
主题编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...
基于processing的交互动态绘画系统
关于绘画我认为绘画就是将自己的意识与思想通过一些手段呈现在载体上的作品,这种呈现方式可以是多种多样的,不论是用画笔涂鸦,颜料泼洒,或者是通过手势肢体控制,只要倾注了自己的感情自己的想法,那么就是一张 ...
基于Processing和Leap Motion的绘画系统
对传统的绘画系统的思考一说到绘画,大家脑海中出现的画面应该差不多都是画家和他手中的笔还有面前的画板吧.确实,在传统的绘画系统中,各种各样的笔和纸是画家们最重要的创作工具.不管是铅笔.毛笔,还是蜡笔. ...
Processing大作业——绘画系统
最终迎来了互动媒体最终的大作业,前两次我们分别讨论了,手绘和码绘的区别还有如何进行动态作画. 有兴趣的可以戳下方链接看一看我之前的两次作业. 第一次码绘VS手绘指路:https://blog.csdn ...
绘画系统-Processing版
创作了两个版本的绘画系统,MATLAB版请移步https://blog.csdn.net/dont_like_jiemo/article/details/85345407 -------------- ...
互动媒体大作业——绘画系统
绘画系统实验心得这学期接触了"互动媒体技术"这门课,感触颇深.因为在第四维(根据爱因斯坦相对论),在时间上的重复,在传统静态绘画中是不可能实现的,但用编程就可以做到.这样一来,通 ...
纯属娱乐的涂色绘画系统
P5.js 之秘密花园--自制线稿上色绘画系统一.灵感来源小时候大家肯定都会见过或者玩过这个,砂画就是给一个模板上面会有轮廓,然后用给好的彩砂颜料上色,画完之后还blingbling的,也是很好 ...
绘画系统的简单实现（p5.js）
绘画定义搜狗词条给了"绘画"一个很有意思的词----"猴子的艺术",这是在中世纪的欧洲这样形容的,我觉得十分地贴切,因为如同猴子喜欢模仿人类活动一样,绘画也是 ...

Processing —— 简易绘画系统

前言