p5.js applyMatrix()函数

applyMatrix()是p5.js中一个用于变换矩阵转换的函数，它可以在2D和3D绘图中自由变换对象的位置、旋转和缩放等。本文将对该函数进行详细介绍。

语法

applyMatrix(a, b, c, d, e, f)
applyMatrix(n00, n01, n02, n03, n10, n11, n12, n13, n20, n21, n22, n23, n30, n31, n32, n33)

applyMatrix()函数可以用两种方式进行调用。第一种是使用6个数值$a,b,c,d,e,f$来指定变换矩阵。第二种则需要输入16个数值$n00$至$n33$以指定包括平移、旋转和缩放等在内的变换矩阵。

工作原理

applyMatrix()函数将取代之前的变换矩阵，并不是将当前的变换矩阵与之组合。因此，该函数的调用顺序十分关键，即先调用的applyMatrix()函数会对后续调用的产生影响。比如：

applyMatrix(1, 0, 0, 1, 50, 50);
applyMatrix(1, 0, 0, 1, 50, 50);  // 该语句继承了第一条语句中的变量，因此被认为无效
rect(0, 0, 50, 50);

在这个例子中，两个applyMatrix()语句都含有相同的值，因此第二条语句已经没有用了，只是将变换矩阵重复叠加一次，以最终画出带有移位的矩形。

另外，值得注意的是，applyMatrix()函数通常和resetMatrix()函数搭配使用。resetMatrix()可以重置变换矩阵，并且在这之后的applyMatrix()调用中，可以创建单独的矩阵，以避免误修改已经应用的变换矩阵。

例子

下面是两个使用applyMatrix()函数的例子。

基础使用

function setup(){
  createCanvas(200, 200);
}

function draw(){
  background("white");
  noStroke();
  fill("red");
  rect(50, 50, 100, 100);   // （1）绘制一个正方形

  applyMatrix(1, 0.5, -0.5, 1, mouseX, mouseY);   // (2) 矩阵变换
  fill("blue");
  rect(50, 50, 100, 100);   // （3）绘制一个变换过的正方形
}

在这个例子中，我们使用了2D矩阵变换来绘制矩形。我们首先在画布中绘制了一个(50, 50)为起点，长和宽都为100的正方形。之后在(2)处，我们用applyMatrix()函数来对该矩形进行矩阵变换。最后在(3)处，我们用变换后的矩阵来画一个蓝色的正方形。

复合旋转

function setup(){
  createCanvas(400, 400, WEBGL);
}

function draw(){
  background("white");
  
  noFill();
  stroke("black");
  box(100);

  push();
  rotateX(PI/3);
  applyMatrix(1, 0, 0, 0, cos(frameCount*0.01), -sin(frameCount*0.01), 0, 0, sin(frameCount*0.01), cos(frameCount*0.01), 0, 0, 0, 0, 0, 1);
  rotateY(PI/3);
  fill("yellow");
  box(50);
  pop();
}

在这个例子中，我们使用了3D矩阵变换来绘制box()示例。首先我们使用了自然坐标系中的一个正方体实例化box()函数，来在0,0,0处绘制一个黑边白面的正方体。之后，在第一个push()和pop()语句对之间，我们使用了rotateX()和rotateY()函数来指定3D场景的角度。最后我们将applyMatrix()函数在两个rotate()函数之间调用，用于生成复合的旋转变换。

结论

applyMatrix()函数可以让开发者在2D和3D绘图中自由地变换对象的位置、旋转和缩放等。 很多复杂的效果都需要使用这个函数来实现，还有很多其他的函数需要和applyMatrix()组合使用，如push()和pop()等等。但是在使用该函数时需要注意，对于多个连续的applyMatrix()，其调用顺序和将值传递给变换矩阵的语法都很重要。