基于P5.js的动态绘板

前言

这次的实验要求是做一个动态绘板，我还是同前两次作业一样使用的P5.JS。其实拿到这个题目的最开始还是有很多想法的，比如做一些类似油画的处理，水墨画的处理，也有想过能不能对画面进行拟物处理从而创造出新的画面。但是怎么说呢，想象很丰满，现实很骨感，我这个大概算是格外骨感，最后在经历期末地狱的各种兵荒马乱后也只完成了一个普通的基础画板，还是极大地参考了一个（大家都看过的）画板代码的成果。

参考连接：https://blog.csdn.net/qq_27534999/article/details/79427721）

设计方案

一个画板首先要具有的功能就是能画，但是“画”的定义本身就是很模糊的，在这里我擅自理解为可以进行交互并最终有画面可见。因此首先需要的就是一块画布，那么画布已经由善良的P5.JS提供了，我十分偷懒地在背景上只换了几个颜色。那么除此之外我们需要解决的就是画笔了。画笔的表现形式是多种多样的，我在这里主要设置了三类画笔，下面会分别介绍。

背景板：

红圈的地方就是更换背景颜色的地方啦，准备了四个颜色供大家更换，按钮里面的圈圈显示的颜色就是下一个可更换的背景色，有两个深色两个浅色。