基于p5.js的简单绘画系统

 

本次实验的主题是编写一个绘画系统，提供一系列绘画材料例如画笔、颜料、滤镜等给用户操作，以创作出动态、交互的绘画作品。这个绘画是对传统绘画概念的拓展，但仍然要体现出与传统绘画的相似性。

注意：目标可以理解为：

创作一个app,看起来比较像绘画工具，但又不是重复已知的绘画行为，而要体现出绘画出不来的效果：动态/UI或者意图，传统绘画是创作的一个平面视觉图像，这个app可以创作其他东西。

设计思路：

首先，三个基本要求：动态/UI/交互。关于UI和交互其实很多绘图软件里都很常见了，这是当然的，因为一个软件是给人用的，如果没有最基础的友好的ui和交互的话肯定没办法胜过其他软件，最后被淘汰。

所以要确定自己的系统要有UI、可交互。

接下来要大体考虑一下想通过这个绘画系统实现什么样的功能，然后再去通过代码实现。

本次实验借鉴了这篇博客：

https://blog.csdn.net/qq_27534999/article/details/79427721

 

由于是绘画系统，要让使用者能够进行交互的话要设计GUI界面，因此需要按钮，p5.dom里有提供关于直接在界面上创建按钮的函数，这里使用的方法是通过rect画出按钮然后判断鼠标是否点击在画出的范围内，然后再决定是否要执行接下来的事件。

整个界面布局如下：

 

画布右边是调色盘，底端是功能键，点击左二按钮会显示不同的三个数字，分别是1、2、3，代表本系统的三种笔刷

笔刷一（地狱恶犬笔刷）：

笔刷二（表情包笔刷）：