go.yuri.at

Recently I converted some Processing sketches to Processing.js using Processing 2.0a4 Pre-Release with integrated Javascript mode. In resume it’s quite straight forward, they did a great job. But I had some troubles with code that works fine in Processing but not when exported to Javascript.

Sometimes it’s quite hard to detect errors yet the applet gets exported without error messages and shows up in the browser as an empty canvas. It’s recommended to use Firebug and Chrome javascript console Javascript console in parrallel as sometimes one gives a better description than the other. But sometimes none of them shows an error so it’s quite impossible to debug the sketches.

1. Division which is expected to produce an integer might need explicit casting

One of this errors is described in the Processing.js Quickstarter Guide and describes that you have to explicitly cast any division to an integer like this:

int center = int(width/2);

2. Don’t call function when defining a class variable

Another of this difficult to detect errors is that you can’t call a function when defining a class variable. This code works in Processing but not in Processing.js:

Calculator c = new Calculator();

void setup(){
  c.display();
}

class Calculator{
  float num = log10(10000.0);

  void display() {
    text(num,50,50);
  }

  float log10(float x) {
    return (log(x) / log(10));
  }
}

You have to call the function from the constructor and not from the class variable definition. Modify line 8 and insert the constructor into the code to make the example working:

Calculator c = new Calculator();

void setup(){
  c.display();
}

class Calculator{
  float num;

  Calculator(){
    num = log10(10000.0);
  }

  void display() {
    text(num,50,50);
  }

  float log10(float x) {
    return (log(x) / log(10));
  }
}

Firebug shows an unspecified error like this: “‘Processing.js: Unable to execute pjs sketch: TypeError: $this_1.$self is undefined’ when calling method: [nsIDOMEventListener::handleEvent]“.

3. Wrong use of function that works in Processing but not in Processing.js

Some functions produce an error in Processing.js but run fine in Processing. As described in the documentation, log() function expects the values greater than 0. A use of 0 works in Processing but produces an error in Processing.js when using it as input for text() function. This line of code crashes Processing.js without showing an error:

text(log(0),10,50);

Using an explicit cast to String makes the example working:

text(str(log(0)),10,50);

This seems to be a bug in text() function, mixing data parameter with text also works fine:

text("log(0)=="+log(0),10,50);

Update: Seems to be a bug in toP5String()

4. Different use of char

The use of chars is different than in Processing “Standar” mode:

• Comparing chars you have to use double quotes like: if (key==”i”)  instead of if (key==’i’)
• Take care of using String.charAt(), Processing.js implementation has a bug.

5. Funcitons

There are some differences to “Standard” Processing defining functions:

• You can’t define two functions with the same name but different amount of parameters.
• You should not use function names that are already used for defining variables or classes, using same name for variables, classes and functions confuses Processing.js.

6. Arrays

In “Standard” Processing it does work to define a array like int num[]; – arrays in Processing.js have to be declared like described in the reference: int[] num.

Tags: javascript, processing.js, processing.org

This entry was posted on Sunday, February 26th, 2012 at 8:23 pm and is filed under software. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.