语言设定

以下教程来自于由 Daniel Shiffman 篇写的《 Learning Processing 》(原文英文),并由 Morgan Kaufmann 出版,© 2008 Elsevier Inc。版权所有。此教程由移植成 P5 代码。如果您发现任何错误或有任何评论,请联络我们

坐标系统及图形

在我们开始使用 p5 编程前,我们得先回到我们初中二时的记忆,找出一张坐标纸并画一条直线。两点之间最短的距离正是一条直线,我们将使用坐标纸上的直线的两点作为起点。

以上图解显示一条介于点 A (1,0) 及点 B (4,5) 的直线。如果您想要指示您的朋友画出一样的直线,您或许会对他说:“请从点一、零开始画一条直线去点四、五”。 那么现在暂时想象您的朋友是个电脑而您想要指示这位数码朋友如何画在荧幕上出一样的直线。这情况下您也能使用一样的指示(只不过现在您可以跳过任何客气话但是必须使用精准的格式来表达)。该指示将会是如下:


        line(1,0,4,5);
      

就算您还没学习过编写程式的语法,以上的语句应该仍然多少都能理解。我们提供电脑一个指令(我们称这指令为 function 或函数)以让其画出直线(line)。此外,我们也提供一些用于定义该直线的参数:从点 A (1,0) 至点 B (4,5)。 如果您假想这行代码为一个句子,这函数就是个动词而参数就是宾语。这代码句子使用分号作为句尾符号而不是句号。

这里关键是了解电脑屏幕就只是个比较花俏的坐标纸。荧幕上每一个像素都代表着一个坐标 - 或两个数字:“x”(横向)及 “y”(纵向)- 代表着在空间内一点的位置。而我们的工作就是指定该在这些像素坐标位置出现的图形及颜色。

不过,这里有个需要注意的东西。那张来自初中二的坐标纸(使用笛卡尔坐标系)将 (0,0) 放置在正中央,y 轴由下至上 x 轴由左至右。但是电脑窗口的坐标系在 y 轴的方向是相反的。(0,0) 被定义在左上角并往右边及往下延伸。

基本图形

大多数使用 p5 的编程范例一般都会使视觉上的绘图范例。本质上,这些范例都和绘制图形及设定像素有关。我们将从绘制四种基本图形开始。

针对每个形状,我们需要问我们需要什么资料才可以定义该图形的位置及大小(更之后其颜色)然后再了解 p5 如何接收这些信息。在以下的绘图内,我们将使用一个宽度为 100 像素及高度为 100 像素的画布。

A point() (点)是最简单的图形同时也是个不错的起点。以绘制一个点(point),我们只需要提供 x 及 y 坐标。

A line() (直线)也不会特别困难,我们只需提供两个点 (x1,y1) 及 (x2,y2):

当我们想要绘制一个 rect() (四方形)时,这就会变得比较复杂一点。在 p5 内,一个四方形是由其左上角的坐标点与其宽度及高度来定义的。

第二个绘制四方形的方法是定义其中心点的位置,然后定义其宽度及高度。如果我们想要使用这方法,我们必须先表示我们要使用 CENTER 模式然后才输入绘制四方形的指示。请注意 p5 有区分大小写字母。

最后我们也能使用两个点来绘制一个四方形(分别定义左上角及右下角)。这模式为 CORNERS。请注意这范例在荧幕上显示的结果和上方的范例一样。

当我们对于绘制一个四方形有了不错的掌握时,绘制一个 ellipse() (椭圆形)可是轻而易举。事实上,它和绘制 rect() (四方形)一样,唯一不同的是椭圆形将会被绘制在所定义的四方形内。ellipse() 的默认模式为 CENTER 而不是 CORNER

现在让我们来看看一些使用更实际绘图设置的程式代码。我们将使用一个大小为 200 乘 200 的画布大小。请注意我们这里使用的 createCanvas() 函数内所设定的画布高度及宽度。