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..

Forgive my lack of familiarily with Processing, but this is not valid JavaScript. How exactly are you trying to run this in Chrome? Exactly what error are you getting in the browser's console? — Matt Ball
– Matt Ball, Commented Dec 5, 2012 at 4:11
Try ProcessingJS. I at least feel that ProcessingJS gives a better, more embedded feeling when presenting Processing. — olovholm
– olovholm, Commented Dec 10, 2012 at 16:21
Please see the updated section in the question above. I've changed to ProcessingJS and provided examples. — geotheory
– geotheory, Commented Dec 11, 2012 at 20:19
Just above where you get the problem you use some new for-loop notation, try changing this for the more traditional iteration over ArrayList. So instead of (N el:al) try using an iterator Iterator<String> itr = al.iterator(); while (itr.hasNext()) { //dosomething } — olovholm
– olovholm, Commented Dec 13, 2012 at 0:47
Nice idea olovholm but sadly no luck. See test1.geotheory.co.uk/Test3.html and its code (test1.geotheory.co.uk/Test3.pde). This method did work in Java mode however. — geotheory
– geotheory, Commented Dec 13, 2012 at 12:19

olovholm · Accepted Answer · 2012-12-09 21:16:21Z

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.

answered Dec 9, 2012 at 21:16

olovholm

1,3925 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geotheory Over a year ago

Please see the updated section in the question above. I've changed to ProcessingJS and provided examples.

Petros Koutsolampros · Accepted Answer · 2012-12-19 01:10:11Z

1

+50

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>();

answered Dec 19, 2012 at 1:10

Petros Koutsolampros

2,8101 gold badge18 silver badges21 bronze badges

2 Comments

geotheory Over a year ago

Hurray!! That was it. I've always included the initialCapacity specification as I understood it optimises memory usage. Thanks Petros (fellow Bartlett grad) you get the bounty :)

Mike 'Pomax' Kamermans Over a year ago

As additional comment on this: the whole idea of the ArrayList container is that it's dynamically sized. There is no reason to ever construct it with an initial size argument.

JAMESSTONEco · Accepted Answer · 2012-12-11 07:27:58Z

1

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.

answered Dec 11, 2012 at 7:27

JAMESSTONEco

2,05115 silver badges22 bronze badges

1 Comment

geotheory Over a year ago

Please see the updated section in the question above. I've changed to ProcessingJS and provided examples. The 'this.' tip does not seem to resolve anything.

Collectives™ on Stack Overflow

Processing script fails to run as javascript

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related