1 Processing入门简介

1.1 Before you start

Processing是一个为开发面向图形的应用(visually oriented application)而生的简单易用的编程语言和编程环境。Processing的创造者将它看作是一个代码素描本。它尤其擅长算法动画和即时交互反馈，所以近年来在交互动画，复杂数据可视化，视觉设计，原型开发和制作方向越发流行，大家都喜欢这个可爱贴心，简洁好用的编程工具。

Processing基于Java，其语法规则和Java是一致的，但是即使你熟悉Java编程，也请暂时忘记这一点，因为Processing不同于Java，它更为简单，并且已经演化出了它自己的一套"工作习惯"。

本文将简洁地向你描述Processing的下载、配置、使用方法和编程思路，希望本文能给你打开一扇通向自由创造的大门。

网站包含了Processing的作品展示，对象/函数文档和应用示例，背景介绍，相关链接(论坛、维基、FAQ等等)。

如果你想获得详细的、最新的Processing资讯，请访问该网站；如果你有足够的英文水平和精力，请停止向下继续阅读，访问该网站，因为那上有能满足你的更多更丰富和权威的资讯。

1.2 Equip yourself

开始旅程之前，让我们来安装Processing。

由于Processing基于Java，请保证你的计算机已经配置Java环境，否则Processing不能正常工作。

Processing最新版本下载地址：

Processing是开源软件，开发者下载前会询问你是否向其捐款，对此我的建议是：有钱就捐点吧！

当然，选择"No Donation"可以直接看到下载链接，选择"Download"进入下载页面：

选择适配你电脑的版本，点击下载。这里以windows64位系统为例。

下载后会得到文件：

此时你已经完成了一大半的工作了！

