直角坐标系与简单图形

Processing 默认Java语言，但也可以使用Python语言。

Python 模式

Python 模式是 Processing 的 Python 接口，允许你使用 Python 语言进行编程。

为了启用 Python 支持，您需要安装一个名为 Python 的附加组件模式。您可以通过单击并选择“添加模式...” 将出现一个标题为“模式管理器”的窗口。滚动向下直到您看到“Python”，然后按“安装”。

安装成功后，在Java下边会有一个Python选项

坐标系

上图显示了在直角坐标系上点 A （1,0）和点 B（4,5）之间的一条线 .

指令如下：

line(1, 0, 4, 5)

即使你还没有学习过编程语法，上述语句应该也能让你大致明白它的含义。我们为计算机提供了一个名为“line”的指令（在这里我们称之为“函数”），并为其指定了一些参数，用来描述这条线应该如何绘制——也就是从点A (1,0) 到点B (4,5)。如果把这行代码看作一句话，函数就相当于动词verb，而参数则是这句话的宾语object。

画一条线从 (1, 0）到（4, 5)
verb object object

计算机屏幕其实就是一张更高级的“坐标纸”。屏幕上的每一个像素都对应一个坐标点——由两个数字组成，一个是“x”（水平坐标），一个是“y”（垂直坐标）——用来确定空间中某个点的位置。而我们的任务，就是指定在这些像素坐标上应该显示什么样的图形和颜色。

不过，这里有一个需要注意的地方。数学中“笛卡尔坐标系”的原点(0,0) 通常位于中心，y 轴向上为正，x 轴向右为正（负方向分别是向下和向左）。而在计算机窗口的像素坐标系中，y 轴的方向正好相反： (0,0) 位于屏幕的左上角，x 轴正方向依然向右，但 y 轴的正方向是向下。

数学

计算机

简单图形

你在学习 Processing 时会发现，绝大多数编程示例都是以视觉效果为主的。这些示例的核心，其实就是在屏幕上绘制各种图形、设置像素。我们先从四种基本图形的绘制开始讲起。

Point

Line

Rectangle

Ellipse

对于每种图形，我们都要思考：需要哪些信息才能确定它的位置和大小（后面还会涉及颜色），以及 Processing 希望我们如何提供这些信息。下面的每个示意图，我们都假设窗口的宽度和高度都是10像素。虽然在实际编程时，你通常会用更大的窗口（10×10像素在屏幕上其实只有几毫米大），但为了演示方便，使用较小的数字可以让像素像在方格纸上一样直观展示，更好地说明每行代码的工作原理。

点是最简单的图形，也是学习的起点。要绘制一个点，使用函数point() 然后指定它的 x 和 y 坐标即可。

point(x, y)

Example:

A(4, 5);

我们知道：两点确定一条直线。要绘制一条线，使用函数line() 然后指定两个点的坐标：（x₁，y₁）和（x₂，y₂）

  line(
    
      x1, y1
    ,
    
      x2, y2
    
  )

Point A Point B

Example:

line(1, 2, 5, 2)

当我们开始绘制矩形（rect()）时，情况会稍微复杂一些。在 Processing 里，矩形是通过指定左上角的坐标、宽度和高度来确定的。

      rect(
        x, y,
        width, height
      )
    

Top Left Size

Example:

rect(2, 2, 7, 5)

还有一种绘制矩形的方法：直接指定矩形的中心点坐标，以及宽度和高度。如果你想用这种方式，需要在绘制矩形之前，先设置模式为 CENTER。注意，Processing 对大小写敏感，CENTER 必须全部大写。

      rectMode(CENTER)

      rect(
        x, y,
        width, height
      )
    

Center Size

Example:

rectMode(CENTER)
rect(4, 4, 7, 3)

最后，还可以用两个点（左上角和右下角）来绘制矩形。这时需要将模式设置为 CORNERS。

      rectMode(CORNERS)

      rect(
        x1, y1,
        x2, y2
      )
    

Top Left Bottom Right

Example:

rectMode(CORNERS)
rect(2, 3, 7, 6)

当你已经熟悉了绘制矩形的概念，ellipse() 的用法就很简单了。实际上，ellipse() 和 rect() 的参数完全一样，不同之处在于 ellipse() 会在对应的矩形“外接框”内画出一个椭圆。需要注意的是，ellipse() 的默认模式是 CENTER（中心），而不是 CORNER（左上角）。

      ellipseMode(CENTER)

      ellipse(
        x, y,
        width, height
      )
    

Center Size

Example:

ellipseMode(CENTER)
ellipse(4, 4, 5, 7)

      ellipseMode(CORNER)

      ellipse(
        x, y,
        width, height
      )
    

Top Left Size

Example:

ellipseMode(CORNER)
ellipse(2, 2, 4, 7)

      ellipseMode(CORNERS)

      ellipse(
        x1, y1,
        x2, y2
      )
    

Top Left Bottom Right

Example:

ellipseMode(CORNERS)
ellipse(1, 3, 8, 7)

需要注意的是，这些椭圆在放大后看起来并不那么圆。Processing 内部有一套算法，用来决定哪些像素应该被用来绘制圆形。像这样放大来看时，我们看到的是一堆方格拼成的近似圆形；但在实际电脑屏幕上缩小时，效果就会变得很圆滑。Processing 其实也允许我们自己写算法来控制每个像素的着色（比如用 point() 一点点画出来），不过现在我们只需要让 ellipse 语句帮我们完成这些工作就可以了。（关于像素的更多内容，可以参考 Processing 的 pixels 相关文档，不过那部分内容比本教程要高级不少。）

接下来，我们来看一个更贴近实际的例子，窗口大小为 200×200。注意这里用 size() 函数来设置窗口的宽度和高度。

size(200, 200)

background(200)

ellipse, rect, line ...

Example: 机器人图形

  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)