Confirm
656
edits
Changes
→Ways to Use Processing.js
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.
===Pre-compiling Processing code to JavaScript===
Processing.js automatically downloads and converts any Processing code to JavaScript. It does this using the Processing.compile() method, and those interested in building tools or utilities for Processing.js can do the same.
In order to obtain "compiled" code (i.e., JavaScript suitable for use by the Processing.js runtime) from Processing code, do the following:
<pre>
var processingCode = "..."; // hard-coded Processing code, text from an HTML widget, downloaded text, etc.
var jsCode = Processing.compile(processingCode).sourceCode;
</pre>
For example, converting the following Processing code produces the "compiled" JavaScript underneath:
<pre>
// 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;
})
</pre>
===Writing JavaScript-only Processing.js code===
The previous method produced JavaScript code from Processing, but you can also write JavaScript on its own. The Processing.js parser turns Processing code into a JavaScript function, then runs it. As a result, it's possible to skip the Processing code altogether, and simply write a JavaScript function, passing this to your Processing instance. Here's an example:
<pre>
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);
</pre>
Here a sketch function is created, similar to what the parser would produce. This function should take 1 argument, a reference to a processing object (i.e., the Processing runtime), which will be created by the Processing constructor. Any Processing functions or objects are accessible as properties of this object.
Once that function is complete, pass it, along with a reference to a canvas, to the Processing constructor (remember to use ''new'').
===Writing Documents that Combine Processing and JavaScript Code===
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.
==Things to Know as a JavaScript Developer using Processing.js==
