用 Processing 进行数据可视化

1、用 Processing 进行数据可视化，第 1 部分: 语言和环境简介虽然很多开源项目的初衷都是为现有的应用程序构建替代方案，但是仍有大量的项目彰显了创新性。Processing 就是其中的一个。Processing 在 2001 年诞生于麻省理工学院（MIT）的媒体实验室，主创者为 Ben Fry 和 Casey Reas，当然还有来自 Carnegie Mellon、洛杉矶的加利福尼亚大学以及迈阿密大学等的贡献。Processing 的最初目标是开发图形的 sketchbook 和环境，用来形象地教授计算机科学的基础知识。之后，它逐渐演变成了可用于创建图形可视化专业项目的一种环境。如今，

2、围绕它已经形成了一个专门的社区，致力于构建各种库以供用这种语言和环境进行动画、可视化、网络编程以及很多其他的应用。在本文中，您会发现 Processing 是一个很棒的进行数据可视化的环境，具有一个简单的接口、一个功能强大的语言以及一套丰富的用于数据以及应用程序导出的机制。Processing 运行于 GNU/Linux® 以及 Mac OS X 和 Windows® 上，并且支持将图像导出成各种格式。对于动态应用程序，甚至可以将 Processing 应用程序作为 Java applet 导出以用在 Web 环境内。本文将先介绍 Processing IDE，然后再讨论

3、Processing 语言的第一个层面。之后将会介绍一些关键的图形原语，最后则探讨几个利用这些原语的应用程序。Processing 的起源Processing 最早是一个用于教授计算机编程的简化编程语言。这些理念起源于 MIT Media Lab (John Maeda) 的 Design By Numbers 项目，目的是通过可视应用程序的开发来教授编程。虽然它供编程初学者使用，但该项目也针对艺术家及可视化设计者而设。有关 Processing 及衍生产品的更多信息，请参见 参考资料。Processing 环境第一步是安装 Processing 环境。去到 Process

4、，单击 Download Processing 并选择您的操作系统。请注意，本文中的例子使用的是 Processing V1.2.1。下载了压缩文件后，用tar xvfz processing-1.2.1.tgz 对其进行展开。此外，还需要确保 Java 技术已经可用。在 Ubuntu 上，只需键入 sudo apt-get install openjdk-6-jdk。安装完成后，转到之前解压缩时创建的 processing-1.2.1 目录并尝试键入 ./processing。这应该会弹出 Processing Developm

5、ent Environment（PDE 或 Processing IDE），如图 1 所示。占此窗口较大的部分是文本编辑器。如果输入图中所示的两行代码，然后单击 Run（左上角的三角形），出现一个窗口，显示您所输入的简单程序（或 Processing 术语所指的 sketch）的结果。单击 Stop（左上角的方框）退出程序，窗口消失。图 1. PDE 和 Results 窗口现在，让我们先来深入研究 Processing 语言，探讨它的主要特性，并且开发一些有趣的应用程序。回页首Processing 语言Processing 是用 Java 编程语言写的，并且 J

6、ava 语言也是在语言树中最接近 Processing 的。所以，如果您熟悉 C 或 Java 语言，Processing 将很容易学。并且在程序如何构造方面，也作了一些简化。Processing 并不包括 Java 语言的一些较为高级的特性，但这些特性中的很多特性均已集成到了 Processing， 所以您无需了解它们。之所以选择 Java 语言是因为 Processing 应用程序被翻译成 Java 代码执行。选择 Java 范型简化了这种翻译并让开发和执行可视化程序变得十分简单和直观。若要对比 Processing 语言和 Java 语言，请参阅 参考资料。

7、回页首图形环境正如您在 图 1 所见，在 Processing 内进行开发涉及到的是 PDE 和显示窗口。2-D 图形的坐标系如图 2 所示。size 关键字以像素为单位定义了显示窗口的大小并且通常都是 Processing 应用程序内的首要步骤。图 2. 2-D 显示窗口的坐标如图 2 所示，size 关键字指定显示窗口的 X 和 Y 坐标。line 关键字则会在两个像素点之间绘制一条线（以 x1、y1 to x2、y2 的格式）。请注意，超出屏幕边界（size 定义的边界外）画线并非不允许，只是被忽略了而已。本

