<!DOCTYPE html> <html> <head> <title>Hello Web - Accessing JavaScript from Processing</title> <script src="https://www.jb51.net/processing-1.3.6.min.js"></script> </head> <body> <div> </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代码移到一个<script>代码块里，然后像上边“Accessing JavaScript Objects from Processing”描述的那样来访问它。
3）、从javascript里访问 processing
得出个结论是从Processing 代码里访问javascript比反过来要容易的多，因为被Processing解析器创建javascript没有直接暴露在全局对象里，因此你只能通过Processing.instances 的属性来访问。
Processing 的构造器一直都在监视实例的创建，并且使得他们可以使用getInstanceById()方法。默认，当<canvas>有属性 data-processing-source时，它的id将会作为Processing 实例的唯一识别负。如果没有id属性，你可以用Proessing.instance[0]来访问。
当你有一个能够访问Processing实例的引用时，你就可以调用它像这样：
<!DOCTYPE html> <html> <head> <title>Hello Web - Controlling Processing from JavaScript</title> <script src="https://www.jb51.net/processing-1.3.6.min.js"></script> </head> <body> <canvas data-processing-sources="controlling.pde"></canvas> <button> Start</button> <button> Stop</button> <script type="application/javascript"> var processingInstance; function startSketch() { switchSketchState(true); } function stopSketch() { switchSketchState(false); } function switchSketchState(on) { if (!processingInstance) { processingInstance = Processing.getInstanceById('sketch'); } if (on) { processingInstance.loop(); // call Processing loop() function } else { processingInstance.noLoop(); // stop animation, call noLoop() } } </script> </body> </html>