适用于javascript开发者的Processing.js入门教程
这个入门指导是为javascript开发者写的。读这个文档之前，你最好掌握javascript和web开发编程，并还会非常基本的Processing知识。
目录：
为没有耐心看长篇大论的人准备：
如果你很着急入门，那么你就需要知道以下几点：
1、Processing.js把Processing代码转变成能够在浏览器端运行的javascript代码，实质是通过<canvas>标签来实现绘图的；
2、为了使用它，你的首先下载Processing.js；
3、创建你的后缀名为".pde"的Processing文件，它和通常你创建的普通文本文件一样，例如:hello-web.pde
4、创建一个html页面，然后在页面里外引用Processing.js文件，再添加一个<canvas>标签，该<canvas>标签上指明有你的sketchfile(顾名思义，草图文件，就是Processing文件)，sketchfile可以有多个文件，多个文件用空格隔开。例如：
<scriptsrc="processing-1.3.6.min.js"></script> <canvasdata-processing-sources="hello-web.pde"></canvas>
加载你的web页面，processing.js将解析、翻译sketchfile，然后你的sketchfile就会运行在浏览器里。
Processing.js的来源？
Processing为何物？
Processing语言原先被MIT创建，被作为多媒体实验室和美学&计算机组的一部分。借助Processing能打通软件开发者，艺术家，数据可视化工程师们之间的隔阂，并且能够让编程人员和非编程人员非常容易地胜任视觉化工作。Processing是用java创建的，你可以把它认为是一种被简化了的java，并且带被简化了的用来绘画和绘图的API。
Processing能在web端做点什么？
Processing拥有大型并且和活跃的社区群体，他们擅长创建2D和3D图象，可视化数据套件，音频，视频等等。因为HTML5，web端拥有了canvas，audio,video,这些原先只能通过flash和java插件拥有的功能。与此同时，高级的javascript引擎使得javascript可以完全胜任以前做起来很慢的事情。
通过把Processing语言移植到web端，Processing和web社区都会收益。对于Processing来说，这意味这源码不仅可以在桌面上工作，而且可以在跑在浏览器上。对于web社区来说，一个新而成熟并且接近全功能的图象编程语言从而诞生了。<canvas>元素对于直接用javascript提供的接口来开发的编程人员来说，这些原生接口太低级了，所以更高级的库就是必要的。Processing.js就能够被当作是这样的简化操作2D和3Dcanvas的库。
学会processing,需要多少工作要做
Processing语言小而完整，所以非常容易学。本文档不仅仅尝试去教你Processing,还会鼓励你去寻找Processing的规范教程，书和例子。任何Processing代码或者概念都应该映射到Processing.js里（下边列出的除外）。你可以跳过Processing赞成的java语法的javascript，使用纯javascript来与Processing的画图API一起使用。
使用Processing的方式
Processing.js创建的初衷是能够让Processing开发者和Processing代码（通常是指sketches）不用修改就可以在web端运行。因此，被推荐的方式就是用Processing.js来写processing代码，然后通过Processing.js转换成javascript后运行它。
随着时间的推移，一些web开发者也开始使用processing.js,他们就要求设计的API从Processing语脱离出来使用。因此，我们提供一种可以用纯javascript语言来开发的方式，并且可以使用Processing的方法和对象。注意：Processing.js是放在首位的，并且是Processing向web开放的最重要的一部分，具有有利于兼容Processing的设计决定权。它不是被设计成一个通用的HTML画图库。已经说过，它是可以当作canvas高级画图API来用。
接下来我们讨论下在web页面里使用的各种Processing.js方法。
写纯Processing代码
这种写法是使用Processing.js的首选方法，并且已经在Processing.jsforProcessingDevsquickstartguide做了长篇的介绍。概括总结如下：
1、下载processing.js
2、创建一个单独的Processing 文件，或多个文件，名字可以随便叫，只要后缀名是".pde"就行。
3、创建一个web页面，页面包括Processing.js和<canvas>标签，<canvas>的信息含有sketchfile(s)的路径和用空格隔开的Procesing文件名列表，并且这些列表名是放在canvas的属性data-processing-sources上。例如：
<!DOCTYPEhtml> <html> <head> <title>HelloWeb-Processing.jsTest</title> <scriptsrc="processing-1.3.6.min.js"></script> </head> <body> <h1>Processing.jsTest</h1> <p>ThisismyfirstProcessing.jsweb-basedsketch:</p> <canvasdata-processing-sources="hello-web.pde"></canvas> </body> </html>
当页面加载完（onpageload）,processing.js将会自动浏览web页面的document，去查找<canvas>的属性data-processing-sources,然后用XMLHTTPRequest去下载这些文件，将它们塞进从porcessing到javascript的翻译器，翻译后的javascript将会通过eval函数来执行。
预编译processing代码为javascript
Processing.js自动下载并将所有Processing代码转成javascript。它做这些是使用Processing.compile()方法来完成的，并且那些相关的processing构建工具或者实用工具也可以做同样的事情。
为了获得从Processing代码编译后的代码（例如，JavaScript适用于processing.js运行）,请按如下操作：
//hard-codedProcessingcode,textfromanHTMLwidget,downloadedtext,etc. varprocessingCode="..."; varjsCode=Processing.compile(processingCode).sourceCode;
例如，转化如下的Processing代码会生成在它之下的编译的来的javascript代码：
//Processingcode
voidsetup(){
size(200,200);
background(100);
stroke(255);
ellipse(50,50,25,25);
println("helloweb!");
}
//"Comiled"JavaScriptcode
//thiscodewasautogeneratedfromPJS
(function(processing,$constants){
functionsetup(){
processing.size(200,200);
processing.background(100);
processing.stroke(255);
processing.ellipse(50,50,25,25);
processing.println("helloweb!");
}
processing.setup=setup;
})
只写javascritp的processing.jscode
前面的方法把processing代吗生成了javascript代码，但是你也可以单独写javascript。processing.js的解析器将Processing代码转化成javascript方法，然后运行它。因此，完全有可能跳过Processing代码，只写javascript方法，将方法传给一个Processing实例。这有个例子如下：
functionsketchProc(processing){
//Overridedrawfunction,bydefaultitwillbecalled60timespersecond
processing.draw=function(){
//determinecenterandmaxclockarmlength
varcenterX=processing.width/2,centerY=processing.height/2;
varmaxArmLength=Math.min(centerX,centerY);
functiondrawArm(position,lengthScale,weight){
processing.strokeWeight(weight);
processing.line(centerX,centerY,
centerX+Math.sin(position*2*Math.PI)*lengthScale*maxArmLength,
centerY-Math.cos(position*2*Math.PI)*lengthScale*maxArmLength);
}
//erasebackground
processing.background(224);
varnow=newDate();
//Movinghoursarmbysmallincrements
varhoursPosition=(now.getHours()%12+now.getMinutes()/60)/12;
drawArm(hoursPosition,0.5,5);
//Movingminutesarmbysmallincrements
varminutesPosition=(now.getMinutes()+now.getSeconds()/60)/60;
drawArm(minutesPosition,0.80,3);
//Movinghourarmbysecondincrements
varsecondsPosition=now.getSeconds()/60;
drawArm(secondsPosition,0.90,1);
};
}
varcanvas=document.getElementById("canvas1");
//attachingthesketchProcfunctiontothecanvas
varprocessingInstance=newProcessing(canvas,sketchProc);
这儿是创建了一个sketch方法，这个方法就和解析器生成的代码一样。这个方法需要一个参数，它是一个指向某个由Processing构造器生成的processing对象（例如，Processing运行时对象）的引用，任何Procesing方法或者对象都一个作为它的属性来访问。
一旦这个方法完成，并且通过，随着就有一个引用指向canvas，一个引用指向Processing构造器（记得用"new"）。
写一个Processing和javascript结合的文件
人们经常问的第一个问题就是processing.js是否可以读取来自正在运行Processingsketch的文件的值。或者反过来的观点。答案是肯定的。
Processing.js转化Processing代码成一个含有函数闭包javascript代码。所有你创建的变量和方法没有被绑定到全局变量上（即：window）。然而，你仍然可以访问他们。
1)、从Processing里访问javascript对象
从Processing代码转化成javascript并且和其他函数一样运行起来，所有Processing代码都可以访问全局对象。这意味着你可以在全局脚本模块里创建一个变量或者方法，它们就可以自动被Processing来访问。考虑这样一个例子：
首先是Processing文件，mixed.pde:
StringprocessingString="HellofromProcessing!";
voidsetup(){
printMessage(jsString+""+processingString);
}
接下来是web页面：
<!DOCTYPEhtml>
<html>
<head>
<title>HelloWeb-AccessingJavaScriptfromProcessing</title>
<scriptsrc="processing-1.3.6.min.js"></script>
</head>
<body>
<divid="msg">
</div>
<canvasdata-processing-sources="mixing.pde"></canvas>
<scripttype="application/javascript">
varjsString="HellofromJavaScript!";
varprintMessage=function(msg){
document.getElementById('msg').innerHTML="Message:"+msg;
};
</script>
</body>
</html>
这里Processing.js允许使用的变量和方法声明在Processing代码的外边。
2）、javascript和Processing代码的混合
前面的例子使得javascript和processing代码各自放在单独的文件里，当它们之间的界限不是分的很近时。
因为Processing.js在转化代码时，也可能直接将他们直接混在一起。Processing.js解析器保留包含在Processing代码里的javascript不变，这样就允许开发者能写processing和javascript的混合代码（注意：这也就是为什么processing.js里没有使用纯processing解析器的原因）。这是一个之前也是用这个方法写的例子：
varjsString="HellofromJavaScript!";
varprintMessage=function(msg){
document.getElementById('msg').innerHTML="Message:"+msg;
};
StringprocessingString="HellofromProcessing!";
voidsetup(){
printMessage(jsString+""+processingString);
}
有些javascript语法很难用这种方式混在一起写（例如：正则语法）。如果是那样的情况的话，你可以简单地将纯javasript代码移到一个<script>代码块里，然后像上边“AccessingJavaScriptObjectsfromProcessing”描述的那样来访问它。
3）、从javascript里访问processing
得出个结论是从Processing代码里访问javascript比反过来要容易的多，因为被Processing解析器创建javascript没有直接暴露在全局对象里，因此你只能通过Processing.instances的属性来访问。
Processing的构造器一直都在监视实例的创建，并且使得他们可以使用getInstanceById()方法。默认，当<canvas>有属性data-processing-source时，它的id将会作为Processing实例的唯一识别负。如果没有id属性，你可以用Proessing.instance[0]来访问。
当你有一个能够访问Processing实例的引用时，你就可以调用它像这样：
<!DOCTYPEhtml>
<html>
<head>
<title>HelloWeb-ControllingProcessingfromJavaScript</title>
<scriptsrc="processing-1.3.6.min.js"></script>
</head>
<body>
<canvasid="sketch"data-processing-sources="controlling.pde"></canvas>
<buttononclick="startSketch();">
Start</button>
<buttononclick="stopSketch();">
Stop</button>
<scripttype="application/javascript">
varprocessingInstance;
functionstartSketch(){
switchSketchState(true);
}
functionstopSketch(){
switchSketchState(false);
}
functionswitchSketchState(on){
if(!processingInstance){
processingInstance=Processing.getInstanceById('sketch');
}
if(on){
processingInstance.loop();//callProcessingloop()function
}else{
processingInstance.noLoop();//stopanimation,callnoLoop()
}
}
</script>
</body>
</html>
在DOM结构中有2个按钮,他们被用来让用户选择开始或暂停正在运行的Processingsketch.
他们直接在javascript中控制Processing实例（在页面里你可能有多个，或者藏在div中），通过调用Processing的方法：loop()和noLoop()。这些Processing的方法可以在其他的文件中找到。
作为一个使用Processing.js的开发者必须知道的事情：
当Processing.js试图去完全兼容Processing时，就有些不同的事情或者需要解决办法。我们也增加了一些web规范的功能来使Processing更容易被使用。这里有一些技巧和提示在你开始使用Processing.js做复杂的sketch时可能有帮助。
Processing.js提供通过“externals”属性来访问各种DOM/javascript对象
每个Processing实例（即：Processing.instances）包含有一个"external"属性,它是一个对象，包含各种指向非常有用的非Processing的DOM/javascritp对象，例如：
canvas--sketch被绑定上的画板 context--画板的执行上下文 onblurandonfocus--事件处理器
如果一个除法表达式期望产生一个整型值，那么这可能需要显式转换
当将Processing代码转化成javascript,涉及整型vs浮点型的除法的时候，有一个有bug的class会出现这个问题。
在Processing代码中出现某个东西直接除以整数的代码块，当被转化成Processing时，可能有时出现问题，因为，整型编程双精度型，被引入了一个小数部分。修补这个bug的方法是显式转换任何除法，正如展示的做法：
//before intg=mouseX/i; //after intg=(int)(mouseX/i);
Processing.js有个欺骗在模拟Processing的异步输入输出
Processing使用一个同步输入输出的模型，这就意味着像loadImage()方法这样，需要相对长时间去执行，然而当他们执行期间，又没有任何事发生，程序等到它loadImage()执行完才去执行下一行语句。这就意味这可以依靠像loadImage()这样的方法返回的值用在接下来的代码中。
但是web浏览器却不是这样的，它使用的是异步输入输出模型，这意味着加载外部资源的方法不能使得程序等到他们加载完再执行。为了实现Processing的load方法，你不得不使用一个特殊的Processing的指令。
Processing.js指令提示浏览器，指令是写在注释里而不是Processing自身代码。这是一个典型的Processingsketch，它需要同步加载一个图片然后画出它：
PImageimg;
voidsetup(){
img=loadImage("picture.jpg");
image(img,0,0);
}
这些代码在含有Processing.js的浏览器里将不会执行，因为图片文件picture.jpg被加载完之前就被调用了。修补这个bug的办法是让在sketch开始执行前就把图片加载好，并且缓存起来，就是所说的预加载技术。这是修改后的代码：
/*@pjspreload="picture.jpg";*/
PImageimg;
voidsetup(){
img=loadImage("picture.jpg");
image(img,0,0);
}
注意：放在代码顶部的额外的注释行。"@jps"指令是给Processjing.js用的，不是给开发者用的。可以把它认为成额外的代码行，它们将在程序执行前就被执行了。
如果你有多个图片被加载，可以使用如下列表：
/*@pjspreload="picture.jpg,picture2.jpg,picture3.png";*/
Processing.js需要更多的注意在变量的命名上比Processing
javascript其中一个最强大的特性就是它的动态，弱类型的性质。因为java是强类型的语言，所以Processing也是，他们能重复命名而不用还怕产生歧义（例如：方法的重载），Processing.js就不行。不能进入javascript的内部工作，所以对Processing.js的开发者来说，最好的建议就是不要用function/class/etc/,也不要用来自Processing的名字来命名变量。例如，一个叫line的变量可能看起来合理，但是它会导致问题，因为它和Processing与Procesing.js内置的函数名line()一样。
当要覆盖重载的父类方法时，Processing需要你的帮助
如果你的代码使用子类覆盖一个或多个父类里重载的方法，你需要“假”覆盖，因为，每个方法签名，你通常就没改动过:
classX
{
voiddoSomething()
{
...
}
voiddoSomething(floatx,floaty)
{
...
}
}
classYextendsX
{
voiddoSomething()
{
//differentcodefromcomparedtothesuperclass
}
//eventhoughwedon'toverridethismethod,
//itssignaturemustbeaddedtopreventPjs
//fromgettingthemethodchainwrong:
voiddoSomething(floatx,floaty)
{
super.doSomething(x,y);
}
}
尽管在Processing里你不需要实现拥有(float,float)签名的空方法doSomething,但是这样做几乎是必须的，这是为了确保Processing.js在调用方法时不被搞晕。
直接将Processing代码放在web页面里也是可以的
在canvas上，用一个data-processing-source属性包含Processing.js加载的外部文件的做法是首选，但是推荐的方式在web页面里外引用脚本。但是写成行内引用也是可以的。
把上边例子的代码作为行内引用的方式，有必要的改动一点：
<scriptsrc="processing-1.3.6.min.js"></script>
<scripttype="application/processing"data-processing-target="pjs">
voidsetup(){
size(200,200);
background(100);
stroke(255);
ellipse(50,50,25,25);
println('helloweb!');
}
</script>
<canvasid="pjs"></canvas>
这些代码是更复杂了，因为它没有指出那个canvas配那个脚本文件（即：你可以在一个页面引用多个Processingsketch,同样也可以有多个canvas）。也没有说明脚本的"type"属性，这个属性是用来区别javascript和Processing代码的（浏览器将忽略Processing脚本）。最后，注意："id"和"target"属性的用法，它俩是用来连接Processing脚本和相关的canvas的。
以上就是本文的全部内容，希望大家对Processing.js有所认识。