Draft

Linking Sketches - An Alternative

The Pomax Guide describes how to connect sketches on a web page. In the original page, each sketch contained custom code to carry out the linking. This page describes an alternate method that can be used to connect any number of sketches (and optionally with Javascript). The Javascript and HTML (other than file names) is identical to the the Javascript and HTML in the original page. The difference is in the Processing.js sketches. In the original method, each sketch had custom code to complete the linking proces but some of that code was nearly the same. This alternate method puts that code in a separate file that is used by each of the sketches.

The file LikeSketchesAlt.pde contains all the linking code. It is nearly generic. To adapt it for other situations, one only needs to declare the appropriate Javascript functions in the JavaScript interface. Lets begin with that interface.

interface JavaScript {
  void showXYCoordinatesJS(int x, int y); 
}  // interface JavaScript

To adapt this to other situations, one would replace the declarations of showXYCoordinatesJS by any Javascript functions that are called by any of the sketches.

To make this work, an array is declared to hold the links to the sketches and a variable is declared to hold the link to Javascript.

  interface JavaScript {
  }  // interface JavaScript

The setLinkSketch very simple. We just save the two parameters for future use.

void setLinkSketch(Object[] pjs, JavaScript js) {
  sketchLink = pjs; 
  javascript = js;
}  // setLinkSketch

How do the sketches use these linkes to provide information to the another sketch or to the .html file? It is pretty straight forward. The following example is from the right sketch. xCircle and yCircle are sent to the other two sketches as well as to Javascript.

   void mouseMoved() {
    xCircle = mouseX;
    yCircle = mouseY;
    if (sketchLink[0] != null) {      // left sketch
     sketchLink[0].drawCircle(xCircle, yCircle);
    }
    if (sketchLink[1] != null) {      // right sketch
      sketchLink[1].drawCircle(xCircle, yCircle);
    }
    if (javascript != null) {
      javascript.showXYCoordinatesJS(xCircle, yCircle);
    }
    redraw();
  }  // mouseMoved

"sketchLink[0]" links to left sketch, the "drawCircle" method is declared in that sketch and as expected, draws the circle. Likewise for the middle sketch. "Javascript" is the link to the Javascript code while "showXYCoordinatesJS" writes the two values into the corresponding text fields.

A final note: If you compare the three sketches, you will note that the setup, draw, drawLines, and drawSquares are identical in the three sketches. Hence they could be moved to the LinkSketches.pde file and shared between the three sketches. This was not down in order that the LinkSketches.pde file would be nearly "generic" and can be used with other sketches. The only change needed is including the appropriate phototypes in the JavaScript interface.

The complete code for the 5 files can be obtained from the following links:
LinkSketchesAlt.html (Stored as a text file for convenient display)
Left.pde
Middle.pde
Right.pde
LinkSketchesAlt.pde (The linking code used by all 3 sketches)