8、文无意对此做深入探讨，但 size 接受可选的第三个参数 mode。 mode 用来定义要使用的呈现引擎并支持 PDF（直接呈现为 Adobe® PDF 文档）、OPENGL （利用一个可用的 Open-GL 图形适配器）、P3D（为了迅速的 3-D 呈现）等。默认的是 JAVA2D，它最适合于高质量的 2-D 成像。现在，我们来看一些基本的图形原语，然后再深入探讨几个示例应用程序。回页首图形原语Processing 包含了大量各种各样的几何形状以及这些形状的控件。本节会简介一些基本的图形原语。背景和颜色backg

9、round 功能被用来设置显示窗口的颜色。此函数可以使用各种不同的参数（来定义一个灰度值或 Red-Green-Blue RGB 颜色）。清单 1 内的代码片段会生成如 图 3 所示的输出，其中的 cell a）。清单 1. 使用 Background 函数size(100, 100);background( 0, 128, 0 );绘制像素点可以使用 set 函数绘制单个像素点。此函数接受显示窗口内的 x,y 坐标以及作为颜色的第三个参数。Processing 也有一个类型，称为 color，通过它，可以定义用于某个操作的颜色。在本

10、例中，我们创建了一个颜色实例并用它来设置显示窗口内的某个像素点（参见清单 2 和 图 3 中的 cell b）。清单 2. 设置像素点和颜色size(100, 100);for (int x = 0 ; x < 100 ; x+) for (int y = 0 ; y < 100 ; y+) color c = color( x*2, y*2, 128 ); set(x, y, c); 可以使用 get 操作来读取显示中的一个给定像素点的颜色。虽然 set 很简单，但它不是操做显示的最快方式。要想快速访问，可以使用pixe

11、ls 数组（与 loadPixels 和 updatePixels 函数一致）。绘制形状在 Processing 内使用单个函数绘制形状十分简单。要设置在绘制形状时使用何种颜色，可以利用 stroke 函数。此函数可接受一个单独的灰度参数或三个 RGB 参数。此外，还可以用 fill 命令定义这个形状的填充色。清单 3 显示了如何绘制线、矩形、圆（使用椭圆）及椭圆。line 函数接受四个参数，代表的是要在其间绘制线条的点。rect 函数可绘制一个矩形，并且前两个点定义位置，而

12、后面两个点则分别定义宽度和高度。ellipse 函数也接受四个参数，分别定义位置和宽/高度。当宽和高相等时，就是一个圆形。还可以使用 ellipseMode 函数定制椭圆，它指定 x,y 位置是否代表了椭圆的角（CORNER）或中心（CENTER）。参见 图 3中的 cell C。清单 3. 线和形状size(100, 100);stroke(0, 128, 0);line(10, 10, 90, 90);fill(20, 50, 150);rect(30, 30, 60, 40);fill(190, 0, 30);ellipse(30, 70, 20,

13、 20);fill(0, 150, 90);ellipse(70, 30, 30, 20);绘制四边形在 Processing 内使用 quad 可以很容易地绘制有四个边的多边形。四边形接受八个参数，代表的是这个四边形的四个顶点。清单 4 内的示例创建了 10 个随机的四边形（其中这些点必须是顺时针或逆时针顺序。此代码还会为每个四边形创建一个随机的灰度。清单 4. 绘制四边形size(100, 100);for (int i = 0 ; i < 10 ; i+) int x1 = (int)random(50); int y1 = (int)random(50); i

14、nt x2 = (int)random(50) + 50; int y2 = (int)random(50); int x3 = (int)random(50) + 50; int y3 = (int)random(50) + 50; int x4 = (int)random(50); int y4 = (int)random(50) + 50; fill( color(int)random(255) ) ); quad( x1, y1, x2, y2, x3, y3, x4, y4 );图 3. 清单 1 至 4 的图形输出其他形状多得不胜枚举，因此对于行宽及图像平滑度的控制也是不计其数的。

