英语原文链接：Coordinate System and Shapes

本教程适用于Processing 1.1+版本，内容来自于此书：Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright 2008 Elsevier Inc. All rights reserved。

坐标空间

在我们开始使用Processing编程之前，我们必须先引导自己回到八年级的学生时代，拿出一张方格纸，然后画一根线。两点间的最短距离是一根经典的直线，这就是我们学习的开始，通过方格纸上的两点。

上图展示了通过点A(1,0)和点B(4,5)的一根直线。如果你想让你的朋友来画同样的一根线，你会和他说，“请画一根从点(1,0)到点(4,5)的直线”。那么，现在假设你的朋友是一台电脑，而你想指示这个数字朋友去在它的屏幕上显示同样的直线。这可以用同样的命令完成（只是这时你可以跳过客套，而必须使用精确的格式）。此处，指令看起来会是这样：

line(1,0,4,5);

即使没有学习过写代码的语法，上面语句的意思应该也比较明了。我们给机器提供了一个命令（我们称之为“函数”）去让它画线。另外，我们指定了一些参数去说明要如何画线，从点A(1,0)到点B(4,5)。如果你把这行代码看作是一个句子，那么函数就是动词，参数就是句子的宾语。代码语句使用分号结束而不是句号。


这里的关键是要认识到，电脑屏幕只不过是一张华丽的方格纸。屏幕上的每一个像素是一个坐标----两个数字，一个x（横坐标），一个y（纵坐标），它们决定了一点在空间中的位置。然后我们的工作就是指定在这些像素坐标中要显示什么形状和颜色。

然而，这里有一个陷阱。八年级的方格纸（笛卡尔坐标系）把原点(0,0)放置在中心，y轴向上，x轴向右（正方向是这样，反方向是向下和右左）。但是对于电脑窗口中的像素来说，沿y轴方向是相反的。原点(0,0)在左上方，水平向右和垂直向下是正方向。

简单形状

大部分的编程实例中，你会看到Processing的可视化是很自然的。这些实例的核心，包括绘制形状和设置像素。让我们先看一下四种基本形状。

对于每一个形状，我们会问自己需要什么样的信息去指定它的位置和大小（稍后还有颜色），并学习Processing期望如何接受这些信息。在下面的各图中，我们会设定窗口大小为10*10像素。这不是特别真实，当你真正开始编码时，你很可能工作在更大的窗口上（10*10像素在屏幕上仅几毫米空间）。不过，出于演示的目的，使用小些的数字会比较好，可以描绘出在方格纸上（就现在而言）可能出现的像素，以更好地说明每一行代码的内部运作。

point()是最简单的形状，也是开始学习的一个好切入点。要绘制一个点，我们只需要一个x和y坐标。

 line() 也不会很难，它只简单地需要两个点： (x1,y1) 和(x2,y2)。 

当我们到达使用 rect() 绘制矩形时，事情开始变得复杂了一些。 在Processing中，一个矩形由它的左上角坐标，以及它的长和宽来指定。 

绘制矩形的第二种方法是指定中心点，以及宽和高。如果我们更喜欢这种方式，我们必须在绘制矩形的指令之前使用“CENTER”模式。注意Processing是大小写敏感的。

最后，我们还可以使用两点（左上角和右下角）来绘制矩形。这里使用的模式是“CORNERS”。

当我们对绘制矩形开始感到舒适时，使用 ellipse()  绘制椭圆也很容易。事实上，它与rect()一样，区别在于椭圆是绘制在一个矩形的包围盒里。ellipse()默认的模式是“CENTER”而不是“CORNER”。

重要的是必须承认，这些椭圆看上去不是特别圆。Processing有内置的一套方法去选择哪些像素用来创建一个圆形。像这样放大来看，我们得到的是一堆排列成类似于圆形的方格，但在电脑屏幕上缩小来看，我们得到的是一个很圆的椭圆。Processing也为我们提供了使用自己的算法去给个别像素着色的能力（事实上，我们已经可以预见，我们可能会用point一遍又一遍地去做这件事），但就目前而言，我们满足于让ellipse语句去做这困难的工作。（更多关于像素的话题，可以参考： the pixels reference page，不过要警告的是， 这是比本教程更高级得多的内容）

现在让我们来看一下使用更真实的设置，200*200的窗口来绘制形状的代码。注意 size() 函数的使用，指定窗口的长和宽。

size(200,200);

rectMode(CENTER)

;rect(100,100,20,100);

ellipse(100,70,60,60);

ellipse(81,70,16,32); 

ellipse(119,70,16,32); 

line(90,150,80,160);

line(110,150,120,160);