P5.js 实现交互式动态绘画

1.关于交互式绘画的思考

在前几次的实验中，我们先后完成了静态码绘和动态码绘，对计算机码绘已经有了基本的了解。
在之前的文章中我也有提到过：
一副有趣的码绘需要更多理性的思考，想要实现一个有趣且内容丰富的码绘需要一定的代码经验和创造力。
但是如果这里有一个这样的绘图工具，它的线条和笔刷工具有着普通画板没有的动态效果，绘制出的图像也能在各种工具的作用下进行调整，实现一种交互式绘画。
这样哪怕是没有经过训练的初学者，也可以使用工具很快地画出有趣的作品。

2.选定题目

明确了题目为交互式的绘画体验，但是如何实现，实现什么功能，针对这几个问题我们也是思考了很久。
最初的方案有这么几个
①、一个可以交互的2d动态小游戏
②、一个可以处理用户上传的图片的滤镜工具
③、一个可以进行交互式画板
分开来看：
第一个方案下，我们一开始的思路主要是想要丰富游戏内容，希望游戏本身能够有意思，但是这样失去了一定交互性质，并不能让用户体会到题目：交互式绘画这样一个主题。
第二个方案，实现一个滤镜工具，更像是一个小应用，用户上传图片以后，根据我们提供的滤镜对图片进行处理，也不是那么切合题目。
着重介绍一下最后一个方案，也是我们使用了的方案，交互式画板。
在确定交互式画板之前，我们去查找了一些资料。
然后看到了CSDN博主@西河某人用p5.js制作的创意动态绘画版，受到了很大的启发。

通过这个我们意识到：
交互式的绘画，大家都是制作出笔刷之后，将笔刷与固定的动作绑定，然后再对画出的动态线条进行操作。
这样有一定的局限性，如果说，将笔刷与固定的动作分开，用户可以自由选择笔刷的形状，并且可以自由选择并且组合动作的种类，这样，交互体验肯定会有一定的提高。
如果再在这个基础上，增加一个图片上传功能，用户可以在照片或者图片上添加自己喜欢的动效（想想就很有趣）。

3.内容展示

整个项目历时两周多一点的时间，大概有一周左右的时间是在讨论题目方向和内容，确定题目以后，花了一周的时间，先是仔细研读案例内容，进行一定的代码重构，然后优化原本的功能，加入自己的想法。
最终的效果大概就像下面展示的那样：

在这张演示中，我先是上传了一张图片，然后使用了雪花的笔刷，又使用了“下落”“淡入淡出”还有“灯晕”这三个动作对其进行处理。
在这份工具中，所有的笔刷都可以和动作进行自由组合。
并且笔刷的数量非常多，除了基本的圆形，三角形，正方形以及线。还有雪花，樱花，五角星等等。
还有其他一些功能，比如说：
开关等切换背景颜色
停止所有动作
暂停鼠标点击位置的动作
橡皮擦
清空画布
保存画布内容
这里还有一个不得不说一下的功能：粒子特效，这是我在实验二中实现过的特效功能，最初的打算是“当用户上传一张图片，粒子效果可以覆盖在图片上，形成类似于动态滤镜的效果”（当然这里改了一下方向，变成从上到下下落）。

但是实际使用的时候，粒子效果将上传的图片被挤出了canvas（这就很难受了）。
所以没能实际用上这个粒子系统。

4.代码分析

这一个小应用由我们一个两人团队共同完成，代码总量在1400行左右，没办法逐块仔细分析，所以我就一些重点和典型说一下它们的实现。

(1).按钮的实现

这里不管是功能按钮还是选色按钮，它们都有自己的基础属性，位置。然后颜色按钮有自己的RGB值，功能按钮有自己的功能名称。

		
        //ColorButton
        
        function ColorBtn(X, Y, W, H, givenR, givenG, givenB) {
   //绘制色卡
            this.x = X;
            this.y = Y;
            this.w = W;
            this.h = H;
            this.r = givenR;
            this.g = givenG;
            this.b = givenB;
        }
        
        //FunctionButton
        
         function FuncBtn(X, Y, W, H, CMD) {
   
            this.x = X;
            this.y = Y;
            this.w = W;
            this.h = H;
            this.cmd = CMD;
        }

接着对于所有按钮来说，会有一个点击事件，我将他们统一放在.clickBtn这个属性方法里，以开灯按钮为例，点击确定后，除了更改背景的RGB值，还有一个就是更改按钮本身的名称为关灯，以此来改变按钮的外观。

↓

FuncBtn.prototype.clickBtn = function() {
   


            print("ClickBtn!");
            if (this.cmd == "sun") {
   
                bR = 200;
                bG = 255;
                bB = 255;
                this.cmd = "moon";

            }
}

这里我们没有使用P5.js的第三方库，P5.GUI.js而是用原生的p5.js画出了一个个按钮，还是以开关灯举例。

FuncBtn.prototype.displayBtn = function() {
   //绘制按钮


            stroke(0);
            strokeWeight(1);
            fill(255, 255, 255);
            rect(this.x, this.y, this.w, this.h, 5);


            if (this.cmd == "sun") {
   //绘制太阳情况时的按钮
                fill(255, 50, 50);
                translate(this.x + this.w / 2, this.y + this.h / 2);
                for (var i = 0; i < 8; i++) {
   
                    rotate(PI / 4.0);
                    line(0, 0, 8, 8);
                }
                resetMatrix();
                ellipse(this.x + this.<