-
用
Processing
进行数据可视化，第
1
部分
:
语言和环境简介
< br>虽然很多开源项目的初衷都是为现有的应用程序构建替代方案，
但是仍有大量的项
目彰显了创新性。
Processing
就是其中的一个。
Processing
在
2001
年诞生于麻省理
工学院（
MIT
）的
媒体实验室，主创者为
Ben Fry
和
Casey
Reas
，当然还有来自
Carnegie Mellon
、洛杉矶的加利福尼亚大学以
及迈阿密大学等的贡献。
Processing
的最初目标是开发图形的
sketchbook
和环境，用来形象地教授计算机科
学的基础知识。之后，它逐渐演变成了可用于创建图形可视化专业项目的一种环境。如
今，
围绕它已经形成了一个专门的社区，致力于构建各种库以供用这种
语言和环境进行
动画、可视化、网络编程以及很多其他的应用。在本文中，您会发现
Processing
是一
个很棒的进行数据可视化的环境，具有一个简单的接口、
一个功能强大的语
言以及一套
丰富的用于数据以及应用程序导出的机制。
Processing
运行于
GNU/Linux?
以及
Mac OS X
和
Windows?
上，并且支持将图
像导出成各种格式。
对于动态应用程序，
甚至可以将
Processing
应用程序作为
Java?
applet
导出以用在
Web
环境内。
本文将先介绍
Processing
IDE
，然后再讨论
Processing
语言的第一个层面。之后将
会介绍一些关键的图形原语，最后则探讨几个利用这些原语的应用程序。
Processing
的起源
Processing
最早是一个用于教授计算机编程的简化
编程语言。这些理念起源于
MIT
Media Lab (John Maeda)
的
Design By
Numbers
项目，目的是通过可视应用程序的
开发来教授
编程。
虽然它供编程初学者使用，
但该项目也针对艺术家及可视
化设计者而
设。有关
Processing
及衍生产品的更多信息，请参见
参考资料
。
Processing
环境
第一步是安装
Processing
环境。去到
，单击
Download
Processing
并选择您的操
作系统。
请注意，
本文中的例子使用的是
Processing V1.2.1
。
< br>下载了压缩文件后，用
tar xvfz
对其进行展开。
此外，还需要确保
Java
技术已经可用。在
Ubuntu
上，只需键入
sudo apt-
get
install
openjdk-6-jdk
。
安装完成后，转到之前解压缩时创建的
processing-1.2.1
目录并尝试键
入
./processing
。
这应该会弹出
Processing
Development Environment
（
PDE
或
Processing
IDE
），
如图
1
所示。占此窗口较大的部分是文本编辑器。如果输入图中所
示的两行代码，然
后单击
Run
（左上角的三角形），出现一个窗口，显示您所输入的简单程序（或
Processing
术语所指的
sketch
）的结果。单击
Stop
（左上角的方框）退出程序，窗口
消
失。
图
1. PDE
和
Results
窗口
现在，让我们先来深入研究
Processing
语言，探讨它的主要特性，并且开发一
些有趣
的应用程序。
回页首
Processing
语言
Processing
是用
Java
编程语言写的，并且
Java
语言也是在语言树中最接近
Processing
的。
所以，<
/p>
如果您熟悉
C
或
Java
语言，
Processing
将很容
易学。并且在
程序如何构造方面，也作了一些简化。
Proce
ssing
并不包括
Java <
/p>
语言的一些较为高
级的特性，
但这些特性
中的很多特性均已集成到了
Processing
，
所以您无需了解它们。
之所以选择
Java
语言是因为
Processing
应用程序被翻译成
Java
代码执行。选择
Java
范型简化了这种翻译并让开发和执行可视化程序变得十分简单和直观。若要对比
< br>
Processing
语言和
Java
语言，请参阅
参考资料
。
回页首
图形环境
正如您在
图
1
所见，
在
Processing
内进行开发涉及到的是
PDE
和显示窗口。
2-D
图
形的坐标系如图
2
所示。
size
关键字以像素为单位定义了显示窗口的大小并且通常
都是
Processing
应用程序内的首要步骤。
图
2. 2-D
显示窗口的坐标
如图
2
所示，
size
关键字指定显示窗口的
X
和
Y
坐标。
line
关键字则会在两个
像素点之间绘制一条线（以
x1
、
y1 to
x2
、
y2
的格式）。请注意，超出屏幕边界
（
size
< br>
定义的边界外）画线并非不允许，只是被忽略了而已。
本文无意对此做深入探讨，但
size
接受可选的第三个参数
mode
。
mode
用来定义
要使用的呈现引擎并支持
PDF
（直接呈现为
Adobe? PDF
文档）、
OPENGL
（利用
一个可用的
Open-GL
图形适配器）、
P3
D
（为了迅速的
3-D
呈现）等。默认的
是
JAVA2D
，它最适合于高质量的
2-D
成像。
现在，我们来看一些基本的图形原语，然后再深入探讨几个示例应用程序。
回页首
图形原语
Processing <
/p>
包含了大量各种各样的几何形状以及这些形状的控件。本节会简介一些基
< br>本的图形原语。
背景和颜色
background
功能被用来设
置显示窗口的颜色。此函数可以使用各种不同的参数（来
定义一个灰度值或
Red-Green-Blue [RGB]
颜色）
。
清单
1
内的代码片段会生成如
图
3
所示的输出，其中的
cell
a
）。
清单
1.
使用
Background
函数
size
(100, 100);
background
( 0, 128, 0 );
绘制像素点
可以使用
set
函数绘制单个像素点。此函数
接受显示窗口内的
x,y
坐标以及作为颜色
的第三个参数。
Processing
也有一个类型，称为
color
，通过它，可以定义用于某个
操作的颜色。
在本例中，
我们创建了一个颜色实例并用它来设置显示窗口内的某个像素
点（参见清单
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
很简单，
但它不
是操做显示的最快方式。要想快速访问，可以使用
p
ixels
数组
（与
loadPixels
和
updatePixels
函数一致）。
绘制形状
在
Processing
内使用单个函数绘制形状十分简单。<
/p>
要设置在绘制形状时使用何种颜色，
可以利用
stroke
函数。
此函数可接受一个单独的灰度参数或三个
RGB
参数。
此外，
还可以用
fill
命令定义这个形状的填充色。
清单
3
<
/p>
显示了如何绘制线、矩形、圆（使用椭圆）及椭圆。
line
函数接受四个参数，
代表的是要在其间绘
制线条的点。
rect
函数可绘制一
个矩形，
并且前两个点定义位置，
而后面两个点则分别定义宽度
和高度。
ellipse
函数也接受
四个参数，分别定义位置
和宽
/
高度。
当宽和高相等时，就是一个圆形。还可以使用
ellipseMode
函数定制椭
圆，它指定
x,y
位置是否代表了椭圆
的角（
CORNER
）或中心（
CEN
TER
）。参见
图
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,
20);
fill
(0,
150, 90);
ellipse
(70, 30,
30, 20);
绘制四边形
在
Processing
内使用
quad
可以很容易地绘制有四个边
的多边形。
四边形接受八个参
数，
代表
的是这个四边形的四个顶点。
清单
4
内的示例创建了
10
个随机的四边形
（其
中这些点必须是顺时针或逆时针
顺序。此代码还会为每个四边形创建一个随机的灰度。
清单
4.
绘制四边形
size
(100, 100);
for (inti = 0 i< 10 i++) {
int x1 =
(int)
random
(50);
int y1 =
(int)
random
(50);
int 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
的图形输出
其他形状多得不胜枚举，因此对于行宽及图像平滑度的控制也是不计其数的。图
4
显
示了来自
清单
4
的
quad
函数的例子，其中就调用了
smooth
函数。此函数提供了
去掉边缘锯齿的功能，虽然牺牲了速度
，却改进了图像的质量。
图
4.
使用平滑函数
回页首
Processing
应用程序的结构
至此，通过几个简单的脚本，您已经对
Processing
语言有了大致的了解，但这些脚本
是一些非结构化的代码，只提供了应用程序的一些简单元素。
Pro
cessing
应用程序是
有一定结构的，
< br>这一点在开发能够持续运行且随时更改显示窗口的图形应用程序（比如
动画）时非
常重要。在这种情况下，就凸显了
setup
和
draw
这两个函数的重要性。
setup
函数用于初始化，由
Processing
运行时执行一次。通常，
setup
函数包
含
size
函数（用于定义窗口的边界
）以及在操作期间要使用的变量的初始化。
Processing
运行时会不断执行
draw
函数。每次
draw
函数结束后，就会在显示窗
口
绘制一个新的画面，并且
draw
函数也会被再次调用。默认的绘制速度是每秒
60
个
画面，但是您也可以通过调用
frameRate
函数来更改这个速度。
此外，还可以使用
noLoop
和
draw
来控制在何时绘制画面。
noLoop
函数会导致绘
制停止，
而使用
loop
函数则可
以重新开始绘制。
通过调用
redraw
可以控制
draw
在
何时调用。
现在，了解了如何开发一个
Processing
应用程序后，让我们来看一个展示文本
使用的
简单例子。
使用文本
Processing <
/p>
不仅支持显示窗口内的文本，还支持控制台形式的用于调试的文本。要在
< br>显示窗口内使用文本，需要一种字体。所以，第一步是创建一种字体（使用
PDE
的
Tools
选项）
< br>。
选择了要创建的字体后，
字体文件
（
VLW
）
就会显示在项目的
./data
子目录内。之后，就可以使用
loadFont
函数加载这个文件，然后再使
用
textFont
将它定义为默认。这两个步骤在
图
5
的
setup
函数内有所显示。还
请注意我们已经将画面速度减慢为每秒
1
个画面
（因为这也是更新自然发生的频率）
。
draw
< br>函数展示了您在之前没有见过的其他一些函数。首先是时间函数，它返回的是时
钟
的小时、
分和秒。
请注意有一些传统的函数可以返回年、
月和日。
存储了时间数据后，
就可以使用
nf
函数创建
一个字符串，它可以将数字转变为字符串。为了将向时钟添加
一些花样，可以使用
background
和
fill
函数处理背景和时钟的颜色。背景的颜
色范围是从
255
（白）到
137
（淡灰）。
fill
< br>
函数可用于给文本上色，范围是从
100
（淡灰）到
218
（接近于黑色）。颜色设好后，
text
函数就会向将时间字符串发送到
显示窗口已
定义的坐标位置。
也可以使用
println
函数将字符串发到控制台
（参见图
5
左下角）。
图
5.
在
Processing
应用程序内使用文本
-
-
-
-
-
-
-
-
-
上一篇：processing 学习1~5
下一篇：processing绘制可爱动物