Confirmed users
656
edits
Processing.js for JavaScript Devs: Difference between revisions
Jump to navigation
Jump to search
Processing.js for JavaScript Devs (view source)
Revision as of 20:47, 16 September 2010
, 16 September 2010→Ways to Use Processing.js
| Line 69: | Line 69: | ||
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. | 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=== | ===Writing Documents that Combine Processing and JavaScript Code=== | ||
| Line 181: | Line 265: | ||
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. | 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== | ==Things to Know as a JavaScript Developer using Processing.js== | ||