How to pass dynamic parameters to .pde file

Question

class Shape contains two methods drawCircle() and drawTriangle(). Each function takes different set of arguments. At present, I invoke this by calling the pde file directly. How to pass these arguments from a HTML file directly if I have to control the arguments being passed to the draw function? 1) Example.html has (current version)

<script src="processing-1.0.0.min.js"></script> 
<canvas data-processing-sources="example.pde"></canvas>

2) Example.pde has

    class Shape { 
         void drawCircle(intx, int y, int radius) { 
              ellipse(x, y, radius, radius); 
        } 
         void drawTriangle(int x1, int y1, int x2, int y2, int x3, int 
y3) { 
              rect(x1, y1, x2, y2, x3, y3); 
        } 
    } 
    Shape shape = new Shape(); 
   shape.drawCircle(10, 40, 70); 

I am looking to do something like this in my HTML file, so that I can move all the functions into a separate file and call them with different arguments to draw different shapes (much similar to how you would do it in Java) A.html

<script> 
Shape shape = new Shape(); 
shape.drawCircle(10, 10, 3); 
</script> 

B.html

<script> 
Shape shape = new Shape(); 
shape.drawTriangle(30, 75, 58, 20, 86, 75); 
</script>

2) Iam using Example2.pde has

void setup()  {  
  size(200,200);  
  background(125);  
  fill(255); 
}

  void rectangle(int x1, int y1, int x2, int y2) {
          rect(x1, y1, x2, y2);
}

My Example2.html has

var processingInstance; processingInstance.rectangle(30, 20, 55, 55);

but this is not working. How to pass these parameters dynamically from html.

Answer 1

You can pass data to your processing instance by using a data attribute of the canvas element.

For example, if you want myvar.value to end up in the instance:

<canvas data-processing-myvar="value" data-processing-sources="/assets/mysketch.pde"></canvas>

You can access this data in your sketch by calling:

var myVarInSketch = this.param('myvar');

Answer 2

If you only need to pass in these variables at load time, it seems like it would be much easier to create configuration objects in JS that you then access in your processing code. See Accessing Javascript Objects from Processing.

For example, your JS might look like:

var shapes = [
    {shape:"circle", x:10, y:150, radius: 70}
];

and in your processing code, you can access the shapes variable:

void draw() {
    shape = new Shape();
    fill(0);
    for (int i=0; i<shapes.length; i++) {
        if (shapes[i].shape=="circle") {
            shape.drawCircle(shapes[i].x, shapes[i].y, shapes[i].radius);
        }
        // etc  
    }
}

My impression is that this is much easier than trying to actually control the processing instance from javascript.