绘画系统的简单实现（p5.js）

绘画定义

搜狗词条给了“绘画”一个很有意思的词----“猴子的艺术”，这是在中世纪的欧洲这样形容的，我觉得十分地贴切，因为如同猴子喜欢模仿人类活动一样，绘画也是模仿场景。

对绘画的基本定义------绘画是造型艺术中最主要的一种艺术形式。它是指运用线条、色彩和形体等艺术语言，通过造型、设色和构图等艺术手段，在二维空间(即平面)里塑造出静态的视觉形象，以表达作者审美感受的艺术形式。

关于绘画分类

从使用材料、工具和技法划分：中国画、油画、素描、版画、水彩画、水粉画、粉笔画等。

从题材内容划分：肖像画、风景画、风俗画、静物画、历史画、宗教画、动物画等。

从作品形式的不同划分：壁画、年画、连环画、宣传画、漫画等。

绘画是另一种形式的语言，其表现方式主要有以下几个部分体现

(1)线条;(2)形体;(3)色彩;(4)色调;(5)动感;(6)笔墨(笔触)

而对于要自己开发一个简单的绘画系统，我主要从 线条，色彩，动感和笔触这四个方面进行研究和设计。

先来看看windows自带的绘画系统

整体界面

界面比较简洁，明了，上部分是工具栏，可供用户进行笔刷形状的选择，粗细的调整，颜色的选择，下半部分就是画布。

笔刷

其笔刷主要有以下几种，质感不同，粗细不同

设计的绘画系统

本次设计的绘画系统也模仿其上，主要结构和上图类似，也就是简单地上面是工具栏，下面是画布，如下图（以深墨绿色作为画布）

高更说：“画面的表现内容，在它被人们认清之前，必须像一支有魅力的乐曲，浮现出来。”

本绘画系统打破常规，在基本的绘画基础上，丰富展现交互的形式。

效果展示

- 画线

- 画圆

- 花环

- 惊讶脸&爱心

- moveline

- 莫比乌斯环

- 有趣的点线

- 烟花

- 会变粗细的点

- 绒毛状笔刷

- 文字笔刷

- 橡皮擦

基本的笔刷功能的展现就到此处

与普通绘画系统的对比

操作角度：

同：和普通的绘画系统基本一致，都是通过鼠标的点击、滑动进行绘画，
异：此绘画系统通过键盘上的方向键↑↓来更改笔刷的粗细。

工具：

同：都提供了颜色，以及笔刷的选择
异：此绘画系统提供的笔刷形状不同于普通绘画系统的单一线条，提供了各种涂鸦形状，如：心形，惊讶脸，莫比乌斯环，圆圈，文字，绒毛状的笔刷，烟花等。

技法：

同：都是用鼠标进行绘制
异：普通绘画系统的线条主要是跟随鼠标的位置进行移动其他的不受影响，而本绘画系统，线条除了受鼠标位置的影响，还受鼠标移动速度的影响。

理念：

同：都是想让作画者在画作面前驰骋自己的联想和想象，达到心旷神怡的最佳审美境界。

创作体验：

异：此绘画系统能够很好的进行交互而且画出的形状种类繁多，都些笔刷甚至可以达到治愈的效果

呈现效果：

异：普通的绘画系统最终所作的图是静态的，而本绘画系统最终的呈现是动态的，更加富有趣味性。普通的绘画系统主要是在二维平面上，而本绘画系统可以体现三维空间上。

载体：

异：普通的绘画系统主要是以App/软件作为载体
本绘画系统是在网页上进行的，无需安装，当然也是可以保存画作的。

保存方式：

同：如只需保存静态图，对于静态图而言，和普通的绘画系统并无二致
异：本绘画系统一般创作的均为动态图，因此要体现动图，必须进行录屏操作。

局限性：

普通的绘画系统无法体现动态的效果，缺乏一定的趣味性，这些此款绘画系统可以解决，但是此款绘画系统的不足之处在于，在画动图的时候消耗的内存较大，在网页上运行时可能会出现卡顿的现象，从而来影响体验。

关于

本绘画系统运用p5.js ，简单运用了粒子系统

绘制形状主要运用了如下函数
rect();ellipse(); line(); bezier();text();
其他的一些重要函数：
map();resetMatrix(); saveCanvas();keyPressed(); mouseClicked();等等

创新之处

制作出了具有绒毛质感的笔刷
运用动态的烟花进行绘画
使用的线条有治愈的效果

灵感来源

想到了表演艺术导演蔡国强老师，他对焰火艺术有独特的理解，用焰火的痕迹创作了很多画作

我也想用烟花留下的痕迹来试试绘画的效果，所以就在绘画系统中运用了一下。
有些绘画是具有治愈功能的，想通过此动画系统也实现一下具有治愈功能的绘画方式，以及绘画作品。
字符图片的创作（将一张图片转化成字符图片如下图，最近又十分流行）

在绘画系统中实现用字符画画（将字符转画），并且实现动态的效果

本绘画系统还有很多不足之处：
本系统只选了最近比较流行的颜色，柠檬黄，火焰红，岛屿天堂蓝，尼加拉蓝等，因此颜色不够丰富。
笔刷形式也有局限性

在这里要特别感谢西河某人的博客提供的p5.js web界面显示的框架，以及在魔笔玩家博客中受到的启发。

参考文献

[1]以编程的思想来理解绘画----（一）用”一笔画“表现“过程美” magicbrushlv
[2]p5.js可以做什么之创意动态绘图板西河某人
[3]《绘画色彩》
[4]《processing创意编程》