Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.

Processing 介绍

找这个软件起因于记笔记的时候需要画一些图，而我又不太喜欢用Visio这类软件，一来体积庞大，二来可重用的东西太少。从原则上来讲，记笔记要用的图片大都是一些矢量图，但是用鼠标拖拽来画图的方式总感觉与矢量图格格不入，效率也太低。我因此希望找到一款软件，能够通过编写代码的方式来方便的生成图片，于是想起了以前留意过的一个叫Processing的项目。
Processing是怎样的一个东西呢？引用官网的描述：

Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.

简单来讲就是一套用于绘图的编程语言以及对应的开发环境。总体上来讲，似乎用户里设计师与数字艺术家占的比例大一些，用来制作示意图或者UML之类并不一定很合适。但是一来实在没有其他替代选项，二来展示的作品实在过于酷炫，所以毅然决定入坑。以下图片都是Processing自带的Sample，所写不过二三十行代码，却能表现出很好的效果。
首先是这张简单的点阵图：

Simple Sample
原图是动态的，小圆点会在初始位置附近以一定的幅度随机晃动。
以下图片是在鼠标从左边移动到右边时，多边形的边数不断增加的过程：

TriangleStrip_1
TriangleStrip_2
TriangleStrip_3

还有一些复杂的几何图形以及数据可视化图形：

tree
data_visualization_1
data_visualization_2

上面举的例子里，几何图形、数据表达等等正是我想要的，但是网上搜了一圈似乎没有现成的用于画流程图以及示意图的库，看来真要用上还得靠自己造轮子了。

安装与运行

Processing是一款绿色软件，官网上可找到下载链接。当前版本（2.2.1）解压后有自带有一个Java的运行时环境。解压完毕后打开“processing.exe”便可直接编写代码并运行，同时在[File]->[Examples]可以看到官方提供的许多例子。由于Processing部分函数会使用openGL加速，如果显卡不支持或者驱动程序老旧可能会导致运行时报错。解决办法也很简单：把显卡驱动更新到最新版本，或者，换一个显卡吧！
Processing自带的IDE朴素简洁，但是菜单栏里点了一圈好像没有Debug功能，而且每次新建一个Sketch都会打开一个新窗口，用起来不是很顺手。

Default IDE

当然可以使用其他流行的IDE来替换，以Sublime Text 2为例，大致的配置步骤如下：

  1. 将Processing路径添加到PATH环境变量中。
  2. 在Sublime Text中安装Processing的Package。

更详细的步骤可以在Github上找到。在Sublime上编写程序方便快捷，但是由于没有足够好的插件，创建项目依然不方便，同样也不能Debug，所以看来还是要回到Eclipse的怀抱。所幸，在Eclipse上配置Processing开发环境比想象中还要容易。在安装好Eclipse和Processing的基础上，基本上也就两个步骤：

  1. 创建项目并且导入\processing-2.2.1\core\library下的core.jar。
  2. 把core.jar加入到Build Path中。

语法简介

从上面Eclipse的配置也可以看出，Processing是基于Java开发的。在官方提供的教程中可以看到用户编写的Processing启动类是要继承类processing.core.PApplet的。基于这个名字，和程序能以Java Applet的方式运行两点，有理由认为Processing其实是基于Applet实现的。
查看PApplet源代码，可以发现有一段注释如下：

1
2
3
4
5
6
/*
* As of Processing 3.0, we have removed Applet as the base class for PApplet.
* This means that we can remove lots of legacy code, however one downside is
* that it's no longer possible (without extra code) to embed a PApplet into
* another Java application.
*/

使用Java语法编程大大降低了许多程序员的学习成本，但是也带来性能方面的一些忧虑。虽然看低Java性能表现可以说是一种刻板印象，实际上我也不知道其他语言在图形编程方面的表现如何，但我的电脑跑Examples里稍微大一些的程序确实会比较吃力。
在Processing上绘制图形非常简单。使用自带IDE的话可以直接调用函数绘制图形，比如画一条直线是将起始点与终止点的坐标传给line()函数：

1
2
line(30, 20, 85, 75);
//line(x1, y1, x2, y2);

这里涉及到Procesing的坐标系，在Processing中以size(width,height)函数来定义画板大小，以画板的最左上角为(0,0)点，X轴与Y轴的增长方向如图：

coordinate

矩形与椭圆形（圆形）则由前两个参数确定图形“左上角”的位置，后两个参数则分别定义图形在X轴上的宽度以及Y轴上的高度：

1
2
3
4
5
6
7
8
9
//set up the weight of border line
strokeWeight(1);
//set up the color to fill the shape and border line
fill(0,255,0);
stroke(0,0,255);
//draw rectangle
rect(150,150,100,50);
//draw circle
ellipse(250,250,50,50);

得到的图形如下：

Rectangle and Circle

从上面代码可以看出，程序设置图形的边框颜色和填充颜色，调用的既不是属于图形对象的函数，也不将图形的对象作为参数传给函数，因此，Processing中很多函数比如fill(float RGB)和strokeWeight(float weight)做的都是全局设置。也即是说，一旦你设置了某个公共属性，后面的所有图形都自动带有这个属性，如果需要改变这个设置，则要重新调用属性函数。
另外，Processing的一大强项是动画处理。以下几张据说是来自柏林的David Whyte用Processing制作的Gif图片，动画处理能力可见一斑。

gif1
gif2
gif3
gif4

要使画面动起来其实也很方便，类PApplet中有以下两个函数：

1
2
public void setup() {...}
public void draw() {...}

程序启动后会先后调用setup()和draw()。其中setup()用于做一些准备工作，设置一些全局属性之类，它只会执行一次。而draw()函数则会无限循环，直到程序关闭或者调用了noLoop()函数。可用frameRate()来设置draw()在一秒内被调用的次数。而在draw()函数里，获取图形的当前状态与位置，然后在下一帧新的位置画出新状态的图形，这样便形成了动画。

以上，2014/12/20 0:58