ProcessingJS介绍

最近由于工作的关系，好好研究了一下ProcessingJS。Processing是一门可视化编程语言，ProcessingJS是它的JavaScript实现，使用HTML5的canvas，配合现代浏览器来实现web客户端的可视化技术。（不得不说，John Resig真是个高产的作者，jQuery、Sizzle、ProcessingJS）

ProcessingJS做了这两件事：

1.把基于Java的Processing表述，转化为JavaScript代码

2.利用HTML5的canvas api，在浏览器上执行

下面是一个3D绘图的例子，如果你使用Chrome、Firefox、Safari（版本别太老就行，IE是无论什么版本都不行），就可以看到效果：（可以拖拽）

在没有HTML5之前，要实现类似的效果就必须要Flash或者Java Applet这样的浏览器插件来实现，而现在只要书写出基于Web标准的代码，就可以跨平台跨浏览器的实现非常优秀的用户体验和界面效果。

而直接书写Canvas API，又过于繁琐过于底层了，Processing可视化语言创建之初的目的就是，希望在软件开发工程师和艺术家、数据建模者之间建立起桥梁，让非技术专家也可以利用计算机和程序语言来建立模型和动画。（提高程序员的审美水平是否也是创建Processing语言的目的之一呢？ – -b）

使用Processing来描述可视化数据或者动画，是非常方便和易于理解的，只要定义两个函数即可。

void setup() { … } 负责初始化绘图面板

void draw() { … } 定义绘图逻辑，每一帧画面的重绘都会调用这个函数

Processing API提供了方便的绘图支持：图形类的包括：rect()、ellipse()等基本图形，bezier()等曲线，box()、sphere()等3D图形。交互类的包括，对鼠标、键盘的事件处理。坐标定义的包括，translate()坐标转换，rotate()旋转，光源、视角的转换、位移。颜色处理、图片渲染、字体渲染。以及常用的数学计算支持、三角函数。

例1：一个2D：

int i = 0;
void setup() {
	size(200, 200);
	frameRate(24);
	background(255);
	strokeWeight(15);
	smooth();
}
void draw() {
	stroke(random(50), random(255), random(255), 100);
	line(i++, 0, random(0, width), height);
	if (i >= width) i = 0;
}
void mousePressed() {
	background(255);
	redraw();
}

例2:3D的一个示例：

float ang = 0, ang2 = 0, ang3 = 0, ang4 = 0;
float px = 0, py = 0, pz = 0;
float flapSpeed = 0.2;
void setup(){
	size(200, 200, P3D);
	frameRate(30);
	noStroke();
}
void draw(){
	background(0);
	camera();
	// Flight
	px = sin(radians(ang3)) * 170;
	py = cos(radians(ang3)) * 300;
	pz = sin(radians(ang4)) * 500;
	translate(width/2+px, height/2+py, -700+pz);
	rotateX(sin(radians(ang2)) * 120);
	rotateY(sin(radians(ang2)) * 50);
	rotateZ(sin(radians(ang2)) * 65);
	// Body
	fill(153);
	box(20, 100, 20);
	// Left wing
	fill(204);
	pushMatrix();
	rotateY(sin(radians(ang)) * -20);
	rect(-75, -50, 75, 100);
	popMatrix();
	// Right wing
	pushMatrix();
	rotateY(sin(radians(ang)) * 20);
	rect(0, -50, 75, 100);
	popMatrix();
	// Wing flap
	ang += flapSpeed;
	if (ang > 3 || ang < -3) flapSpeed *= -1;
	// Increment angles
	ang2 += 0.02;
	ang3 += 4.0;
	ang4 += 1.50;
}

呵呵，功能很强大，API表述能力很强。

文章的最后，放上一个我用ProcessingJS实现的常见排序算法图形化演示，包括了冒泡、选择、插入、希尔、归并、堆排、快排算法的实现。

传送门：http://hedatou.com/wp-content/uploads/2011/09/processingjs.html

顺带，我又找了一些数据可视化的例子：

 可视化数据结构：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

匈牙利 Sapientia 大学的 6 种排序算法舞蹈视频：http://top.jobbole.com/1539/

很酷的各种排序演示：http://sorting.at/