p5.js之绘画系统

主题

编写一个“绘画系统”，提供一系列绘画材料（例如画笔/颜料/滤镜）给用户操作，以创作出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念的扩展，但仍然体现出与传统绘画系统的相似性。
使用的依旧是p5.js，参考的是网络上可以找到的唯一一个类似程序，感谢大佬。
参考的原博客：https://blog.csdn.net/qq_27534999/article/details/79427721
源代码地址：https://editor.p5js.org/WestRiverLin/sketches/SJnD_deBW
原程序效果：

之后是小菜鸡学习后有所增减的程序：

功能介绍

1、色彩调节
增加两组slider，分别调节画布颜色和笔刷颜色，其实想达到PS取色器的效果，但是并没有找到示例程序，所以只能用slider实现颜色选择。
2、笔刷调节
同样用slider来调节笔刷大小。
以上部分的代码如下：

  rSlider = createSlider(0, 255, 100);
  rSlider.position(495, 20);
  gSlider = createSlider(0, 255, 0);
  gSlider.position(495, 40);
  bSlider = createSlider(0, 255, 255);
  bSlider.position(495, 60);

  rSlider1 = createSlider(0, 255, 100);
  rSlider1.position(495, 100);
  gSlider1 = createSlider(0, 255, 0);
  gSlider1.position(495, 120);
  bSlider1 = createSlider(0, 255, 255);
  bSlider1.position(495, 140);

  sSlider = createSlider(0, 5, 1);
  sSlider.position(495, 180);

function draw() {
   

  var bR = rSlider.value();
  var bG = gSlider.value();
  var bB= bSlider.value();
  var s= sSlider.value();
 
  background(bR, bG, bB);
  timepast += 1 / FPS;
  fill(150,205,205);
  rect(480, 0, 200, 450);
  fill(0);
  textSize(13);
  text("笔刷大小",560,185);
  text("画布颜色",560,20);
  text("笔刷颜色",560,100);
  textSize(10);
  text("R", rSlider.x * 1.02 + rSlider.width, 35);
  text("G", gSlider.x * 1.02 + gSlider.width, 55);
  text("B", bSlider.x * 1.02 + bSlider.width, 75);
  
  
  text("R", rSlider1.x * 1.02 + rSlider1.width, 115);
  text("G", gSlider1.x * 1.02 + gSlider1.width, 135);
  text("B", bSlider1.x * 1.02 + bSlider1.width, 155);
  var R = rSlider1.value();
  var G = gSlider1.value();
  var B = bSlider1.value();

3、笔刷选择
一部分笔刷沿用了参考程序，如三角、圆形、直线、橡皮、时钟等，然后自己增加了方形笔刷和导入图片使用的特殊笔刷。
笔刷代码如下：

function FuncBtn(X, Y, W, H, CMD) {
   
  this.x = X;
  this.y = Y;
  this.w = W;
  this.h = H;
  this.cmd = CMD;
}

FuncBtn.prototype.isMouseInBtn = function() {
   
  if (mouseX >= this.x && mouseX <= this.x + this.w &&
    mouseY >= this.y && mouseY <= this.y + this.h) {
   
    return true;
  } else {
   
    return false;
  }
}
FuncBtn.prototype.clickBtn = function() {
   
  print("ClickBtn!");
    if (this.cmd == "pause") {
   
    isPlaying = false;
    for (var i = 0; i < objs.length; i++) {
   
      objs[i].isPlaying = false;
    }
    this.cmd = "play";

  } else if (this.cmd == "play") {
   
    isPlaying = true;
    for (var i = 0; i < objs.length; i++) {
   
      objs[i].isPlaying = true;
    }
    this.cmd = "pause";

  } else if (this.cmd == "timer") {
   
    brushType = "TIMER";

  } else if (this.cmd == "eraser") {
   
    brushType = "ERASER";
  } else if (this.cmd == "clear") {
   
    objs = [];
 } else if (this.cmd == "save") {
   
     saveCanvas("Painting", "png")
  } else if (this.cmd == "circle") {
   
    brushType = "TRIANGLE";
    pbrushType = "CIRCLE";
    this.cmd = "triangle";

  } else if (this.cmd == "triangle") {
   
    brushType = "LINES";
    pbrushType = "TRIANGLE";
    this.cmd = "lines";

  } else if (this.cmd == "lines") {
   
    brushType = "CIRCLE";
    pbrushType = "LINES";
    this.cmd = "circle";
  }
  else if (this.cmd == "cube") {
   
    brushType = "CUBE";
  }
  else if (this.cmd == "snow") {
   
    brushType = "SNOW";
  }
  else if (this.cmd == "flower") {
   
    brushType = "FLOWER";
  }
  else if (this.cmd == "moon") {
   
    brushType = "MOON";
  }
  else if (this.cmd == "z") {
   
    brushType = "Z";
  }
  else if (this.cmd == "water") {
   
    brushType = "WATER";
  }

}
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 == "pause") {
   
    fill(0);
    translate(this.x + this.w / 2, this.y + this.h / 2);
    rectMode(CENTER);
    rect(-4, 0