用P5.js实现一个动态的绘画系统

摘要

通过一段时间的学习，我发现码绘的可能性比我想象的要更大，我们可以用码绘实现很多手绘很难达到的效果，比如创作一幅会动的、能进行交互的画作。如何通过类似画笔的东西在屏幕上创作出时刻在改变的，并且我们可以进行实时修改的像动画一样的作品？这就是我想要通过这个绘画系统想要做到的事。

基本原理

为了实现上面的想法，再结合使用的编程语言，我决定将绘画的最小单位设置成一个个矩形，类似于电脑图像里像素的概念。当然也可以是圆形三角形，因为这些图形在p5.js中的绘制方法都差不多。确定了这一点，也就确定了这个我们的编程是面向一个个矩形对象来进行的，也就是面向对象的编程。所以，我们接下来要让我们的对象的信息完善一下，方便我们对它进行操作。最基本的就是这个矩形的位置与大小信息了。我将整块画布按照规定的矩形的尺寸均匀划分成若干矩形，这些矩形的中心坐标就是它们的坐标。所以首先要将所有的矩形创建出来，并保存它们的中心坐标与大小信息。

function initrects() {
  var i = 0,
    j = 0;
  for (var x = rectwidth / 2; x <= width; x += rectwidth) {
    i = floor(x / rectwidth);
    rects[i] = [];
    for (var y = rectheight / 2; y <= height; y += rectheight) {
      j = floor(y / rectheight);
      rects[i][j] = new myrect(x, y, rectwidth, rectheight);
    }
  }
  rectswidth = i + 1;
  rectsheight = j + 1;
}

这个函数中rectwidth与rectheight是矩形的宽度与高度，rects[]是用来存储每个矩阵的二维对象数组，rectswidth 与rectsheight 是这个数组的宽度与高度。因为矩形是基于其中心坐标开始绘制的，所以从(rectwidth / 2,rectheight / 2)处开始对画布进行矩形的划分，其中myrect()存放的就是每个矩形的信息，如下：

function myrect(x, y, rectwidth, rectheight) {
	//中心坐标
  this.x = x;
  this.y = y;
	//方块长宽
  this.rectwidth = rectwidth;
  this.rectheight = rectheight;
	//方块填充颜色
  this.r = random() * 255;
  this.g = random() * 255;
  this.b = random() * 255;
  //绘制方块
  this.drawrect = function() {
    fill(this.r, this.g, this.b);
    rect(this.x, this.y, this.rectwidth, this.rectheight);
  }
  }

这样就在画布上均匀的创建了若干个myrect()对象，并且我还赋予了它们显示自己的函数drawrect(),于是在每一帧，我们只需要逐个调用每一个矩形的显示函数就可以在画布上将它们绘制出来，就像这样：

接下来我们需要一个能实现画笔功能的东西，通过这个画笔，我们可以把每一个方块改成我们想要的颜色。我们也将它看成一个对象，通过对这个对象增加函数，我们就可以得到一支多功能的画笔！首先我们给它增加一个改变颜色的功能：

mybrush = new Brush();
function Brush() {
  this.Brushsize = 2;
  this.r = 0;
  this.g = 0;
  this.b = 0;
  this.minx=0;
  this.maxx=0;
  this.miny=0;
  this.maxy=0;
  //画线函数
  this.doBrushStroke = function() {
    this.minx = floor(max(mouseX - mybrush.Brushsize / 2, 0) / rectwidth);
    this.maxx = floor(min(mouseX + mybrush.Brushsize / 2, width) / rectwidth);
    this.miny = floor(max(mouseY - mybru