javascript - How to pass dynamic parameters to .pde file -

class shape contains 2 methods drawcircle() , drawtriangle(). each function takes different set of arguments. @ present, invoke calling pde file directly. how pass these arguments html file directly if have control arguments being passed 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 looking in html file, can move functions separate file , call them different arguments draw different shapes (much similar how 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 not working. how pass these parameters dynamically html.

you can pass data processing instance using data attribute of canvas element.

for example, if want myvar.value end in instance:

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

you can access data in sketch calling:

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