最近由于工作的关系,好好研究了一下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/