這個入門指導是為javascript開發者寫的。在讀這篇文件之前，你最好先掌握javascript和web開發編程，而且還會非常基本的 Processing 知識。
目錄：
為沒有耐心看長篇大論的人準備：
如果你很急著入門，那麼你就需要知道以下幾點：
1、Processing.js 將 Processing 程式碼轉換成能夠在瀏覽器端運作的javascript程式碼，實質是透過
<script src="processing-1.3.6.min.js"></script> <canvas data-processing-sources="hello-web.pde"></canvas>
加载你的 web 页面，processing.js 将解析、翻译 sketch file，然后你的sketch file就会运行在浏览器里。
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社区来说，一个新而成熟并且接近全功能的图象编程语言从而诞生了。
<!DOCTYPE html> <html> <head> <title>Hello Web - Processing.js Test</title> <script src="processing-1.3.6.min.js"></script> </head> <body> <h1>Processing.js Test</h1> <p>This is my first Processing.js web-based sketch:</p> <canvas data-processing-sources="hello-web.pde"></canvas> </body> </html>
当页面加载完（on page load）,processing.js将会自动浏览web页面的document，去查找
// hard-coded Processing code, text from an HTML widget, downloaded text, etc. var processingCode = "..."; var jsCode = Processing.compile(processingCode).sourceCode;
例如，转化如下的Processing 代码 会生成 在它之下的 编译的来的javascript代码：
// Processing code
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
// "Comiled" JavaScript code
// this code was autogenerated from PJS
(function(processing, $constants) {
function setup() {
processing.size(200, 200);
processing.background(100);
processing.stroke(255);
processing.ellipse(50, 50, 25, 25);
processing.println("hello web!");
}
processing.setup = setup;
}) 只写 javascritp的 processing.js code
前面的方法把 processing 代吗生成了 javascript 代码，但是你也可以单独写javascript。processing.js的解析器将Processing代码转化成javascript方法，然后运行它。因此，完全有可能跳过Processing代码，只写javascript 方法，将方法传给一个Processing实例。这有个例子如下：
function sketchProc(processing) {
// Override draw function, by default it will be called 60 times per second
processing.draw = function() {
// determine center and max clock arm length
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(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);
}
// erase background
processing.background(224);
var now = new Date();
// Moving hours arm by small increments
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
// Moving minutes arm by small increments
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
// Moving hour arm by second increments
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var processingInstance = new Processing(canvas, sketchProc);
这儿是创建了一个 sketch 方法，这个方法就和解析器生成的代码一样。这个方法需要一个参数，它是一个指向某个由Processing构造器生成的processing对象（例如，Processing运行时对象）的引用，任何 Procesing方法或者对象都一个作为它的属性来访问。
一旦这个方法完成，并且通过，随着就有一个引用指向canvas，一个引用指向 Processing构造器（记得用"new"）。
写一个 Processing 和 javascript结合的文件
人们经常问的第一个问题就是processing.js是否可以读取来自正在运行Processing sketch的文件的值。或者反过来的观点。答案是肯定的。
Processing.js 转化 Processing 代码 成一个含有函数闭包javascript代码。所有你创建的变量和方法没有被绑定到全局变量上（即：window）。然而，你仍然可以访问他们。
1)、从Processing里访问 javascript对象
从Processing代码转化成javascript并且和其他函数一样运行起来，所有Processing代码都可以访问全局对象。这意味着你可以在全局脚本模块里创建一个变量或者方法，它们就可以自动被Processing来访问。考虑这样一个例子：
首先是 Processing 文件，mixed.pde:
String processingString = "Hello from Processing!";
void setup() {
printMessage(jsString + " " + processingString);
} 接下来是web页面：
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Accessing JavaScript from Processing</title>
<script src="processing-1.3.6.min.js"></script>
</head>
<body>
<div id="msg">
</div>
<canvas data-processing-sources="mixing.pde"></canvas>
<script type="application/javascript">
var jsString = "Hello from JavaScript!";
var printMessage = 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解析器的原因）。这是一个之前也是用这个方法写的例子：
var jsString = "Hello from JavaScript!";
var printMessage = function(msg) {
document.getElementById('msg').innerHTML = "Message: " + msg;
};
String processingString = "Hello from Processing!";
void setup() {
printMessage(jsString + " " + processingString);
} 有些javascript语法很难用这种方式混在一起写（例如：正则语法）。如果是那样的情况的话，你可以简单地将纯javasript代码移到一个
