ProcessingJS介绍

灰太狼 2021-05-12 11:55 406阅读 0赞

最近由于工作的关系，好好研究了一下[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();
    }

![70][]

例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;
    }

![70 1][]

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

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

传送门：[http://hedatou.com/wp-content/uploads/2011/09/processingjs.html][http_hedatou.com_wp-content_uploads_2011_09_processingjs.html]

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

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

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

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

[ProcessingJS]: http://processingjs.org/
[70]: /images/20210511/7c17dcb06ed84d05a1b48ec11e042444.png
[70 1]: /images/20210511/ff48b4d1bded4dba968fe44c157f200b.png
[http_hedatou.com_wp-content_uploads_2011_09_processingjs.html]: http://hedatou.com/wp-content/uploads/2011/09/processingjs.html
[https_www.cs.usfca.edu_galles_visualization_Algorithms.html]: https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
[http_top.jobbole.com_1539]: http://top.jobbole.com/1539/
[http_sorting.at]: http://sorting.at/