<!DOCTYPE html> <html> <head> <title>Hello Web - Processing.js Test</title> <script src="https://www.jb51.net/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，去查找<canvas>的属性data-processing-sources,然后用XMLHTTPRequest去下载 这些文件，将它们塞进从porcessing到javascript的翻译器，翻译后的javascript将会通过eval 函数来执行。
预编译 processing 代码 为 javascript
Processing.js 自动下载并将所有Processing 代码转成 javascript。它做这些是使用Processing.compile()方法来完成的，并且 那些相关的processing构建工具 或者实用工具也可以做同样的事情。
为了获得 从Processing 代码编译后的代码（例如，JavaScript适用于processing.js运行）,请按如下操作：
// 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页面：