</pre>
We could There is some JavaScript syntax that can't be easily mixed this way (e.g., regex literals). In those cases you can simply move your pure JavaScript to a <script> block and access it using the method described above. =====Accessing Processing from JavaScript===== Reaching out from the Processing code to JavaScript is easier than going the other way, since the JavaScript created by the Processing.js parser is not exposed directly on the global object. Instead, you gain access using the Processing.instances property. The Processing constructor keeps track of instances it creates, and makes them available using the getInstanceById() method. By default, when a <canvas> has a data-processing-sources attribute, its id is used as a unique identifier for the Processing instance. If no id attribute is provided, you can use Processing.instances[0]. After you have a reference to the appropriate Processing instance, you can call into it like so: <pre><!DOCTYPE html><html> <head> <title>Hello Web - Controlling Processing from JavaScript</title> <script src="processing-0.9.7.min.js"></script> </head> <body> <div id="msg"></div> <canvas id="sketch" data-processing-sources="controlling.pde"></canvas> <button onclick="startSketch();">Start</button> <button onclick="stopSketch();">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></pre>
