Processing简介和环境搭建
Processing 在 2001 年诞⽣于⿇省理⼯学院（MIT）的媒体实验室，主创者为 Ben Fry 和 Casey Reas，项⽬发起的初衷，本是为了满⾜他们⾃⾝的教学和学习需要。后来，当Casey在意⼤利的伊夫雷亚交互设计学院（Interaction Design Institute Ivrea）进⾏教学的时候，基于Processing，衍⽣出了和项⽬。随着时间的推移，⼜诞⽣了多个语⾔的版本，⽐如基于JavaScript的Processing.js，还有基于Python、Ruby、ActionScript以及Scala等版本。⽽当前的Processing，成⽴了相应的，由基⾦会负责软件的开发和维护⼯作。
Processing项⽬是Java开发的，所以Processing天⽣就具有跨平台的特点，同时⽀持Linux、Windows以及Mac OSX三⼤平台，并且⽀持将图像导出成各种格式。对于动态应⽤程序，甚⾄可以将 Processing 应⽤程序作为 Java™ applet 导出以⽤在 Web 环境内。当然，为了降低设计师的学习门槛，⽤Processing进⾏图形设计的编程语⾔并不是Java，⽽是重新开发了⼀门类C的编程语⾔，这也让⾮计算机科班出⾝的设计师很容易上⼿。这⾥要多提⼀句，Processing⽀持OpenGL和WebGL，不但可以渲染2D图形，还可以渲染3D图形。
在过去的2015年，随着移动设备的普及，以及各⼤浏览器⼚商对HTML5的⽀持⽇渐成熟，Processing也迎来了⼀次重⼤的升级。不但对开发⼯具做了优化和完善，也开始逐步⽀持Android应⽤的开发。Web⽅
⾯，基于HTML5，重新开发了JavaScript版本的Processing，并且单独为其提供了Web开发⼯具，同时这也让Processing在⽹页上开发应⽤变的更加简单便捷。这⾥顺便提及⼀点的是，Processing可不只是能够渲染漂亮的图形，还⽀持与其他软件的通信，结合之前提到的Arduino项⽬，甚⾄可以和外部硬件进⾏交互！
1、Processing 环境：
这应该会弹出 Processing Development Environment（PDE 或 Processing IDE），如图 1 所⽰。占此窗⼝较⼤的部分是⽂本编辑器。如果输⼊图中所⽰的两⾏代码，然后单击 Run（左上⾓的三⾓形），出现⼀个窗⼝，显⽰您所输⼊的简单程序（或 Processing 术语所指的 sketch）的结果。单击 Stop（左上⾓的⽅框）退出程序，窗⼝消失。
2、Processing 语⾔
Processing 是⽤ Java 编程语⾔写的，并且 Java 语⾔也是在语⾔树中最接近 Processing 的。所以，如果您熟悉 C 或 Java 语
⾔，Processing 将很容易学。并且在程序如何构造⽅⾯，也作了⼀些简化。Processing 并不包括 Java 语⾔的⼀些较为⾼级的特性，但这些特性中的很多特性均已集成到了 Processing， 所以您⽆需了解它们。
之所以选择 Java 语⾔是因为 Processing 应⽤程序被翻译成 Java 代码执⾏。选择 Java 范型简化了这种翻译并让开发和执⾏可视化程序变得⼗分简单和直观。
3、图形环境
在 Processing 内进⾏开发涉及到的是 PDE 和显⽰窗⼝。2-D 图形的坐标系如图 2 所⽰。size 关键字以像素为单位定义了显⽰窗⼝的⼤⼩并且通常都是 Processing 应⽤程序内的⾸要步骤。
如图 2 所⽰，size 关键字指定显⽰窗⼝的 X 和 Y 坐标。line 关键字则会在两个像素点之间绘制⼀条线（以 x1、y1 to x2、y2 的格式）。请注意，超出屏幕边界（size 定义的边界外）画线并⾮不允许，只是被忽略了⽽已。
本⽂⽆意对此做深⼊探讨，但 size 接受可选的第三个参数 mode。 mode ⽤来定义要使⽤的呈现引擎并⽀持 PDF（直接呈现为 Adobe®PDF ⽂档）、OPENGL （利⽤⼀个可⽤的 Open-GL 图形适配器）、P3D（为了迅速的 3-D 呈现）等。默认的是 JAVA2D，它最适合于⾼质量的 2-D 成像。
现在，我们来看⼀些基本的图形原语，然后再深⼊探讨⼏个⽰例应⽤程序。
4、图形原语
Processing 包含了⼤量各种各样的⼏何形状以及这些形状的控件。本节会简介⼀些基本的图形原语。
1）背景和颜⾊
background 功能被⽤来设置显⽰窗⼝的颜⾊。此函数可以使⽤各种不同的参数（来定义⼀个灰度值或 Red-Green-Blue [RGB] 颜⾊）。
size(100, 100);scala不是内部或外部命令
background( 0, 128, 0 );
2）绘制像素点
可以使⽤ set 函数绘制单个像素点。此函数接受显⽰窗⼝内的 x,y 坐标以及作为颜⾊的第三个参数。Processing 也有⼀个类型，称为color，通过它，可以定义⽤于某个操作的颜⾊。在本例中，我们创建了⼀个颜⾊实例并⽤它来设置显⽰窗⼝内的某个像素点。
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 很简单，但它不是操做显⽰的最快⽅式。要想快速访问，可以使⽤pixels 数组（与 loadPixels 和 updatePixels 函数⼀致）。
3）绘制形状
在 Processing 内使⽤单个函数绘制形状⼗分简单。要设置在绘制形状时使⽤何种颜⾊，可以利⽤ stroke 函数。此函数可接受⼀个单独的灰度参数或三个 RGB 参数。此外，还可以⽤ fill 命令定义这个形状的填充⾊。
下⾯代码显⽰了如何绘制线、矩形、圆（使⽤椭圆）及椭圆。line 函数接受四个参数，代表的是要在其间绘制线条的点。rect 函数可绘制⼀个矩形，并且前两个点定义位置，⽽后⾯两个点则分别定义宽度和⾼度。ellipse 函数也接受四个参数，分别定义位置和宽/⾼度。当宽和⾼相等时，就是⼀个圆形。还可以使⽤ ellipseMode 函数定制椭圆，它指定 x,y 位置是否代表了椭圆的⾓（CORNER）或中⼼（CENTER）。
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);
4）绘制四边形
在 Processing 内使⽤ quad 可以很容易地绘制有四个边的多边形。四边形接受⼋个参数，代表的是这个四边形的四个顶点。清单 4 内的⽰例创建了 10 个随机的四边形（其中这些点必须是顺时针或逆时针顺序。此代码还会为每个四边形创建⼀个随机的灰度。
size(100, 100);
for (int i = 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 );
}
上⾯⼏个例⼦的结果
5、Processing 应⽤程序的结构
⾄此，通过⼏个简单的脚本，您已经对 Processing 语⾔有了⼤致的了解，但这些脚本是⼀些⾮结构化的代码，只提供了应⽤程序的⼀些简单元素。Processing 应⽤程序是有⼀定结构的，这⼀点在开发能够持续运⾏且随时更改显⽰窗⼝的图形应⽤程序（⽐如动画）时⾮常重要。在这种情况下，就凸显了 setup 和 draw 这两个函数的重要性。
setup 函数⽤于初始化，由 Processing 运⾏时执⾏⼀次。通常，setup 函数包含 size 函数（⽤于定义窗⼝的边界）以及在操作期间要使⽤的变量的初始化。Processing 运⾏时会不断执⾏ draw 函数。每次 draw 函数结束后，就会在显⽰窗⼝绘制⼀个新的画⾯，并且 draw 函数也会被再次调⽤。默认的绘制速度是每秒 60 个画⾯，但是您也可以通过调⽤ frameRate 函数来更改这个速度。
此外，还可以使⽤ noLoop 和 draw 来控制在何时绘制画⾯。noLoop 函数会导致绘制停⽌，⽽使⽤ loop 函数则可以重新开始绘制。通过调⽤ redraw 可以控制 draw 在何时调⽤。
下⾯我们做⼀个简单的模拟仿真，⽰例1：
实现森林⽕灾模型的 2-D 元胞⾃动机实现。这个模型来⾃ Chopard 和 Dro 的 “物理系统的元胞⾃动机建模”，它提供了⼀个简单系统，展⽰了树的⽣长以及由雷击导致的⼤⽕的蔓延。这个模拟包含了⼀组简单规则，定义如下：
在⼀个空场地（灰⾊），⼀棵树以 pGrowth 的机率成长。
如果其相邻树中有⾄少有⼀棵树正在燃烧，那么这颗树也会成为⼀棵燃烧树（红⾊）。
⼀棵燃烧树（红⾊）成为⼀个空场地（灰⾊）。
如果周围没有任何燃烧树，那么这个树成为燃烧树的可能性为 pBurn。⽐如由雷击导致的燃烧，就是其中的⼀种可能。
这些规则的代码可以在 update 函数（下⾯代码）内到，它迭代 2-D 空间以决定根据已定义的规则，状态如何转换。请注意这个 2-D 空间实际上是 3-D 的，因为保存了此空间的两个副本 — ⼀个针对的是当前迭代，⼀个针对的是上⼀个迭代。这么做是为了避免更改对空间的破坏。此空间然后会成为⼀个显⽰空间（被显⽰的东西） 和⼀个计算空间（规则的应⽤）。这些空间按每次⽣成对调。
从很⼤程度上讲，这个应⽤程序使⽤了极少的 Processing 图形关键字。为空间定义的颜⾊只有⼏个：stroke ⽤来更改颜⾊，point ⽤于绘制像素点。使⽤ Processing 模型，draw 函数调⽤ update 以应⽤规则；返回后，draw 将这个更新了的空间发到显⽰窗⼝。
int[][][] pix = new int[2][400][400];
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); // brown
color red  = color(255, 0, 0); // red;
color green = color(0, 255, 0); // green
float pGrowth = 0.01;
float pBurn = 0.00006;
boolean prob( float p )
{
if (random(0, 1) < p) return true;
else return false;
}
void setup()
{
size(400, 400);
frameRate(60);
/* Initialize to all empty sites */
for (int x = 0 ; x < x_limit ; x++) {
for (int y = 0 ; y < y_limit ; y++) {
pix[toDraw][x][y] = emptySite;
pix[toDraw][x][y] = emptySite;
}
}
}
void draw()
{
update();
for (int x = 0 ; x < x_limit ; x++) {
for (int y = 0 ; y < y_limit ; y++) {
if        (pix[toDraw][x][y] == tree) {
stroke( green );
} else if (pix[toDraw][x][y] == burningTree) {
stroke( red );
} else stroke( brown );
point( x, y );
}
}
toDraw = (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 = pix[toDraw][x][y];
// Survey area for burning trees
burningTreeCount = 0;
for (dx = -1 ; dx < 2 ; dx++) {
for (dy = -1 ; dy < 2 ; dy++) {
if ((dx == 0) && (dy == 0)) continue;
else if (pix[toDraw][x+dx][y+dy] == burningTree) burningTreeCount++;        }
}
// Determine next state
if      (cell == burningTree) chg = emptySite;
else if ((cell == emptySite) && (prob(pGrowth))) chg = tree;
else if ((cell == tree) && (prob(pBurn))) chg = burningTree;
else if ((cell == tree) && (burningTreeCount > 0)) chg = burningTree;
else chg = cell;
pix[toCompute][x][y] = chg;
}
}
}
运⾏结果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。