15、图 4 显示了来自 清单 4 的 quad 函数的例子，其中就调用了smooth 函数。此函数提供了去掉边缘锯齿的功能，虽然牺牲了速度，却改进了图像的质量。图 4. 使用平滑函数回页首Processing 应用程序的结构至此，通过几个简单的脚本，您已经对 Processing 语言有了大致的了解，但这些脚本是一些非结构化的代码，只提供了应用程序的一些简单元素。Processing 应用程序是有一定结构的，这一点在开发能够持续运行且随时更改显示窗口的图形应用程序（比如动画）时非常重要。在这种情况下，就凸显了 setup 和&#

16、160;draw 这两个函数的重要性。setup 函数用于初始化，由 Processing 运行时执行一次。通常，setup 函数包含 size 函数（用于定义窗口的边界）以及在操作期间要使用的变量的初始化。Processing 运行时会不断执行 draw 函数。每次 draw 函数结束后，就会在显示窗口绘制一个新的画面，并且 draw 函数也会被再次调用。默认的绘制速度是每秒 60 个画面，但是您也可以通过调用 frameRate 函数来更改这个速度。此外，还可以

17、使用 noLoop 和 draw 来控制在何时绘制画面。noLoop 函数会导致绘制停止，而使用 loop 函数则可以重新开始绘制。通过调用redraw 可以控制 draw 在何时调用。现在，了解了如何开发一个 Processing 应用程序后，让我们来看一个展示文本使用的简单例子。使用文本Processing 不仅支持显示窗口内的文本，还支持控制台形式的用于调试的文本。要在显示窗口内使用文本，需要一种字体。所以，第一步是创建一种字体（使用 PDE 的 Tools 选项）。选

18、择了要创建的字体后，字体文件（VLW）就会显示在项目的 ./data 子目录内。之后，就可以使用loadFont 函数加载这个文件，然后再使用 textFont 将它定义为默认。这两个步骤在 图 5 的 setup 函数内有所显示。还请注意我们已经将画面速度减慢为每秒 1 个画面 （因为这也是更新自然发生的频率）。draw 函数展示了您在之前没有见过的其他一些函数。首先是时间函数，它返回的是时钟的小时、分和秒。请注意有一些传统的函数可以返回年、月和日。存储了时间数据后，就可以使用 nf 函数创建

19、一个字符串，它可以将数字转变为字符串。为了将向时钟添加一些花样，可以使用background 和 fill 函数处理背景和时钟的颜色。背景的颜色范围是从 255（白）到 137（淡灰）。fill 函数可用于给文本上色，范围是从 100 （淡灰）到 218（接近于黑色）。颜色设好后，text 函数就会向将时间字符串发送到显示窗口已定义的坐标位置。也可以使用 println 函数将字符串发到控制台（参见图 5 左下角）。图 5. 在 Processing 应用程序内使用文本回页首构建简单的应用程序现在，让我们来看几个用 Proc

20、essing 构建的模拟仿真。第一个是一个实现森林火灾模型的 2-D 元胞自动机实现。这个模型来自 Chopard 和 Dro 的 “物理系统的元胞自动机建模”，它提供了一个简单系统，展示了树的生长以及由雷击导致的大火的蔓延。这个模拟包含了一组简单规则，定义如下：· 在一个空场地（灰色），一棵树以 pGrowth 的机率成长。· 如果其相邻树中有至少有一棵树正在燃烧，那么这颗树也会成为一棵燃烧树（红色）。· 一棵燃烧树（红色）成为一个空场地（灰色）。· 如果周围没有任何燃烧树，那么这个树成为燃烧树的可能性为 pBurn。比如

21、由雷击导致的燃烧，就是其中的一种可能。这些规则的代码可以在 update 函数（参见 清单 5）内找到，它迭代 2-D 空间以决定根据已定义的规则，状态如何转换。请注意这个 2-D 空间实际上是 3-D 的，因为保存了此空间的两个副本 一个针对的是当前迭代，一个针对的是上一个迭代。这么做是为了避免更改对空间的破坏。此空间然后会成为一个显示空间（被显示的东西） 和一个计算空间（规则的应用）。这些空间按每次生成对调。从很大程度上讲，这个应用程序使用了极少的 Processing 图形关键字。为空间定义的颜色只有几个：stroke 用来更改颜色，point&#

