Confirm
656
edits
Changes
no edit summary
Processing.js was originally created in order to allow existing Processing developers and existing Processing code (often referred to as ''sketches'') to work unmodified on the web. As a result, the recommend way to use Processing.js is to write Processing code, and have Processing.js convert it to JavaScript before running it.
Below we discuss the various methods for using Processing.js in your web pages.
This is the preferred method for using Processing.js, and has been dealt with at length in the [[Processing.js for Processing Devs]] quick start guide. To summarize:
Processing.js will automatically scan the document on page load for <canvas> elements with data-processing-sources, download the files using XMLHTTPRequest, and feed them to the Processing-to-JavaScript translator. The resulting JavaScript is run using eval.
One of the first questions people ask with Processing.js is whether they can read values from the document in which the Processing sketch is running, or vice versa. The answer is yes.
Processing.js converts Processing code into JavaScript contained in a function closure. The variables and functions you create are not attached to the global object (i.e., window). However, you can still get access to them.
Since Processing code gets converted to JavaScript and run like any other function, all Processing code has access to the global object. This means that if you create a variable or function in a global script block, they are automatically accessible to Processing. Consider this example:
Here Processing.js allows the use of a variable and function declared outside the Processing code.
The previous example kept a clean separation between the JavaScript and Processing code, while loosening the boundary between the two. Because Processing.js converts Processing code to JavaScript, it's also possible to mix them directly. The Processing.js parser will leave JavaScript it finds within the Processing code unaltered, allowing developers to write a hybrid of Processing and JavaScript. Here is the previous example rewritten using this method:
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.
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.
</head>
<body>
<canvas id="sketch" data-processing-sources="controlling.pde"></canvas>
<button onclick="startSketch();">Start</button>
</pre>
Here two buttons in the DOM are used to allow the user to start or stop a running Processing sketch. They control the Processing instance (you might have several in a page, or hidden in divs) directly from JavaScript, calling Processing functions: loop() and noLoop(). The Processing functions are well documented elsewhere.
...more...
