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:23, 16 September 2010

1,248 bytes removed ,  16 September 2010
→‎Things to Know as a Processing Developer using Processing.js
Line 182: Line 182:
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 Processing Developer using Processing.js==
==Things to Know as a JavaScript Developer using Processing.js==


While Processing.js is compatible with Processing, Java is not JavaScript, and canvas has some differences from Java's graphics classes.  Here are some tricks and tips as you start working on more complex sketches in Processing.js.
While Processing.js tries to be fully compatible with Processing, there are some things which are different or require workarounds.  We have also added some web-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 directory===
===Processing.js provides access to various DOM/JavaScript objects via the externals property===


Processing uses the concept of a '''data''' directory, where images and other resources are located.  Processing.js does not include this.  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.
Each Processing instance (i.e., Processing.instances) has an '''externals''' property, which is an object containing references to various non-Processing DOM/JavaScript objects that can be useful.  For example:


===Processing.js implements Processing, but not all of Java===
* canvas - the canvas to which the sketch is bound
* context - the canvas' context
* onblur and onfocus - event handlers


Processing.js 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 to work with Processing.js.  Similarly, libraries that are written for Processing, which are written in Java instead of Processing, will most likely not work.
The Processing instance's externals property is a good place to stash various objects that you need to share between the instance and the global object.


===Division which is expected to produce an integer might need explicit casting===
===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.js, 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:
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 JavaScript, 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>
<pre>
Line 212: Line 214:
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.
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.


Web browsers don't work like this.  The web uses an asynchronous I/O model, which means that functions which load external resources can't make the program wait until they finish.  In order to replicate Processing's load* functions, you have to use a special Processing.js Directive.
Obviously, JavaScript doesn't work like this.  The web uses an asynchronous I/O model, which means that functions which load external resources can't make the program wait until they finish.  In order to replicate Processing's load* functions, you have to use a special Processing.js Directive.


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:
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:
Line 311: Line 313:


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.
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.
===Whatever you can do with the web, you can do with Processing.js===
Now that your sketch is working, and you have a basic web page, you'll probably start getting ideas about how to make this look more beautiful, how to better integrate your sketch with the surrounding web page or site, and how to mix data from various web services and APIs.  Is it possible to mix images on Flickr and a Processing.js sketch? Yes.  Is it possible to link Twitter to Processing.js?  Yes.  Anything the web can do, your Processing.js sketch can do.
This is an important idea, and is worth restating: Processing.js turned your once Java-based code into JavaScript, and your graphics into <canvas>.  As a result, anything you read on the web about dynamic web programming, AJAX, other JavaScript libraries or APIs, all of it applies to your sketch now.  You aren't running code in a box, cut-off from the rest of the web.  Your code is a first-class member of the web, even though you didn't write it that way.
If you're feeling adventurous and want to go learn more about how to do other thing with HTML, JavaScript, CSS, etc. remember that everything they say applies to you and your sketches.
David.humphrey
Confirmed users
656

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/254134"

Navigation menu