Processing.js for Processing Devs: Difference between revisions

Processing.js for Processing Devs (view source)

Revision as of 20:10, 13 September 2010

2,915 bytes added , 13 September 2010

→‎Things to Know as a Processing Developer using Processing.js

David.humphrey

Confirmed users

656

edits

@@ Line 154: / Line 154: @@
 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 recommend 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 canvses).  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.