翻译

当你在这里使用 ProcessingJS 创建一个程序时，输出会在就一张图表纸的画布上显示。要绘制一个形状，你需要在该图表上指定其坐标。

例如，这里有一个简单的矩形，用代码 rect(20, 20, 40, 40) 绘制。坐标系统（一个比“图形纸”更专业的词）用灰色表示，为了使我们的示例图像更小，显示的坐标系统是200像素乘200像素（而不是默认的400x400大小）。这样你可以看到矩形在x=20，y=20，宽和高均为40：

如果你想将矩形向右移60个单位，并向下移80个单位，你可以通过增加 x 和 y 的起点来改变坐标：rect(20 + 60, 20 + 80, 40, 40) ，矩形就会出现在不同的地方。（我们把箭头放在那里是为了增加戏剧性效果。）

但还有一种更有趣的方法：移动图表纸。如果你把坐标纸向右移60个单位然后向下移80个单位，你会得到完全相同的视觉结果。我们把移动坐标系称为转换 (translation) 。

在前面的图表中需要注意的重要一点是，就矩形而言，它根本没有移动。它的左上角仍然在 (20,20)。当你使用转换时，你画的形状永远不会改变位置；坐标系会。

这是一个程序，它绘制了一个初始的矩形，然后通过改变其坐标在新位置用红色绘制一个矩形，然后通过移动网格（translate()）在新位置用蓝色绘制一个矩形。填充色是半透明的，所以你可以看到红色和蓝色几乎在同一个地方重叠形成一个紫色的正方形。只是用来移动它们的方法不同。改变下面的数字，自己试一试：

让我们更详细地看看转换过程的代码。 pushMatrix() 是一个内置函数，可以保存坐标系统的当前位置。translate(60, 80) 将坐标系统向右移动60个单位，向下移动80个单位。 rect(20, 20, 40, 40) 在原来的位置绘制矩形。记住，你画的东西不会移动——只有网格会移动。最后， popMatrix() 可将坐标系统恢复到转换之前的位置。

为什么用 pushMatrix() 和 popMatrix()？ 你可以用translate(-60, -80) 将网格移回原来的位置。但是，当你开始使用坐标系统执行更复杂的操作时，使用 pushMatrix() 和 popMatrix() 来保存并恢复状态，要比撤消所有操作更容易。稍后在本节中，你将了解为什么这些函数的名称如此奇怪。

你可能会想拿起坐标系统并移动它比仅仅增加坐标要麻烦得多。对于像矩形这样的简单例子，你说的没错。但是，让我们再举一个例子来说明 translate() 如何让程序变得更简单。

这是一个用来画一排房子的程序。它使用了一个循环来调用函数 drawHouse()，该函数以房子左上角的 x 和 y 位置作为参数。注意，drawHouse 函数必须进行大量的参数操作，才能在给定的坐标处绘制房子：

如果我们不计算新的坐标，而使用 translate() 函数呢？在这种情况下，代码每次都在相同的位置（左上角为(0,0)）绘制房子，让转换函数完成所有工作。

这并不意味着你应该总是优先使用 translate() ，而不是去计算新的坐标。和我们所教授的内容一样，转换只是你的工具箱中的另一个工具，你将决定何时使用这个新的 translate() 工具。

本文改编自 J David Eisenberg 的 2D Transformations，在 Creative Commons Attribution-NonCommercial-ShareAlike 许可证下使用。