Confirmed users
656
edits
Processing.js for Processing Devs: Difference between revisions
Processing.js for Processing Devs (view source)
Revision as of 01:03, 25 October 2010
, 25 October 2010→For the Impatient
| (4 intermediate revisions by 2 users not shown) | |||
| Line 12: | Line 12: | ||
# To use it, download Processing.js here: http://processingjs.org/download | # To use it, download Processing.js here: http://processingjs.org/download | ||
# Make your Processing *.pde files as you normally would, for example hello-web.pde | # Make your Processing *.pde files as you normally would, for example hello-web.pde | ||
# Create a web page that includes Processing.js as well as a <canvas> with info about where to get your sketch file: | # Create a web page that includes Processing.js as well as a <canvas> with info about where to get your sketch file (you can specify multiple *.pde files, separating them with spaces, and can name them anything, foo.pjs or foo.pde, or foo.js): | ||
<pre> | <pre> | ||
| Line 129: | Line 129: | ||
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. | 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. | ||
===Processing.js only has two rendering modes=== | |||
Processing has many rendering modes to choose from, depending on the desired quality and speed for graphics (e.g., OPENGL, P3D, JAVA2D, etc.). Processing.js uses <canvas> which provides either a 2D drawing context or a 3D context based on WebGL (a version of OpenGL for the web). Therefore, whatever you choose, you will end-up with either the 2D or 3D context. | |||
===Division which is expected to produce an integer might need explicit casting=== | ===Division which is expected to produce an integer might need explicit casting=== | ||
| Line 173: | Line 177: | ||
</pre> | </pre> | ||
Notice the extra comment line at the top of the code. The '''@pjs''' directive is for Processing.js, and not the developer. Think of it as an extra | Notice the extra comment line at the top of the code. The '''@pjs''' directive is for Processing.js, and not the developer. Think of it as an extra line of code that will be executed before the program begins. | ||
If you have multiple images to load, use a list like so: | If you have multiple images to load, use a list like so: | ||
| Line 187: | Line 191: | ||
===It is possible to put Processing code directly in your web page=== | ===It is possible to put Processing code directly in your web page=== | ||
Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and | Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and recommended way to include scripts in a web page. However, it is also possible to write in-line Processing code. | ||
A few changes are necessary to make the example above work with inline Processing code: | A few changes are necessary to make the example above work with inline Processing code: | ||
| Line 244: | Line 248: | ||
</pre> | </pre> | ||
This code is more complex because it has to figure out which canvas goes with which script (i.e., you can have multiple Processing sketches living in the same page, and therefore, multiple | This code is more complex because it has to figure out which canvas goes with which script (i.e., you can have multiple Processing sketches living in the same page, and therefore, multiple canvases). Also note that the scripts include a '''type''' attribute, which distinguishes between JavaScript and Processing code (the browser will ignore Processing scripts). Finally, note the use of the '''id''' and '''target''' attributes to connect the Processing script with the associated canvas. | ||
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. | ||