Processing.js 其实是一个中间件。 processing的开发者可以毫不费力地将已有的程序移植到浏览器中，以javascript的形式展示。具体来说processing.js做了两件事：
1 将processing 转化为javascript。
2 使用javascript重新实现了Processing的API。
对于一个简单的Hello-web.pde文件，只需要在html中引用：
<
script
src
="processing-1.0.0.min.js"
></
script
>
<
canvas
data-processing-sources
="hello-web.pde"
></
canvas
>
然后只需要将hello-web.pde， hello-web.html, processing-1.0.0.min.js 放到同一个目录下，即可将hello-web.pde的内容呈现在网页上。（注意路径值都是可以修改的）
官网上提到的一些需要注意的地方：
1、Processing.js 没有data目录
Processing有”data目录“的概念，用于存放图像以及其他资源。但processing.js没有将它包括进来。因此对于这些内容，需要全部由自己根据web规范来组织。
2、Processing.js 实现的是Processing 而不是全部的Java
processing.js兼容的是Processing，而不是也将不会全部兼容Java. 假如有些类使用了不是Processing定义的类，那么很有可能不能使用processing.js执行。 类库也是类似，一个使用Java为Processing写的类库，将不能用Processing.js所识别。
3、Processing.js 只有两种渲染模式
processing 有很多种渲染模式可以使用，我们可以根据对图像质量和速度的需求进行选择，但processing.js使用基于WebGL的Canvas标签提供2d和3d的渲染，因此最终的渲染模式只有2d和3d两种。
4、整数除法会出现小数。
加个强制转换即可。
1. // before
2. int g = mouseX / i;
3.
4. // after
5. int g = (int)(mouseX / i);
5、Processing使用的是同步的IO，因此耗时的工作例如LoadImage（）会被阻塞，之后得到的image是可靠的。但是processing.js不然，浏览器使用异步的IO，会导致image在未下载完时就执行操作。
一个解决办法如下：
使用@pjs preload指令 告诉processing.js 这是一条额外的指令，会在程序开始之前被执行。
1. /* @pjs preload="picture.jpg"; */
2. PImage img;
3.
4. void setup() {
5. img = loadImage("picture.jpg");
6. image(img, 0, 0);
7. }
刚才试了一下，貌似文件名是大小写敏感的。
6、processing.js 需要更细致地考虑命名
由于javascript是弱类型的语言，因此给函数、类命名的时候，不要使用processing中的关键字。
7、可以直接将processing程序语句放到web页面
注意type属性区分了Javascript和ProcessingScript
<
script
src
="processing-1.0.0.min.js"
></
script
>
<
script
type
="application/javascript"
>
/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/
if
(window.addEventListener) {
window.addEventListener(
"
load
"
,
function
() {
var
scripts
=
document.getElementsByTagName(
"
script
"
);
var
canvasArray
=
Array.prototype.slice.call(document.getElementsByTagName(
"
canvas
"
));
var
canvas;
for
(
var
i
=
0
, j
=
0
; i
<
scripts.length; i
++
) {
if
(scripts[i].type
==
"
application/processing
"
) {
var
src
=
scripts[i].getAttribute(
"
target
"
);
if
(src
&&
src.indexOf(
"
#
"
)
>
-
1
) {
canvas
=
document.getElementById(src.substr(src.indexOf(
"
#
"
)
+
1
));
if
(canvas) {
new
Processing(canvas, scripts[i].text);
for
(
var
k
=
0
; k
<
canvasArray.length; k
++
)
{
if
(canvasArray[k]
===
canvas) {
//
remove the canvas from the array so we dont override it in the else
canvasArray.splice(k,
1
);
}
}
}
}
else
{
if
(canvasArray.length
>=
j) {
new
Processing(canvasArray[j], scripts[i].text);
}
j
++
;
}
}
}
},
false
);
}
</
script
>
<
script
type
="application/processing"
target
="processing-canvas"
>
void
setup() {
size(
200
,
200
);
background(
100
);
stroke(
255
);
ellipse(
50
,
50
,
25
,
25
);
println(
'
hello web!
'
);
}
</
script
>
<
canvas
id
="processing-canvas"
>
</
canvas
>
最后注意canvas的id属性和script的target属性将processing代码和Canvas连在一起。