22、160;用于绘制像素点。使用 Processing 模型，draw 函数调用 update 以应用规则；返回后，draw 将这个更新了的空间发到显示窗口。清单 5. 元胞自动机森林火灾模型int pix = new int2400400;int toDraw = 0;int tree = 0;int burningTree = 1;int emptySite = 2;int x_limit = 400;int y_limit = 400;color brown = color(80, 50, 10); / browncolor red = color(2

23、55, 0, 0); / red;color green = color(0, 255, 0); / greenfloat pGrowth = 0.01;float pBurn = 0.00006;boolean prob( float p ) if (random(0, 1) < p) return true; else return false;void setup() size(x_limit, y_limit); frameRate(60); /* Initialize to all empty sites */ for (int x = 0 ; x < x_limit ;

24、 x+) for (int y = 0 ; y < y_limit ; y+) pixtoDrawxy = emptySite; void draw() update(); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y < y_limit ; y+) if (pixtoDrawxy = tree) stroke( green ); else if (pixtoDrawxy = burningTree) stroke( red ); else stroke( brown ); point( x, y ); toDra

25、w = (toDraw = 0) ? 1 : 0;void update() int x, y, dx, dy, cell, chg, burningTreeCount; int toCompute = (toDraw = 0) ? 1 : 0; for (x = 1 ; x < x_limit-1 ; x+) for (y = 1 ; y < y_limit-1 ; y+) cell = pixtoDrawxy; / Survey area for burning trees burningTreeCount = 0; for (dx = -1 ; dx < 2 ; dx+

26、) for (dy = -1 ; dy < 2 ; dy+) if (dx = 0) && (dy = 0) continue; else if (pixtoDrawx+dxy+dy = burningTree) burningTreeCount+; / Determine next state if (cell = burningTree) chg = emptySite; else if (cell = emptySite) && (prob(pGrowth) chg = tree; else if (cell = tree) && (

27、prob(pBurn) chg = burningTree; else if (cell = tree) && (burningTreeCount > 0) chg = burningTree; else chg = cell; pixtoComputexy = chg; 图 6 显示了这个元胞自动机森林火灾模型的迭代，跳跃恰当，很好地显示了所设规则的效果。Time 0 包含的只有树木在其中生长的空间。在 time 40，就可以开始看到大火在燃烧并最终占据整个空间。在大约 time 100，树木生长更为明显，但在 time 120 时， 起火更多，过程循环。图 6. 元胞

28、自动机森林火灾模型的输出回页首易染/感染/免疫模型易染/感染/免疫模型模拟的是疾病在医院内的蔓延。与森林火灾模型类似，SIR 也是通过一套简单规则实现的，只不过添加了一些复杂性和有趣的行为。 在这个模型内，有一个由病人占据的病床组成的网格。在 time 0，所有病人都是某一种新疾病的易染人群，这意味着这些病人从未患过这种疾病，因此才有可能被感染。如果在某个病人的东/南/西/北的四个邻居中有一个患了这种疾病，那么该病人受感染的可能性为 tau。一个受感染的病人的患病时间为 K 天，在此期间病人有感染其他病人的可能性。在 K 天后，该病人康复并有了

29、对这种疾病的免疫力。正如之前的例子所示，setup 函数先初始化这个医院以及所有易染病人，只有最中心的这个病人是已经患病的。在该实现内，0 是易染病人，1-K 是感染病人，-1 是免疫病人。draw 函数将这种几何分布发到显示窗口，update 实施这些 SIR 规则。与之前一样，可以用一个 3D 数组保存当前的这些几何分布。清单 6 给出了此代码。清单 6. Processing 内的 SIR 模型int beds = new int2200200;int toDraw = 0;int x_limit = 200;int y_lim

30、it = 200;color brown = color(80, 50, 10); / browncolor red = color(255, 0, 0); / red;color green = color(0, 255, 0); / greenint susceptible = 0;int recovered = -1;float tau = 0.2;int k = 4;boolean prob( float p ) if (random(0, 1) < p) return true; else return false;void setup() size(x_limit, y_limit); frameRate(50); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y < y_limit ; y+) bedstoDrawxy = susceptible; bedstoDraw100100 = 1;void draw() update(); for (int x = 0 ; x < x_limit ; x+) for (int y = 0 ; y <