js mode example cleanups

javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde

@@ -1,9 +1,6 @@
 /**
  *    <p>This example shows you how to manipulate the DOM of a
- *    HTML page that this sketch is placed in.</p>
- *
- *    <p>Click and drag inside the sketch area to change the 
- *    text color of the page</p> 
+ *    HTML page from a sketch.</p>
  */
 
 color mColor = 255;
@@ -16,6 +13,9 @@ void setup ()
 void draw ()
 {
     background( mColor );
+    
+    textAlign(CENTER); fill(0);
+    text("<<  click and drag here  >>", width/2, height/2);
 }
 
 void mouseDragged ()
@@ -26,15 +26,16 @@ void mouseDragged ()
     
     if ( js )
     {
+        // call JavaScript function, see "jsinterface.js"
         js.setColor(red(mColor), green(mColor), blue(mColor));
     }
 }
 
 /**
  *    Define an interface that will act as glue between this sketch
- *    and "real" JavaScript running in the HTML page. The name does not matter.
+ *    and "real" JavaScript running in the HTML page.
  *
- *    The interface must define any functions that one intends to call
+ *    The interface must define all functions that you intend to call
  *    from inside the sketch.
  */
 interface JavaScriptInterface

javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js

@@ -1,6 +1,6 @@
 /**
  *    This code will be embedded into the HTML page as "normal"
- *    JavaScript code with a <script> tag. This allows one to
+ *    JavaScript code though a <script> tag. This allows one to
  *    interact with the page as any normal JavaScript code can.
  */
  
@@ -12,17 +12,16 @@
  // make the connection with the sketch
  function makeTheLink() {
      
-     // Get the instance. The id is automatically generated 
-     // based on the sketch name by removing anything but letters
-     // and numbers.
-     var mySketchInstance = Processing.getInstanceById( "colorFinder" );
+     // Get the instance. We just use the first one. Another way would be to use
+     // the automaticaly generated ID "colorFinder", see <canvas> in index.html
+     var mySketchInstance = Processing.instances[0];
      
      if ( mySketchInstance == undefined ) { // means it has not started
          setTimeout( makeTheLink, 200 );    // try again later
-         return;
+         
+     } else {
+         mySketchInstance.setInterfaceLink(this); // make the connection
      }
-     
-     mySketchInstance.setInterfaceLink(this); // make the connection
  }
  
  // called from the sketch!
@@ -37,4 +36,12 @@
      {
          h1s[0].innerHTML = "Color is: " + colorString;
      }
+     
+     var links = document.links;
+     if ( links.length > 0 )
+     {
+         for ( var l in links ) {
+             links[l].style.color = colorString;
+         }
+     }
  }

javascript/examples/Environment/DocumentObjectModel/nodeTree/forrest.js

@@ -7,7 +7,7 @@ window.onload = function () {
 function tryFindSketch () {
     var sketch = Processing.instances[0];
     if ( sketch == undefined )
-        return setTimeout(tryFindSketch, 200);
-    
-    sketch.setTree( document.body.parentNode );
+        setTimeout(tryFindSketch, 200);  // retry after 0.2 secs
+    else
+        sketch.setTree( document.body.parentNode );
 }

javascript/examples/Environment/DocumentObjectModel/nodeTree/nodeTree.pde

@@ -1,5 +1,5 @@
 /**
- *    Renders a simple graph from this documents node tree.
+ *    Renders a simple graph from this documents DOM node tree.
  */
  
  Node tree;
@@ -72,13 +72,15 @@
      text( label, x+10, y+3 );
  }
  
+ // called by JavaScript, sends the root DOM Node
  void setTree ( Node root )
  {
      tree = root;
  }
  
  
- /* explain Node to Processing */
+ // explain Node to Processing, the attributes described here are part of the DOM Node:
+ // http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247
  interface Node
  {
      Node[] childNodes;

javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionFlower.pde

@@ -1,6 +1,6 @@
 /**
  *    <p>This example shows you how to get the currently selected text 
- *    from the HTML page that this sketch is running in.</p>
+ *    from this HTML page.</p>
  *
  *    <p>Just select some text somewhere on this page and see it be transformed
  *    into a ... graph.</p>
@@ -8,6 +8,7 @@
  *    <p>Heavily inspired by <a href="http://bit.ly/jHvvWX">Boris Müller</a>.</p>
  */
 
+// a directive to set the background transparent
 /* @pjs transparent=true; */
 
 String selectedText = "";
@@ -65,10 +66,11 @@ void draw ()
     else
     {
         fill( map( sin(frameCount/12.0),-1,1,100,200 ) );
-        text("Select some (other) text on this page to start.", 2, height/2);
+        text("Select some text (not this) to start.", 2, height/2);
     }
 }
 
+// called from JavaScript
 void setSelectionText ( String txt )
 {
     selectedText = txt;

javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionmonitor.js

@@ -1,7 +1,6 @@
 /**
  *    This code will be embedded into the HTML page as "normal"
- *    JavaScript code through a <script> tag. This allows one to
- *    interact with the page as any normal JavaScript code can.
+ *    JavaScript code through a <script> tag.
  */
 
 var mySketchInstance;
@@ -13,17 +12,19 @@ window.onload = function () {
 
 // this is called (repeatedly) to find the sketch
 function getSketchInstance() {
-    var s = Processing.getInstanceById("selectionFlower");
-    if ( s == undefined )
-        return setTimeout(getSketchInstance, 200); // try again a bit later
-
-    mySketchInstance = s;
-    monitorSelection();
+    var s = Processing.instances[0];
+    if ( s == undefined ) {
+        setTimeout(getSketchInstance, 200); // try again a bit later
+        
+    } else {
+        mySketchInstance = s;
+        monitorSelection();
+    }
 }
 
-// this code gets called all the time (every 1/5 sec) to check
+// this code gets called repeatedly (every 1/5 sec) to check
 // if the selection changed
-function monitorSelection ( ) {
+function monitorSelection () {
     
     var txt = undefined;