Processing script fails to run as javascript

Question

A relatively simple Processing script fails in both the 2.0 IDE's Javascript mode and in browsers (via Processing.JS) for reason unknown. I'm pretty sure the same problem is stopping both methods. I've isolated a line that causes the failure and illustrated in the following pages:

• Test1.html is a cut-down version of the project script that works
• Test2.html demonstrates how Test1 fails when a single extra command is called (line 93), although it works fine in IDE's Java mode. The offending line only seeks to re-print info that was already successfully printed in void setup(){}, hence my confusion.

All scripts are viewable here but the key line in Test2.pde is in void drawLinks().

Any idea what is causing this? I've wasted so many hours on this now! Its possible to just copy/paste the Test2.pde script into a new Processing 2.0 IDE to play around with it in Java and Javascript modes..

Answer 1

It seems to be a problem with ProcessingJS's version of ArrayList. While it is specified properly there seems to be a bug with the constructor that accepts an initialCapacity in it. A quite recent bug report also shows this.

tl;dr: Remove the variable n from the creation of the arrayList in line 65,

this.links = new ArrayList<Link>(n);

should become:

this.links = new ArrayList<Link>();

Answer 2

If you have created the code in the Processing IDE it can't directly be used in a web browser, to run the script in a web browser you have mainly two options:

A) You can export a java-applet from Processing. This can then later be embedded into your webpage. This treats the file as a java-applet so even though it works, it's not perhaps the elegant solution.

B) ProcessingJS is reading processing files and run them as native javascript in the web browser. You download the JS library and makes a file to import this and point to the Processing source file, this is then parsed and drawn in native javascript.

Answer 3

I have found that when using OOP with processing.js you must prepend all instance variables with a this. in order for it to work correctly, especially when such objects are instantiated within an array or an ArrayList. You will need to make this modification to all constructors and methods.

For example:

class Route {
  ArrayList<Integer> cities;
  float distance;

  Route(ArrayList CITIES, float DISTANCE) {
    this.cities = CITIES;
    this.distance = DISTANCE;
  }
}

For a live example, check out the .pde linked in the source of my interactive resume.

The modified code will still execute in Processing : Java / Standard Mode but becomes excessively wordy. I usually only make this change if I am porting a project to processing.js or wanting to have a project that works in both Standard / Java and JavaScript (processing.js) modes.