MozillaWiki

Processing.js for Processing Devs: Difference between revisions

Page Discussion

Processing.js for Processing Devs (view source)

Revision as of 01:03, 25 October 2010

6,077 bytes added ,  25 October 2010
→‎For the Impatient
 
(15 intermediate revisions by 3 users not shown)
Line 4: Line 4:


This quick start guide is written from the standpoint of a Processing developer.  No HTML or JavaScript knowledge is assumed, and only basic Processing knowledge is necessary.
This quick start guide is written from the standpoint of a Processing developer.  No HTML or JavaScript knowledge is assumed, and only basic Processing knowledge is necessary.
===For the Impatient===
If you're in a rush, here's what you need to know:
# Processing.js is written in JavaScript, and uses HTML5's <canvas> element.  It converts your Processing code to JavaScript and runs it.
# 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
# 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>
<script src="processing-0.9.7.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>
</pre>
Load your web page, and it will parse, translate, and run your sketch in the browser.


==Why Processing.js?==
==Why Processing.js?==
Line 29: Line 45:
==1. Writing a Processing.js Sketch==
==1. Writing a Processing.js Sketch==


There's nothing you should do differently here: you should write your Processing sketches exactly the same way you already do.  For most people, this will mean using the Processing IDE, which has the nice benefit of letting you write, run, and test your code all in once place.  Remember, any valid Processing sketch should also be a valid Processing.js sketch.
There's nothing you should do differently to write sketches for Processing.js: you write your Processing.js code exactly like Processing.  For most people, this will mean using the Processing IDE, which has the nice benefit of letting you write, run, and test your code all in once place.  Remember, any valid Processing sketch should also be a valid Processing.js sketch.


If you want to experiment with web-based Processing.js code editors, you can also try these:
If you want to experiment with web-based Processing.js code editors, you can also try these:
Line 45: Line 61:
   stroke(255);
   stroke(255);
   ellipse(50, 50, 25, 25);
   ellipse(50, 50, 25, 25);
   println('hello web!');
   println("hello web!");
}
}
</pre>
</pre>
Line 60: Line 76:
* processing-0.9.7.min.js
* processing-0.9.7.min.js


The version numbers may be different as you read this, but note the file extensions.  Both end in .js, but one also has .min.  The .min version is the other file in a minified form, which means it will be smaller to download (minified JavaScript uses tricks like removing whitespace and renaming long variable names to single letters).  File sizes, and download times, matter on the web in a way they don't with normal Processing sketches.
The version numbers may be different as you read this, but note the file extensions.  Both end in .js, but one also has .min.  The .min version is Processing.js in a minified form, which means it will be smaller to download (minified JavaScript uses tricks like removing whitespace and renaming long variable names to single letters).  File sizes, and download times, matter on the web in a way they don't with normal Processing sketches.


==3. Creating a Processing.js Web Page==
==3. Creating a Processing.js Web Page==
Line 67: Line 83:


<pre>
<pre>
  <script src="processing-0.9.7.min.js"></script>
<script src="processing-0.9.7.min.js"></script>
  <canvas data-processing-sources="hello-web.pde"></canvas>
<canvas data-processing-sources="hello-web.pde"></canvas>
</pre>
</pre>


That's it!  No <html> or <body> tags, no title, no CSS, just the processing.js script, and a canvas.  While there isn't much here, it's important to understand what is.  First, the script tag has a src attribute, which is the file to load.  This could be a full url or a relative path.  In this case the browser is going to look for a file named '''processing-0.9.7.min.js''' in the same directory as your web page.
That's it!  No <html> or <body> tags, no title, no CSS, just the processing.js script, and a canvas.  While there isn't much here, it's important to understand what is.  First, the script tag has a '''src''' attribute, which is the file to load.  This could be a full url or a relative path.  In this case the browser is going to look for a file named '''processing-0.9.7.min.js''' in the same directory as your web page.


The second thing in this web page is a canvas tag.  Notice that it too has an attribute, '''data-processing-sources'''.  This is a list of filenames (or just one filename if you only have 1 file) separated by spaces (filenames and URLs on the web can't include spaces, so space is a safe choice for separating lists).  In this case, the browser is going to look for a file named '''hello-web.pde''' located in the same directory as your page page.
The second thing in this web page is a <canvas> tag.  Notice that it too has an attribute, '''data-processing-sources'''.  This is a list of filenames (or just one filename if you only have 1 file) separated by spaces (filenames and URLs on the web can't include spaces, so space is a safe choice for separating lists).  In this case, the browser is going to look for a file named '''hello-web.pde''' located in the same directory as your page page.


How does the browser know how to load a Processing *.pde file?  Processing.js takes care of this, and will download, parse (i.e., translate to JavaScript), then run it automatically when the page is loaded.
How does the browser know how to load a Processing *.pde file?  Processing.js takes care of this, and will download, parse (i.e., translate to JavaScript), then run it automatically when the page is loaded.
Line 113: 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===
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:
<pre>
// before
int g = mouseX / i;
// after
int g = (int)(mouseX / i);
</pre>
See bug https://processing-js.lighthouseapp.com/projects/41284/tickets/532-drawing-artifacts-in-processingjs-not-in-processing-with-this-code


===Processing.js has to cheat to simulate Processing's synchronous I/O===
===Processing.js has to cheat to simulate Processing's synchronous I/O===
Line 143: 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 in of code that will be executed before the program begins.
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 154: Line 188:


One of the powerful features of JavaScript is its dynamic, typeless nature.  Where typed languages like Java, and therefore Processing, can reuse names without fear of ambiguity (e.g., method overloading), Processing.js cannot.  Without getting into the inner-workings of JavaScript, the best advice for  Processing developers is to not use function/class/etc. names from Processing as variable names.  For example, a variable named '''line''' might seem reasonable, but it will cause issues with the similarly named '''line()''' function built-into Processing and Processing.js.
One of the powerful features of JavaScript is its dynamic, typeless nature.  Where typed languages like Java, and therefore Processing, can reuse names without fear of ambiguity (e.g., method overloading), Processing.js cannot.  Without getting into the inner-workings of JavaScript, the best advice for  Processing developers is to not use function/class/etc. names from Processing as variable names.  For example, a variable named '''line''' might seem reasonable, but it will cause issues with the similarly named '''line()''' function built-into Processing and Processing.js.
===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 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:
<pre>
<script src="processing-0.9.7.min.js"></script>
<script type="application/javascript">
/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/
if (window.addEventListener) {
  window.addEventListener("load", function() {
    var scripts = document.getElementsByTagName("script");
    var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
    var canvas;
    for (var i = 0, j = 0; i < scripts.length; i++) {
      if (scripts[i].type == "application/processing") {
        var src = scripts[i].getAttribute("target");
        if (src && src.indexOf("#") > -1) {
          canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
          if (canvas) {
            new Processing(canvas, scripts[i].text);
            for (var k = 0; k< canvasArray.length; k++)
            {
              if (canvasArray[k] === canvas) {
                // remove the canvas from the array so we dont override it in the else
                canvasArray.splice(k,1);
              }
            }
          }
        } else {   
          if (canvasArray.length >= j) {
            new Processing(canvasArray[j], scripts[i].text);         
          }
          j++;
        }     
      }
    }
  }, false);
}
</script>
<script type="application/processing" target="processing-canvas">
void setup() {
  size(200, 200);
  background(100);
  stroke(255);
  ellipse(50, 50, 25, 25);
  println('hello web!');
}
</script>
<canvas id="processing-canvas"></canvas>
</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 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.
===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/252882...262866"