用p5.js实现动态形状笔刷

用p5.js实现动态创意画板

跟之前两篇文章有关联的是，这次也是为了互动媒体大作业写了一篇博客。

这次的作业内容是编写一个绘画系统，提供一系列绘画颜料给用户操作，这颜料可以是画笔、颜料或者滤镜的形式，然后创造出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念进行扩展，但仍然要体现出与传统绘画系统的相似性。

按照习惯我们还是先放出成品图。
（时间原因就只是实现了最基本的功能）

这一次的作业相比较之前的有所进化，我们需要做出一个系统，使得画布上的东西不再局限于静态的东西，可以形式更丰富的展示自己的绘画作品。

一开始脑子里没有太多头绪，就先网上找了一些博客看看能不能激发一下灵感。幸运的是我找到了一篇博客，这篇博客写得挺好，我的这一个作业就是基于这篇博客作者写的框架进行修改的。想要了解的可以戳一戳p5.js可以做什么 之 创意动态绘图板。十分感谢博主的分享！！！

那现在我们正式进入正题。

传统画板与动态画板

问一句，传统画板有啥？

一般来说，对于不从事专业领域的人员，画板大概就是一张纸，而能作用的颜料就是平常我们在文具店能买到的铅笔、彩铅、水彩颜料、油画颜料等等。而对于比较专业一点的，他对于画板的定义又更加广泛了些。数字绘画是常用的艺术表现形式，画家使用ps、sai或者painter等一些软件进行艺术创作。这样，艺术创造编不仅限于纸张，而是可以通过电脑进行绘画。

而我们现在做画板的选择性就更多了。我们可以选择复刻一个软件或者主要实现其中的一项功能。

而我这次主要做的就是形状笔刷的实现。

我们先来看看传统笔刷里面有什么。

在早式传统绘画中的笔刷是这样子的。
这是早期的笔刷。艺术家们如果要进行作品塑造，那就得用上图的笔刷一笔一笔的刻画。

那么电脑绘画是不是也需要这样复杂的操作呢？

回答是，要。

只不过电脑有个更方便的操作就是形状笔刷。

这是我自己在网上找的ps笔刷素材，展示了一个局部缩略图，那么它使用起来是怎么样的呢？

这是我用95号笔刷刷出来的效果。可以看出来叶子的形状已经被我们刷上去了，甚至还带着颜色。

这就是数字绘画中的笔刷。

动态画板

不过既然要创新，那就要从这两个已有的形式找相似点与不同点。

我找到了两个相似点——
1.需要人去画；
2.呈现效果是静态的。

一个最主要的不同点——
数字绘画有形状笔刷可以减少重复性操作。

举个简单的例子，画一片草地。
按照笔者画画的速度，传统绘画需要用笔刷一点一点去细扣，画出一片草地最快五分钟。
数字绘画可以选中对应形状笔刷，用数位笔一刷，三秒一片草地。

可以看出，在不必要的重复操作上，形状笔刷可以是你画画很好的利器了！

于是在设计大作业功能模块的时候，在借鉴之前提到那篇博文的基础上，进行了形状笔刷的添加。具体一点就是实现了动态草地以及动态河流的形状笔刷。

下面是动态图：
我种下了一片草：）
第一次刷可以看出正余弦的图像，多刷几次就像一片草了。

画波光粼粼的湖面~
我画一座山：）
画一个月亮~
（好像变成太阳了…）

代码部分

代码的结构参考的是上面提到的那篇文章p5.js可以做什么 之 创意动态绘图板

代码主体分为两个大框架：
1.功能函数
2.绘制函数

功能函数框架建立
这个函数主要是