How to access processing.js variables via javascript

Question

I am trying to change processing variables with javascript.

HTML:

<canvas id="Processing_test" data-processing-sources="test06-controller.pde">
</canvas>

Processing:

float posX = 500;

void setup() {
  size(600,600);
  background(100);
  ellipseMode(CENTER);
}
void draw() {
  background(100);
  fill(200);
  ellipse(posX,300,260,260);
}

Javascript:

var p = Processing.getInstanceById('Processing_test');
alert(p.posX);

The Problem is no alert appears. If i write

alert(p);

It shows: undefined. I know that i can use global variables that i declare in Javascript, but i want to access it the other way round. Is that possible?

( the alert is just a test, it is not what i want to do in the end ;) )

Answer 1

right now the only thing Processing.js exposes on your sketch is functions, so you can write a getter/setter:

float getPosX() { return posX; }
void setPosX(float v) { posX = v; }

now you can get and set variables to your heart's content.

Usually, however, if you want to do things in JavaScript based on the sketch, it makes more sense to have the sketch call a JS function instead. If, for instance, posX needs to be updated on the page somewhere, your sketch could call

javascript.xPosUpdated(posX);

(provided you bound javascript at sketch startup). This way JS doesn't need to "reach in" to your sketch, you're simply handing it all the information it needs to perform the updates you want.