(再次提示，必须先配置好Java环境Processing才能正常运行。

接下来，解压安装包：

打开processing.exe：

完成！你已经看到了Processing的开发环境PDE。把processing.exe创建桌面快捷方式，今后可以方便的使用了。

1.3 Start!

现在你已经进入了一个全新的Processing世界，你要开始学习Processing的习惯。

1.3.1 Sketch

之前已经提到过，Processing的创造者它看作是一个代码的素描本，在这里，你可以用代码绘画。所以，Processing的工程也非常文艺地取名为"素描本"——Sketch。

选择Sketch→Show Sketch Folder，打开当前工程文件目录。

这个素描本中的素描纸，也就是Processing的源文件是.pde文件，在PDE中以tab的形式显示，tab的名称就是pde文件的名称。每个sketch中都有一个主tab，这个tab和目录文件夹同名，是Processing的程序入口。

1.3.2 PDE

Processing的开发环境被称为PDE(Processing Development Environment)，在PDE的界面中，你可以看到三个部分：工具栏，代码编辑区，控制台。

Toolbar工具栏

运行 停止

新建 打开 保存 输出应用

这些功能用来控制Sketch(Processing工程)，其中，输出应用的功能将在下一节详述。

模式选择

Processing支持多种运行模式，默认为Java，即运行时生成一个桌面应用，可以下载添加Android(生成安卓程序)，JavaScript(生成嵌入web的applet)等模式。

Text editor 代码编辑区

选项卡区

Processing以选项卡tab组织代码编辑区，每个tab实际上对应了一个.pde格式的代码源文件。点击右方的小下拉箭头，可以对tabs进行操作。

当你打开processing.exe时，Processing就为你默认创建了一个工程(Processing中被称为Sketch)，并为你创建了一个以"sketch_+当前日期+顺序编号"命名的tab。选择Sketch→Show Sketch Folder，就能够看到当前工程文件目录。这是工程是暂存的状态，选择可以进行更名和保存。

Console 控制台

黑色区域上方是信息区，运行时的PDE状态、出错信息等都会显示在这里；

黑色区域是控制台；

最下方显示的是当前的行数。

现在刚打开的工程是空白的，点击运行键，你的屏幕上将出现运行结果：

默认情况下，Processing程序的运行结果是一个100*100的灰色空白窗口。在代码编辑区输入下列代码：

再次运行，如果不出什么意外的话，你将看到：

如果出了意外，你的代码输入错误，你将在控制台看到你的错误信息，根据这个信息修正你的代码。

1.4 Hello World！

清空你的代码编辑区，在代码编辑区输入下列代码，然后运行：

void setup() {

size(480, 120);

}

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

感觉如何？

这段代码的意思是，将窗口大小设定为480*120，如果鼠标按下，则在鼠标的位置画一个半径为80的白色圆，否则在鼠标的位置画一个半径80的黑色圆。

1.4.1 Processing程序逻辑

点击stop按钮

终止程序，让我们来看看这段代码。

在这个程序中我们重写了两个函数：setup()和draw()。

setup()是在程序开始时调用的函数，只执行一次；而draw()在setup后被调用，并且将循环地、不停地被调用。

这里的setup()和draw()函数类似于MFC的回调函数，也就是说，在特定的条件下被系统调用的函数，如，setup是在程序启动时被调用的，draw是setup以后按照每秒多少帧被系统调用的(类似的函数还有mousePressed()—在鼠标按下时被调用，keyPressed()—在键盘某个键按下时会被调用，等等)。然而setup()和draw()是所有函数中最关键的两个函数。

下面我们来尝试一下：

1、在setup函数中加入如下代码并运行：background(255);

2、将刚才加到setup中的那一行代码剪切到draw函数中并运行。

结果如何？我们可以看到，在第一步时，运行效果和一开始相仿，鼠标滑动会留下一连串的圆圈轨迹，而第二步中，我们不能得到轨迹，只能看到一个随着鼠标移动的黑球或者白球。

background()是设置背景颜色的函数，里面的参数是颜色，当有一个数字参数时，它指代的是0-255的灰度值，所以"background(255);"这条语句的作用是，将背景颜色设置为白色。而之所以出现刚刚两种完全不同的效果，原因是setup()只在程序开始执行一次，之后不断画上去的圈圈，将背景盖住，而draw()会被不断调用，每一次调用，都会执行一次background函数，将整个画面刷新一遍，再绘制新的小圈圈，所以看起来就是只有一个随着鼠标移动的小球了。

draw()就像动画中的一帧，我们的代码决定了每一帧中要画什么东西。如果我们说，每一帧都画一样的东西，最后画面就是静止的；如果我们告诉Processing，每一帧要画什么不一样的东西，我们的画面就动起来了；如果我们说，按照鼠标的移动画出不同的东西，你的画面就成为了交互式的。

Processing就以这样的方式，让图形图像动起来，和用户进行交互。

1.4.2 空间和色彩的游戏

下面将写在draw函数中的background()语句修改一下：

background(mouseX, mouseY, 100);

再次运行。

如果一切正常，你在移动鼠标的时候可以看到背景颜色随着鼠标小球的位置在逐渐的变化。

这里我们给了background函数三个参数，这时候，这三个参数就分别代表了red，green和blue的值，而mouseX，mouseY是Processing中记录鼠标位置的对象，所以，当时间流逝，draw函数被不断调用，窗口的背景值就随着鼠标的位置不断改变了。

看到了么？Processing就这样将你的鼠标位置"翻译"成了色彩！

这只是Processing的冰山一角。Processing中有大量的内置对象和函数，它们让你轻松的操控空间和色彩，创造出各式各样的作品。

1.4.3 保存和分享！

到现在为止我们还没保存过我们的工作，点击

(或ctrl+s)，在弹出的窗口里输入你想保存的工程名(Processing默认的工程名是"Sketch+当天时间+字母编号"，我一般保存时将最后的字母修改为我想要的名字即可，即"sketch_131022_helloworld")Processing会在你选好的位置为它创建一个sketch。

如果你想让将你的大作和朋友们分享，你可以将程序发布成应用。点击

(或ctrl+e)，根据提示操作，你就能得到在Windows、iOS或者Linux下运行的应用程序。以Windows为例，导出应用后sketch中会出现为32位系统和64位系统的两个文件夹，其中每个文件夹中都含有 一个同名批处理文件，一个Processing库文件夹lib，和一个ped源文件夹source(程序源代码，没有它仍然导出的程序可以运行)，如果有数据还会有一个data文件夹，运行时，执行.bat批处理文件就行了。

1.5 三个锦囊

到现在为止，Processing的基本操作和逻辑我已经介绍完了。最后送大家三个锦囊。

1.5.1 Reference

Processing为它的使用者提供了相当好用的文档。

观察PDE中的程序代码，程序中有颜色的size()、fill()、ellipse()函数和mousePressed、mouseX、mouseY，是Processing内置的函数和值。

在这些词上点击右键 > Find in Reference，就会在弹出的页面中看到这些内置函数、对象的说明文档。

这个文档来自本地(在你解压的Processing包里)，你可以从打开的这个文档中的链接找到所有的Processing对象、类、函数，Processing的创作者为我们提供了全面的描述和形象的介绍。同样的内容可以在官网的Reference上找到。

当你不清楚这个函数的用途，或者参数、返回值时，可以以这样的方式查看它。当你想知道Processing中所有的函数、对象和它们的用法时，也可以去查看Reference。

1.5.2 Examples

Processing为它的使用者贴心地准备了大量全面的使用示例。

在PDE中选择file > Examples(或Ctrl+Shift+O)就会弹出Processing的Examples窗口。

这里集成了大量的Processing案例，涵盖了Processing的各个方面各种话题。点开其中的任何一个工程，都会开启新的PDE窗口，这里，Processing用最简单优美的代码来表达问题，你可以点击运行查看代码结果，在代码区观察代码结构。

1.5.3 One More Thing

打开一个新工程(Ctrl+n)，输入下列代码并运行：

void setup(){

size(400, 400);

}

void draw(){

background(#FFEE31);

pushMatrix();

translate(200, 200 - 60);

//eyes

PVector mouse = new PVector(mouseX, mouseY);

mouse.sub(200, 200 - 60, 0);

mouse.limit(7);

fill(0);

noStroke();

rectMode(CENTER);

rect(-1*40+mouse.x, -15+mouse.y, 15, 25, 8);

if(mousePressed)

rect(40+mouse.x, -15+mouse.y, 28, 10, 5);

else

rect(40+mouse.x, -15+mouse.y, 15, 25, 8);

//mouth

noFill();

strokeWeight(12);

stroke(0);

arc(0, 0, 150, 120, PI/4, PI-PI/4);

popMatrix();

//text

textSize(25);

textAlign(CENTER);

text("Enjoy your hacking with\nProcessing!", width/2, height/2+100);

}

Reference