Confirm
656
edits
Changes
→Things to Know as a Processing Developer using Processing.js
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 Processing JavaScript Developer using Processing.js==
While Processing.js is tries to be fully compatible with Processing, Java is not JavaScript, and canvas has there are some things which are different or require workarounds. We have also added some differences from Java's graphics classesweb-specific features to make Processing.js easier to use. Here are some tricks and tips as you start working on more complex sketches in Processing.js.
===Processing.js has no data directoryprovides access to various DOM/JavaScript objects via the externals property===
Each Processing uses the concept of a instance (i.e., Processing.instances) has an '''dataexternals''' directoryproperty, where images and other resources are located. which is an object containing references to various non-Processing.js does not include thisDOM/JavaScript objects that can be useful. As a result, you should always provide file pages (e.g., images) that are relative to your web page, which is the norm on the web.For example:
The Processing.js instance's externals property is compatible with Processing, but is not, and will never be, fully compatible with Java. If your sketch uses functions or classes not defined as part of Processing, they are unlikely a good place to work with Processing.js. Similarly, libraries stash various objects that are written for Processing, which are written in Java instead of Processing, will most likely not workyou need to share between the instance and the global object.
===Division which is expected to produce an integer might need explicit casting===
There are a class of bugs that arise when converting Processing code to Processing.js that involve integer vs. floating point division. What was straight-up integer division in Processing code, when converted to Processing.jsJavaScript, can sometimes become problematic, as numbers become doubles, and introduce a fractional part. The fix is to explicitly cast any division to an integer that exhibits this behaviour:
<pre>
Processing uses a synchronous I/O model, which means that functions like '''loadImage()''' take time to execute, and while they are running, nothing else happens: the program waits until '''loadImage()''' is done before moving on to the next statement. This means that you can count on the value returned by a function like '''loadImage()''' being usable in the next line of code.
The Processing.js Directives are hints to the browser that are written in comments rather than in the Processing code itself. Here's a typical Processing sketch that loads an image synchronously and then draws it:
Portions of the code above are from the Processing.js project's '''init.js''' file, see http://github.com/annasob/processing-js/blob/0.9.8/examples/init.js. This file will likely be going away in the future, and happen automatically as part of Processing.js initialization.
